<template>
  <div>
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item"  label="房型编号">
        <el-input v-model="listQuery.id"  placeholder="房型编号"/>
      </el-form-item>
      <el-form-item class="filter-item"  label="房型名称">
        <el-input v-model="listQuery.roomName" placeholder="房型名称"/>
      </el-form-item>
      <el-form-item class="filter-item"  label="房型价格">
        <el-input  v-model="listQuery.price" placeholder="房型价格"/>
      </el-form-item>
      <el-form-item class="filter-item"  label="上架状态">
        <el-select v-model="listQuery.roomStatus" placeholder="上架状态">
         <el-option label="已上架" value="1"/>
         <el-option label="已下架" value="2"/>
        </el-select>
      </el-form-item>
      <!-- <el-form-item class="filter-item"  label="预订日期从">
            <el-date-picker
              v-model="listQuery.beginTime"
              type="date"
              placeholder="年-月-日">
              </el-date-picker>
              <span>-</span>
              <el-date-picker
              v-model="listQuery.endTime"
              type="date"
              placeholder="年-月-日">
              </el-date-picker>
      </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-row>
      <el-button type="success" @click="addHotelRoom()">新增</el-button>
      <el-button type="info" @click="addHotelEndit()">编辑</el-button>
       <el-button type="primary" @click="enditRoom(1)">上架房型</el-button>
      <el-button type="danger" @click="enditRoom(2)">下架房型</el-button>
      <span style="padding-left:20%;font-size:0.7vw;color:#C0C0C0;">注：权重越大，APP端展示越靠前（权重相同时按编辑时间从晚到早排序）</span>
      </el-row>
    </el-form>
      <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="listData"
      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="roomName" label="房型名称" align="center">
         <template slot-scope="scope" >
          <a v-if="scope.row.roomStatus==='1'">
            <span :title="scope.row.roomName" @click="clickTitle(scope.row.id)" style="color: #009FCC">
            {{ scope.row.roomName}}
            </span>
          </a>
          <a v-if="scope.row.roomStatus==='2'">
            <span :title="scope.row.roomName" @click="clickTitle(scope.row.id)" style="color:#BDBDBD">
            {{ scope.row.roomName}}
            </span>
          </a>
      </template>
      </el-table-column>
      <el-table-column prop="sort" label="权重" align="center"/>
      <el-table-column prop="price" label="房型价格" align="center"/>
      <el-table-column prop="roomStatus" label="上架状态" align="center">
        <template slot-scope="scope">   
          <span v-if="scope.row.roomStatus==='1'">已上架</span>
          <span v-if="scope.row.roomStatus==='2'" style="color:#BDBDBD">已下架</span>
        </template></el-table-column>
      <el-table-column prop="editUser" label="编辑人" align="center"/>
      <el-table-column prop="createDate" label="时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template></el-table-column>

    </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>
export default {
    data() {
        return {
          listQuery: {
            id: '',
            messageContent: '',
            status: '',
            //待办类型
            messageType:'',
            pageNum: 1,
            pageSize: 10,
            dataValue: '',
            roomNo: '',
            roomName: '',
            price: '',
            beginTime: '',
            endTime: '',
            roomStatus: '',
            editUser: '',
            roomStatusIds: []       
          },
           deleteIds: [], // 选择的id集合
           total: 0,
           listLoading: true, // 加载圈
           listData: [],
        }
    },
    mounted(){
        //  this.listLoading = false
    this.dataQuery()
    },
    methods:{
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('HotelRoom', this.listQuery).then((res) => {
        const resData = res.data
        this.listData = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error HotelRoom')
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.price = ''
      this.listQuery.roomName = ''
      this.listQuery.roomNo = ''
      this.listQuery.roomStatus = ''
      this.listQuery.endTime = ''
      this.listQuery.beginTime = ''
      this.listQuery.pageNum = 1
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.dataQuery()
    },
    search() {
      this.dataQuery()
    },
    handleSelectionChange(data) {
      this.deleteIds = [] // 设置为 空
      for (let i = 0; i < data.length; i++) {
      this.deleteIds.push(data[i].id)
    }
    },
     formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = this.padDate(value.getMonth() + 1)
      var day = this.padDate(value.getDate())
      var hour = this.padDate(value.getHours())
      var minutes = this.padDate(value.getMinutes())
      var seconds = this.padDate(value.getSeconds())
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    },
      padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    addHotelRoom(){
      this.$router.push({ name: 'grogshop-grogshopRoomAdd' })
    },
    addHotelEndit(){
      const ids = this.deleteIds
      if (ids.length < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
      if (ids.length > 1) {
        this.$message.error('只能选择一行数据进行修改!')
        return
      }
      console.log(ids[0])
       this.$router.push({ name: 'grogshop-grogshopRoomEdit', query: { id: ids[0] }})
      
      
      
    },
    clickTitle(ids){
    this.$router.push({ name: 'grogshop-grogshopRoomEdit', query: { id: ids}})
    },
    enditRoom(statusId){
       const ids = this.deleteIds
      if (ids.length < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
        
         this.listQuery.roomStatusIds = ids
         this.listQuery.roomStatus = statusId
         this.$store.dispatch('HotelRoomRoomStatus', this.listQuery).then((res) => {
         this.$message({
          message: '成功',
          type: 'success'
         })
        this.listQuery.roomStatus = ''
        this.dataQuery()   
      }).catch(() => {
        console.log('error HotelRoom')
      })
    }
  }
}
</script>

<style>
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.root{
  display: flex;
  flex-flow: column;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.spanSize{
    color:aqua
}
</style>
