<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 :md="4" :sm="8">
            <a-form-item label="设备类型">
              <j-dict-select-tag v-model="queryParam.type" placeholder="请选择设备类型" dict-code="alarm_query_equipmentType"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-space style="float: left">
              <a-button type="primary" @click="searchQuery">查询</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 in list"
                :key="item.id"
                ref="icon"
                :src="item.status === 1? statusList[0].imgPath
                :(item.status === 2 ? 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: 'PmAccessControlDeviceOverview',
  components: {},
  data() {
    return {
      queryParam: {deleted: false},
      description: 'pm_access_control_device管理页面',
      url: {
        list: "/pm/pmAccessControlDevice/list",
        delete: "/pm/pmAccessControlDevice/delete",
        deleteBatch: "/pm/pmAccessControlDevice/deleteBatch",
        exportXlsUrl: "/pm/pmAccessControlDevice/exportXls",
        importExcelUrl: "pm/pmAccessControlDevice/importExcel",
      },
      list: [],
      dictOptions: {},
      superFieldList: [],
      buildingInfos: [],
      targetFloorList: [],
      types: [],
      statusList: [
        {name: '正常', value: 1, imgPath: require('@/assets/door-close.png')},
        {name: '离线', value: 2, imgPath: require('@/assets/door-offline.png')},
        {name: '损坏', value: 3, 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) => {
          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();
          })
        });
    },
    floorImgLoadComplete() {
      this.searchQuery();
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>