
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item" label="房间编号">
        <el-input v-model.trim="listQuery.id" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="房间编号" />
      </el-form-item>
      <el-form-item class="filter-item" label="房间名称" >
        <el-input v-model.trim="listQuery.houseName" placeholder="房间名称" />
      </el-form-item>
      <el-form-item class="filter-item" label="租金从" >
        <el-input v-model.trim="listQuery.startPrice" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="租金从" />
      </el-form-item>
      <el-form-item class="filter-item" label="到" >
        <el-input v-model.trim="listQuery.endPrice" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="到" />
      </el-form-item>
      <el-form-item class="filter-item" label="租赁方式" >
        <el-select v-model="listQuery.rentalType" placeholder="请选择">
            <el-option label="整租" value="1"/>
            <el-option label="合租" value="2"/>
          </el-select>
      </el-form-item>
      <el-form-item class="filter-item" label="户型" >
        <el-select v-model="listQuery.houseType" placeholder="请选择">
            <el-option label="一室居" value="1"/>
            <el-option label="二室居" value="2"/>
            <el-option label="三室居" value="3"/>
            <el-option label="四室居及以上" value="4"/>
          </el-select>
      </el-form-item>
      <el-form-item class="filter-item" label="上架状态" >
        <el-select v-model="listQuery.houseStatus" placeholder="请选择">
            <el-option label="已上架" value="1"/>
            <el-option label="已下架" value="2"/>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" class="filter-item" @click="handleFilter">清空</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="warning" @click="edit">修改</el-button>
      <el-button type="danger" @click="shelfRental">上架房间</el-button>
      <el-button type="danger" @click="obtainedRental">下架房间</el-button>
      <span  style="font-size:0.7vw;color:#C0C0C0;padding-left:25%">注：权重越大，APP端展示越靠前（权重相同时按编辑时间从晚到早排序）</span>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="rentalList"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column prop="id" label="房间编号" align="center"/>
      <el-table-column prop="houseName" label="房间名称" align="center" >
        <template slot-scope="scope" >
          <a v-if="scope.row.houseStatus==='1'">
            <span :title="scope.row.houseName" @click="clickTitle(scope.row.id)" style="color: #009FCC">
            {{ scope.row.houseName}}
            </span>
          </a>
          <a v-if="scope.row.houseStatus==='2'">
            <span :title="scope.row.houseName" @click="clickTitle(scope.row.id)" style="color:#BDBDBD">
            {{ scope.row.houseName}}
            </span>
          </a>
       </template>
      </el-table-column>
      <el-table-column prop="sort" label="权重" align="center"/>
      <el-table-column prop="rentalPrice" label="租金" align="center"/>
      <el-table-column prop="houseStatus" label="上架状态" align="center">\
        <template slot-scope="scope">
          <span v-if="scope.row.houseStatus === '1'">已上架</span>
          <span v-if="scope.row.houseStatus === '2'">已下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="rentalType" label="租赁方式" align="center">\
        <template slot-scope="scope">
          <span v-if="scope.row.rentalType === '1'">整租</span>
          <span v-if="scope.row.rentalType === '2'">合租</span>
        </template>
      </el-table-column>
      <el-table-column prop="houseType" label="户型" align="center">\
        <template slot-scope="scope">
          <span v-if="scope.row.houseType === '1'">一室居</span>
          <span v-if="scope.row.houseType === '2'">二室居</span>
          <span v-if="scope.row.houseType === '3'">三室居</span>
          <span v-if="scope.row.houseType === '4'">四室居及以上</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateDate" label="编辑时间" align="center" ><template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template></el-table-column>
      <el-table-column prop="userName" label="编辑人" align="center"/>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        id: '',
        houseName: '',
        startPrice: '',
        endPrice: '',
        rentalType: '',
        houseType: '',
        houseStatus: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 数据总数
      rentalList: [],
      shopTypeList: [],
      deleteIds: [], // 选择的id集合
      listLoading: true // 加载圈
    }
  },
  mounted() {
    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('rental', [
      'FetchRentalList',
      'FetchShopTypeSelect'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    getStatus(row) { // 获取状态
      let statusName = ''

      // 判断状态
      switch (row.status) {
        case '0':
          statusName = '已作废'
          break
        case '1':
          statusName = '已发布'
          break
        case '2':
          statusName = '草稿'
          break
      }

      // 如果修改时间和创建时间不一致, 就显示已修改
      if (row.status === '1' && (row.updateDate > row.createDate)) {
        statusName = '已修改'
      }

      return statusName
    },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('rental/FetchRentalList', this.listQuery).then((res) => {
        const resData = res.data
        this.rentalList = resData.list
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error ListAnnouncement')
      })
    },
    handleSelectionChange(data) {
      // 设置为 空
      this.deleteIds = []
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
	  search() {
      if(this.listQuery.startPrice != '' && this.listQuery.endPrice != '' && Number(this.listQuery.startPrice) > Number(this.listQuery.endPrice)){
          this.$message.warning("起始金额不能大于结束金额");
          return
      }
      this.listQuery.pageNum = 1
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.id =''
      this.listQuery.houseName = '',
      this.listQuery.startPrice = '',
      this.listQuery.endPrice = '',
      this.listQuery.rentalType = '',
      this.listQuery.houseType = '',
      this.listQuery.houseStatus = '',
      this.dataQuery()
    },
    // 添加公告
    add() {
      this.$router.push({ name: 'rental-add' })
    },
    edit(){// 编辑公告
      const ids = this.deleteIds
      if (ids.length > 1) {
        this.$message.error('只能选择一行数据进行修改!')
        return
      }
      if (ids < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
       let ide= this.deleteIds[0]
       this.listQuery.id = ide
       this.$router.push({ name: 'rental-edit', query: { id: ide }})
      },
    deleteAnnouncement(){
       let ide= this.deleteIds[0]
       this.listQuery.id = ide 
      this.$store.dispatch('AnnouncementById', this.listQuery).then((res) => {
        const resData = res.data
        const announcement = resData.tpAnnouncement
        const imgList = resData.studentList
        this.listQuery.status= announcement.status
        console.log("1",this.listQuery.status)
        if(this.listQuery.status == 0){
          this.$message.error('已作废不可以作废')
          return
        }
        this.deleteId()     
      })    
    },
    shelfRental() {
      this.listLoading = true
      const ids = this.deleteIds
      if (ids < 1) {
        this.$message.error('请至少选择一行数据上架!')
        this.listLoading = false
        return
      }
      this.$store.dispatch('rental/ShelfRental', ids).then((res) => {
        this.listLoading = false
        this.dataQuery()
      }).catch(() => {
        this.listLoading = false
        console.log('error DeleteAnnouncement')
      })
    },
    obtainedRental() {
      this.listLoading = true
      const ids = this.deleteIds
      if (ids < 1) {
        this.$message.error('请至少选择一行数据下架!')
        this.listLoading = false
        return
      }
      this.$store.dispatch('rental/ObtainedRental', ids).then((res) => {
        this.listLoading = false
        this.dataQuery()
      }).catch(() => {
        this.listLoading = false
        console.log('error DeleteAnnouncement')
      })
    },
    deleteId(){
       const ids = this.deleteIds
      this.listLoading = true
      console.log(ids)
      this.$store.dispatch('DeleteAnnouncement', ids).then((res) => {
        this.listLoading = false
        this.listQuery.announcementTitle = ''
        this.dataQuery()
      }).catch(() => {
        this.listLoading = false
        console.log('error DeleteAnnouncement')
      })
    },


    clickTitle(id) {
      this.$router.push({ name: 'rental-edit', query: { id: id }})
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      var hour = value.getHours()
      var minutes = value.getMinutes()
      var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    }
  }
}
</script>

<style scoped>
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.button {
  margin-left: 20px;
}
</style>

