<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
        {{resInfo.typeName || ''}}
      </el-col>
    </el-row>
    <el-row class="roomLine">
      <div ref="echartD" style="width: 50%; height: 100%"></div>
      <el-row class="roomNumber">
        <el-col>
          <el-col>在用数</el-col>
          <el-col class="yellow">{{resList && resList.using || 0}}</el-col>
        </el-col>
        <el-col>
          <el-col>空闲数</el-col>
          <el-col class="blue">{{resList && resList.toatl - resList.using || 0}}</el-col>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="roomTable">
      <el-table
        :data="dataMap"
        class="transparentTableRow"
        height="100%"
        style="width: 100%; margin: 0 auto"
      >
        <!-- min-width="20" -->
        <el-table-column
          show-overflow-tooltip
          v-for="item in headerData"
          :key="item.prop"
          :prop="item.prop"
          align="center"
          :label="item.name"
        ></el-table-column>
      </el-table>
    </el-row>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import echartsGet from "./echart";
export default {
  props:['resInfo'],
  data() {
    return {
      resList: null,
      dataMap: [],
      headerData: [
        { name: "会议室名称", prop: "meetingRoomName" },
        { name: "会议名称", prop: "meetingTheme" },
        { name: "开始时间", prop: "meetIngStartTime" },
        { name: "截止时间", prop: "meetingEndTime" },
      ],
    };
  },
  watch: {
    "$store.state.windowWidth"() {
      echarts.dispose(this.$refs.echartD)
      echarts.init(this.$refs.echartD).setOption(echartsGet())
    },
    resInfo(){
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    async getData(){
       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
        applicationCode: this.resInfo.applicationCode
      }))
      this.resList = res.pageList
      this.dataMap = res.pageList.list.map((val)=>{
        return {
          ...val,
          meetIngStartTime: new Date(val.meetIngStartTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1],
          meetingEndTime: new Date(val.meetingEndTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1]
        }
      })
      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  }
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  .roomLine {
    flex: 1;
    width: 100%;
    display: flex;
    .roomNumber {
      font-family: Impact Regular, Impact Regular-Regular;
      width: 50%;
      display: flex;
      flex-direction: column;
      // padding: 10px 30px;
      align-items: flex-start;
      justify-content: center;
      & > .el-col {
        display: flex;
        height: 50px;
        width: 160px;
        box-shadow: inset 0 0 16px 1px #3573fc;
        border: 1px solid transparent;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        & > .el-col:last-child {
          font-size: 25px;
        }
      }
      & > .el-col:first-child {
        margin-bottom: 20px;
      }
    }
  }
  .roomTable {
    height: 90px;
    padding: 10px 0 0;
    width: 100%;
  }
}
</style>