<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model.trim="query.blurry" clearable size="small" placeholder="输入会议室名称/维护人/联系方式/备注搜索" style="width: 450px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-input v-model.trim="query.floorName" clearable size="small" placeholder="楼层名称" style="width: 450px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">使用状态</label>
        <el-select v-model="query.roomStatus" filterable placeholder="请选择">
          <el-option
            v-for="item in dict.dm_room_status"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <div id="viewListDiv" style="margin-left:1%;margin-right:1%">
        <el-row>
          <el-col v-for="(item) in crud.data" :key="item.roomId" :span="4" :offset="1">
            <div style="margin-top:15px">
              <el-card :body-style="{ padding: '0px', height: '200px'}" :style="item.roomStatus === '0' ? unUseingStyle : useingStyle" shadow="hover" @click.native="showInfo(item)">
                <img :src="item.imgPath" width="auto" height="150px" class="image">
                <div>
                  <span style="margin: 10px 0px;">{{ item.roomName }}</span><br>
                  <div class="bottom clearfix" style="margin: 10px 0px;">
                    <time class="time"><strong>简介:</strong>{{ item.description =='null' ? "" : item.description }}</time>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <div style="margin-left:35%">
          <!--分页组件-->
          <pagination />
        </div>
      </div>
      <!--详情展示页面-->
      <el-dialog :visible.sync="infoVisible" title="会议室详情" width="1000px" style="margin-top:5vh;">
        <el-form>
          <!--会议室基础信息-->
          <el-row>
            <el-col :span="12">
              <el-form-item label="会议室名称:">
                {{ room.roomName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议室描述:">
                {{ room.description }}
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="会议室名称:">
                {{room.roomName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议室描述:">
                {{room.description}}
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在楼层:">
                {{ roomFloor.floorName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维护人:">
                {{ room.maintainer }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式:">
                {{ room.contacts }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:">
                {{ room.remark }}
              </el-form-item>
            </el-col>
          </el-row>

          <!--会议室设备-->
          <el-divider style="margin: 10px 0px;">会议室设备</el-divider>
          <el-row>
            <!-- <span style="font-weight: bold;">会议室设备</span> -->
            <el-col :span="24" style="margin-top: 10px;">
              <el-table :data="deviceList">
                <el-table-column property="deviceName" label="设备名称" />
                <el-table-column property="nameplate" label="铭牌" />
                <el-table-column property="maintainer" label="维护人" />
                <el-table-column property="contacts" label="联系方式" />
                <el-table-column property="remark" label="备注" />
              </el-table>
            </el-col>
          </el-row>

          <!--3天内预约的会议-->
          <el-divider style="margin: 10px 0px;">会议预约记录</el-divider>
          <el-row>
            <el-col :span="24" style="margin-top: 10px;">
              <el-table :data="meetingList">
                <el-table-column property="meetingName" label="会议议题" />
                <el-table-column property="meetingDescribe" label="会议描述" />
                <el-table-column property="initiatorUserName" label="发起人" />
                <el-table-column property="deptName" label="部门" />
                <el-table-column property="remark" label="备注" />
                <el-table-column property="startDate" label="会议开始时间" />
                <el-table-column property="endDate" label="会议结束时间" />
              </el-table>
            </el-col>
          </el-row>

          <div v-if="isUsed">
            <!--会议室设备-->
            <el-divider style="margin: 10px 0px;">当前正在使用的会议信息</el-divider>
            <!--会议室基础信息-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="会议议题:">
                  {{ usedMeeting.meetingName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="会议介绍:">
                  {{ usedMeeting.meetingDescribe }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="会议类型:">
                  {{ dict.label.dm_meeting_type[usedMeeting.meetingType] }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会议性质:">
                  {{ dict.label.dm_meeting_prop[usedMeeting.meetingProp] }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="参与部门:">
                  {{ usedMeeting.deptName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发起人:">
                  {{ usedMeeting.initiatorUserName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="参与人员:">
                  {{ usedMeeting.attendeeUserName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="usedMeeting.gcAssignUserName">
              <el-col :span="24">
                <el-form-item label="权限用户:">
                  {{ usedMeeting.gcAssignUserName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间:">
                  {{ usedMeeting.startDate }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间:">
                  {{ usedMeeting.endDate }}
                </el-form-item>
              </el-col>
            </el-row>
          </div>

        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudDmMeetingRoom from '@/api/dm/meeting/dmMeetingRoom'
import { getAllFloor } from '@/api/dm/floor/dmFloor'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
/* import crudOperation from '@crud/CRUD.operation' */
/* import udOperation from '@crud/UD.operation' */
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'

const defaultForm = { roomId: null, roomName: null, dmFloor: { floorId: null }, description: null, imgPath: null, contacts: null, remark: null, roomStatus: null, reserveStatus: null, environmental: null, createBy: null, updateBy: null, createTime: null, updateTime: null, maintainer: null }
export default {
  name: 'DmMeetingRoom',
  components: { pagination/* , crudOperation */, rrOperation/* , udOperation */ },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['dm_room_status', 'dm_meeting_type', 'dm_meeting_prop'],
  cruds() {
    return CRUD({ title: '会议室', url: 'api/dmMeetingRoom/viewList', idField: 'roomId', sort: 'roomId,desc', crudMethod: { ...crudDmMeetingRoom }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'dmMeetingRoom:add'],
        edit: ['admin', 'dmMeetingRoom:edit'],
        del: ['admin', 'dmMeetingRoom:del']
      },
      infoVisible: false, // 详情弹框
      floors: [], // 楼层列表
      room: {}, // 会议室信息
      roomFloor: {}, // 会议室楼层信息
      deviceList: [], // 会议室设备列表
      meetingList: [], // 会议预约列表
      usedMeeting: {}, // 正在使用的会议
      isUsed: false,
      useingStyle: {
        border: '2px solid #FF8F91'
      },
      unUseingStyle: {
        border: '2px solid #B4E8E9'
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      this.findFloorList()
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 查询楼层信息
    findFloorList() {
      getAllFloor().then(res => {
        this.floors = res.content
      })
    },
    showInfo(row) {
      console.info('点击查看详情 row ==>> ' + JSON.stringify(row))
      crudDmMeetingRoom.viewInfo(row.roomId).then(res => {
        console.info('视图详情 viewInfo ==>> ' + JSON.stringify(res))
        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
      })
    }
  }
}
</script>

<style scoped>

#viewListDiv .el-row {
  margin-bottom: 20px;
:last-child {
  margin-bottom: 0;
}
}
#viewListDiv .el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;

}
.five-content{
  margin-right:20%;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

