<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="4" :lg="4" :md="5" :sm="24">
            <a-form-item label="选择楼栋">
              <a-select placeholder="选择楼栋" v-model="queryParam.buildingName" @change="buildingChange">
                <a-select-option v-for="buildingInfo in buildingInfos" :key="buildingInfo.name">
                  {{ buildingInfo.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="4" :md="5" :sm="24">
            <a-form-item label="选择楼层">
              <a-select placeholder="选择楼层" v-model="queryParam.floor">
                <a-select-option v-for="floor in targetFloorList" :key="floor">
                  {{ floor }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="4" :md="5" :sm="24">
            <a-space style="float: left">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button type="default" @click="searchReset">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!--<div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('pm_access_control_device')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      &lt;!&ndash; 高级查询区域 &ndash;&gt;
      <j-super-query :fieldList="superFieldList" ref="superQueryModal"
                     @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>-->

    <!-- table区域-begin -->
    <div>
      <a-row>
        <a-col :span="24">
          <div style="position: relative">
            <img ref="floorImg" src="@/assets/floor.png" alt="floor" width="100%" height="100%"
                 @load="floorImgLoadComplete()"/>
            <img v-for="(item, index) in list"
                 ref="icon"
                 :src="item.status === 'NORMAL'
                 ? statusList[0].imgPath
                 : (item.status === 'OFFLINE' ? statusList[1].imgPath : statusList[2].imgPath)"
                 :alt="item.name + ':' + item.ip"/>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {getAction} from '@/api/manage'

export default {
  name: 'PmMonitoringDeviceOverview',
  components: {},
  data() {
    return {
      queryParam: {deleted: false},
      description: 'pm_monitoring_device管理页面',
      url: {
        list: "/pm/pmMonitoringDevice/list",
        delete: "/pm/pmMonitoringDevice/delete",
        deleteBatch: "/pm/pmMonitoringDevice/deleteBatch",
        exportXlsUrl: "/pm/pmMonitoringDevice/exportXls",
        importExcelUrl: "pm/pmMonitoringDevice/importExcel",
      },
      list: [],
      dictOptions: {},
      superFieldList: [],
      buildingInfos: [],
      targetFloorList: [],
      types: [],
      statusList: [
        {name: '正常', value: 'NORMAL', imgPath: require('@/assets/door-close.png')},
        {name: '离线', value: 'OFFLINE', imgPath: require('@/assets/door-offline.png')},
        {name: '损坏', value: 'BREAKDOWN', imgPath: require('@/assets/door-warning.png')}],

    }
  },
  created() {
    getAction('/pm/pmBuildingInfo/list')
      .then(value => this.buildingInfos = value.result);
    getAction('/pm/pmAccessControlDevice/types')
      .then(value => this.types = value.result);
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig() {
    },
    buildingChange(value) {
      let targetList = this.buildingInfos.filter(buildingInfo => buildingInfo.name === value);
      if (targetList != null && targetList.length > 0) {
        this.targetFloorList = targetList[0].floorList;
      } else {
        this.targetFloorList = [];
      }
    },
    loadComplete() {
      if (this.list.length > 0) {
        this.list.forEach((item, index) => {
          console.log(item);
          let fixX = 20;
          let fixY = 20;
          let offsetWidth = this.$refs.floorImg.offsetWidth;
          let offsetHeight = this.$refs.floorImg.offsetHeight;
          this.$refs.icon[index].style.position = 'absolute';
          this.$refs.icon[index].style.width = '40px';
          this.$refs.icon[index].style.top = item.coordinate.y * offsetHeight - fixY + 'px';
          this.$refs.icon[index].style.left = item.coordinate.x * offsetWidth - fixX + 'px';
        });
      }
    },
    searchQuery() {
      getAction(this.url.list, this.queryParam)
        .then(value => {
          this.list = value.result.records;
          this.$nextTick(()=>{
            this.loadComplete();
          })
        });
    },
    searchReset() {
      this.searchQuery();
    },
    floorImgLoadComplete() {
      this.searchQuery();
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>