<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-select
          v-model="query.buildId"
          filterable
          size="small"
          placeholder="请选择建筑名称"
          class="filter-item"
          style="width: 160px"
          @change="changeBuildIdHandle"
        >
          <el-option
            v-for="item in optionsObj.Build"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.floorNo"
          filterable
          clearable
          size="small"
          placeholder="请选择楼层"
          class="filter-item"
          style="width: 160px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in optionsObj.Floor"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="query.mac"
          clearable
          size="small"
          placeholder="输入MAC"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.major"
          clearable
          size="small"
          placeholder="输入Major"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.minor"
          clearable
          size="small"
          placeholder="输入Minor"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.battery"
          clearable
          size="small"
          placeholder="电量低于"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <el-button
          slot="left"
          class="filter-item"
          type="success"
          icon="el-icon-location-outline"
          size="mini"
          :loading="viewLoading"
          @click="showAllHandle"
        >
          查看所有信标地图
        </el-button>
      </crudOperation>
    </div>
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="查看信标地图"
      width="1000px"
    >
      <relative-map
        ref="relativeMap"
        v-model="mapData"
        :buildFloor="buildFloor"
        drawMode="Point"
        :symbols="pointSymbols"
      />
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="item in iBeaconTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      ></el-table-column>
      <el-table-column
        label="显示位置"
        width="100px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button class="el-icon-location-information" type="success" size="mini" @click="showHandle(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudBeacon from '@/api/positioning/iBeacon'
import { getOptions, getFloorNoOptions } from '@/api/positioning/public'
import { getiBeaconListJson } from '@/api/positioning/map'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import { iBeaconTableOptions } from '../tableConfig'
//import BeaconMap from './beaconMap.vue'
import RelativeMap from '@/components/RelativeMap'
const defaultForm = {
  id: '',
  positionName: '',
  positionSort: 999,
  enabled: true,
}

export default {
  name: 'Beacon',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker, RelativeMap },
  cruds() {
    return CRUD({
      title: '信标',
      url: 'positioning/iBeacon/getPageListJson',
      listOrder: [],
      crudMethod: { ...crudBeacon },
      optShow: {},
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
  },
  created() {
    this.getOptions()
    this.getAlliBeacon()
  },
  data() {
    return {
      dialogVisible: false,
      iBeaconTableOptions,
      viewLoading: false,
      permission: {
        add: ['admin', 'iBeacon:add'],
        edit: ['admin', 'iBeacon:edit'],
        del: ['admin', 'iBeacon:del'],
      },
      rules: {
        positionName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        positionSort: [{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }],
      },
      optionsObj: {
        Build: [],
        Floor: [],
      },
      alliBeacon: [],
      mapData: [],
      buildFloor: {},
      pointSymbols: {
        Point: {
          markerFile: '/static/images/location.svg',
          markerWidth: 10,
          markerHeight: 20,
          markerDx: 0,
          markerDy: 8,
        },
      },
    }
  },
  methods: {
    // 打开
    [CRUD.HOOK.beforeRefresh]() {
      // let params = this.getQueryParams()
      // console.log(params)
    },
    showAllHandle() {
      this.mapData = []
      if (this.alliBeacon) {
        this.alliBeacon.forEach((a) => {
          let bf = this.mapData.find((b) => b.buildId == a.buildId && b.floorNo == a.floorNo)
          if (bf) {
            bf.geometries.push({
              type: 'Point',
              points: [{ x: a.x, y: a.y }],
              infoWindow: {
                title: a.mac,
                width: 150,
                content: `<table>\
                    <tr>\
                      <td class="tdname">Major：</td>\
                      <td class="tddata">${a.major}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">Minor：</td>\
                      <td class="tddata">${a.minor}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">电量：</td>\
                      <td class="tddata">${a.battery}</td>\
                    </tr>\
                  </table>`,
              },
            })
          } else {
            this.mapData.push({
              buildId: a.buildId,
              floorNo: a.floorNo,
              geometries: [
                {
                  type: 'Point',
                  points: [{ x: a.x, y: a.y }],
                  infoWindow: {
                    title: a.mac,
                    width: 150,
                    content: `<table>\
                    <tr>\
                      <td class="tdname">Major：</td>\
                      <td class="tddata">${a.major}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">Minor：</td>\
                      <td class="tddata">${a.minor}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">电量：</td>\
                      <td class="tddata">${a.battery}</td>\
                    </tr>\
                  </table>`,
                  },
                },
              ],
            })
          }
        })
      } else {
        this.mapData = []
      }
      this.buildFloor = {}
      this.dialogVisible = true
    },
    showHandle(id) {
      let ib = this.crud.data.find((a) => a.id == id)
      if (ib) {
        this.mapData = [
          {
            buildId: ib.buildId,
            floorNo: ib.floorNo,
            geometries: [
              {
                type: 'Point',
                points: [{ x: ib.x, y: ib.y }],
                infoWindow: {
                  title: ib.mac,
                  width: 150,
                  content: `<table>\
                    <tr>\
                      <td class="tdname">Major：</td>\
                      <td class="tddata">${ib.major}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">Minor：</td>\
                      <td class="tddata">${ib.minor}</td>\
                    </tr>\
                    <tr>\
                      <td class="tdname">电量：</td>\
                      <td class="tddata">${ib.battery}</td>\
                    </tr>\
                  </table>`,
                },
                openInfoWindow: true
              },
            ],
          },
        ]
        this.buildFloor = {
          buildId: ib.buildId,
          floorNo: ib.floorNo,
        }
      } else {
        this.mapData = []
        this.buildFloor = {}
      }
      this.dialogVisible = true
    },
    async changeBuildIdHandle(val) {
      await this.getFloorNoOption(val)
      this.crud.toQuery()
    },
    async getOptions() {
      try {
        let res = await getOptions('Build')
        if (res.code === 20000) {
          this.optionsObj.Build = res.data.content
          this.query.buildId = this.optionsObj.Build[0].value
          this.crud.toQuery()
          await this.getFloorNoOption(this.query.buildId)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getFloorNoOption(buildId) {
      try {
        let res = await getOptions('FloorNo', { buildId: buildId })
        if (res.code === 20000) {
          this.optionsObj.Floor = res.data.content
          this.query.floorNo = null
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getAlliBeacon() {
      try {
        let res = await getiBeaconListJson({ buildId: null })
        if (res.code === 20000) {
          this.alliBeacon = res.data.content
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style></style>
