<template>
  <el-dialog :visible.sync="crud.dmRoomTempShow.room" title="选择会议室" width="60%">
    <el-row>
      <el-col :span="17">
        <el-table
          ref="multipleTable"
          v-loading="crud.loading"
          :data="rooms"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          @select="select"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column :show-overflow-tooltip="true" prop="roomId" label="会议室id" />
          <el-table-column :show-overflow-tooltip="true" prop="roomName" label="会议室名称" />
          <el-table-column :show-overflow-tooltip="true" prop="description" label="会议室地点" />
          <el-table-column :show-overflow-tooltip="true" prop="roomStatus" label="会议室使用情况" />
          <el-table-column :show-overflow-tooltip="true" prop="isApprove" label="是否需要审批" />
          <el-table-column :show-overflow-tooltip="true" prop="approver" label="审批人" />
        </el-table>
        <!--分页组件-->
        <el-pagination
          :page-size.sync="size"
          :total="total"
          :current-page.sync="page"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="getRoom()"
          @current-change="getRoom()"
        />
      </el-col>
      <el-col :span="6" :push="1">
        <el-card style="height: 100%;">
          <div>您已选择:</div>
          <div>{{ checkInfo }}</div>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-row>
        <el-col :xs="10" :sm="10" :md="10" :lg="15" :xl="15">
          <el-button style="" class="filter-item" @click="toggleSelection()">取消选择</el-button>
          <el-button class="filter-item" style="margin-left:20% ;" @click="selected()">选择</el-button>
        </el-col>
      </el-row>

    </div>
  </el-dialog>
</template>
<script>
import crudRoom from '@/api/dm/meeting/dmMeetingRoom'
import { mapGetters } from 'vuex'
import CRUD, { crud } from '@crud/crud'

export default {
  mixins: [crud()],
  // 数据字典
  dicts: [],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default() {
        return {

        }
      }
    }
  },
  cruds() {
    return CRUD({ title: '会议室', url: 'api/dmMeetingRoom', dmRoomTempBtnShow: {
      room: true
    }, crudMethod: { ...crudRoom }})
  },
  data() {
    return {
      rooms: [],
      multipleSelection: crud.selectDataDm || [],
      checkInfo: '',
      size: 10,
      page: 0,
      total: 0,
      selectSwitch: false
    }
  },
  computed: {
    ...mapGetters([
      'room'
    ])
  },
  watch: {
    multipleSelection: {
      handler: function() {
        this.setCheckInfo()
      }
    },
    'params.searchType': {
      handler: function(val, oldVal) {
        if (this.params.max === 1) {
        }
        this.getRoom()
      }
    },
    selectSwitch: {
      handler: function() {
        // console.log('selectSwitch || crud.selectDataDm ==>> ' + this.crud.selectDataDm)
        if (this.$refs.multipleTable) {
          this.$nextTick(function() {
            this.toggleSelection()
            this.rooms.forEach((item, i) => {
              this.crud.selectDataDm.forEach(row => {
                if (this.rooms[i].id === row) {
                  this.$refs.multipleTable.toggleRowSelection(this.rooms[i])
                  this.setCheckInfo()
                }
              })
            })
          })
        }
      }
    }/* ,
    'crud.dmUserTempShow.user': {
      handler: function(val, oldVal) {
        if (val <= 0) {
          this.$refs.multipleTable.clearSelection()
        }
      }
    } */
  },
  created() {
    // console.info('params', this.user)
    // console.info('crudUser ==>> ' + JSON.stringify(crudUser))
    this.getRoom()
  },
  methods: {
    getRoom() {
      // console.info('attendeeSet ==>> ' + this.params.attendeeSet)
      crudRoom.getRoom({
        page: this.page - 1,
        size: this.size
      }).then(res => {
        this.total = res.totalElements
        this.rooms = res.content.map(function(obj) {
          return obj
        })
        this.selectSwitch = !this.selectSwitch
      })
    },
    toggleSelection(rows) {
      // console.info('DM用户选择 toggleSelection || rows ==>> ' + rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    select(selection, row) {
      // console.info('选择select || selection ==>> ' + JSON.stringify(selection))
      // console.info('选择select || row ==>> ' + JSON.stringify(row))
      if (this.params.max === 1) {
        this.$refs.multipleTable.clearSelection()
        // 当表格数据都没有被勾选的时候 就返回
        if (selection.length === 0) return
        // 主要用于将当前勾选的表格状态清除
        this.$refs.multipleTable.toggleRowSelection(row, true)
        return false
      }
      if (this.params.max !== 1 && selection.length > this.params.max) {
        this.$message({
          message: '最多选择' + this.params.max + '条数据',
          type: 'warning'
        })
        return false
      }
      if (this.params.max > 1 && selection.length <= this.params.max) {
        this.$refs.multipleTable.clearSelection()
        selection.forEach(obj => {
          this.$refs.multipleTable.toggleRowSelection(obj, true)
        })
      }
    },
    handleSelectionChange(val) {
      // console.info('DM用户选择 handleSelectionChange || val ==>> ' + JSON.stringify(val))
      this.multipleSelection = val
    },
    selected() {
      // console.log(this.$refs.multipleTable.selection)
      this.$emit('on-change', this.$refs.multipleTable.selection[0] || {}, this.crud.openId)
      this.$refs.multipleTable.clearSelection()
      this.crud.doCloseDmRoom()
    },
    setCheckInfo() {
      var checkedRooms = this.$refs.multipleTable.selection
      var info = ''
      checkedRooms.forEach(row => {
        info += row.roomName + ','
      })
      this.checkInfo = info.substring(0, info.length - 1)
    },
    resetSelect() {
      this.getRoom()
    }
  }
}
</script>
