<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model.trim="query.blurry" clearable size="small" placeholder="输入会议室信息" style="width: 450px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
      <date-range-picker
        v-model="query.registerDate"
        start-placeholder="创建时间"
        end-placeholder="创建时间"
        class="date-item"
      />
      <rrOperation :crud="crud" />

      <el-dialog title="已完成会议详情" :visible.sync="meetingTableVisible">
        <el-table v-loading="crud.loading" :data="meetingData">
          <!--          <el-table-column type="selection" width="55" />-->
          <el-table-column prop="meetingId" label="会议编号" />
          <el-table-column prop="meetingName" label="会议名称" />
          <el-table-column prop="roomName" label="会议室名称" />
          <el-table-column prop="initiatorUserName" label="发起人" />
          <el-table-column prop="planCount" label="应到人数" />
          <el-table-column prop="actualCount" label="实际签到人数" />
          <el-table-column v-if="checkPer(['admin','dmMeeting:edit','dmMeeting:del'])" label="操作" width="250px" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.isCancel">已取消</div>
              <!--文件列表-->
              <el-button type="warning" plain size="mini" icon="el-icon-download" @click="toDownloadFiles(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="10"
            @current-change="pageChange"
          />
        </div>

      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" size="small" @selection-change="crud.selectionChangeHandler" @row-click="handleCurrentChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="roomName" label="会议室名称" />
        <el-table-column prop="dmFloor.floorName" label="所在楼层" />
        <el-table-column prop="description" label="会议室简介" />
        <el-table-column prop="contacts" label="联系方式" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="maintainer" label="维护人" />
        <el-table-column prop="approver" label="审批人" />
      </el-table>
      <!--分页组件-->
      <pagination />
      <!--文件列表-->
      <fileList :params.sync="fileParams" />
    </div>
  </div>
</template>

<script>
import crudDmMeetingRoom from '@/api/dm/meeting/dmMeetingRoom'
import crudDmMeeting from '@/api/dm/meeting/dmMeeting'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
// import { isvalidPhone } from '@/utils/validate'
import DateRangePicker from '@/components/DateRangePicker'
import fileList from '../file/index-dialog'
// 自定义验证
// const validPhone = (rule, value, callback) => {
//   if (value && !isvalidPhone(value)) {
//     callback(new Error('请输入正确的联系方式'))
//   } else {
//     callback()
//   }
// }

export default {
  name: 'DmMeetingRoom',
  components: { pagination, rrOperation, DateRangePicker, fileList },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({ title: '会议室', url: 'api/dmMeetingRoom', idField: 'roomId', sort: 'roomId,desc', crudMethod: { ...crudDmMeetingRoom }})
  },
  data() {
    return {
      total: 1,
      roomIds: null,
      meetingTableVisible: false,
      meetingData: [],
      fileParams: {
        visible: false,
        meetingId: ''
      }
    }
  },

  methods: {
    // 触发单选
    handleCurrentChange(val) {
      console.log('handleCurrentChange val', val)
      if (val) {
        this.meetingTableVisible = true
        this.roomIds = val.roomId
        const params = 'page=0&size=10&roomId=' + val.roomId
        crudDmMeeting.getDmMeeting(params).then(res => {
          this.meetingData = res.content
          this.total = res.count
          // this.room = res.room
          // this.roomFloor = res.room.dmFloor
          // this.deviceList = res.deviceList
          // this.meetingList = res.meetingList
          // this.usedMeeting = res.usedMeeting
          // this.isUsed = res.isUsed
          // this.infoVisible = true
        })
      }
    },
    // 展示下载页面
    toDownloadFiles(row) {
      console.log('下载文件列表')
      console.log('row：', row)
      this.$set(this.fileParams, 'visible', true)
      this.$set(this.fileParams, 'meetingId', row.meetingId)
      console.log(this.fileParams)
    },
    pageChange(page) {
      const params = 'page=' + (page - 1) + '&size=10&roomId=' + this.roomIds
      crudDmMeeting.getDmMeeting(params).then(res => {
        console.info('getDmMeeting ==>> ' + JSON.stringify(res))
        this.meetingData = res.content
        this.total = res.count
      })
    }
  }
}
</script>

<style scoped>

</style>
