<template>
  <div class='page-table-template' style='display: flex;flex-direction: column;flex-grow: 1;flex-shrink: 1;'>
    <div class="btn-box">
      <el-button type='danger' @click='groupDel' :disabled="!selection.length">批量删除</el-button>
    </div>
    <div class="has-button-table">
      <el-table :data='tableData' style='width: 100%' border v-loading='loading' height="100%" ref="assetTable"
                :header-cell-style="{background:'#e1e4e5',color:'#2b2b2b'}" @selection-change='handleSelectionChange'>
        <el-table-column type='selection' width='55' align='center'></el-table-column>
        <el-table-column header-align='center' align='center' label='建筑' width='150'>
          <template slot-scope='scope'>
            {{ getbuildName(scope.row.buildingId) }}
          </template>
        </el-table-column>
        、
        <el-table-column header-align='center' align='center' label='楼层' width='80'>
          <template slot-scope='scope'>
            {{ getfloorName(scope.row.floorId) }}
          </template>
        </el-table-column>
        <el-table-column header-align='center' align='center' prop='family' label='设备族'>
          <template slot-scope='scope'>
            {{ getFamilyName(scope.row.family) }}
          </template>
        </el-table-column>
        <el-table-column header-align='center' align='center' prop='point' label='点位标签名称' v-if="active!='fourth'"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column header-align='center' align='center' prop='equipId' label='本地编码' width='250'
                         show-overflow-tooltip></el-table-column>
        <el-table-column header-align='center' align='center' prop='name' label='本地名称' show-overflow-tooltip>
          <template slot-scope='scope'>
            {{ scope.row.localName || scope.row.name }}
          </template>
        </el-table-column>
        <div v-if="active=='fourth'">
          <el-table-column header-align='center' align='center' prop='spaceId' label='所在元空间'></el-table-column>
          <el-table-column header-align='center' align='center' prop='eq' label='设备类'></el-table-column>
          <el-table-column header-align='center' align='center' prop='bimLocation' label='BIM模型中坐标'></el-table-column>
          <el-table-column header-align='center' align='center' prop='equipmentId' label='对应的岗位' width='120'>
            <template slot-scope='scope'>
              <el-button v-if="scope.row.equipmentId" type='primary' plain size='mini' @click='detail(scope.row)'>
                查看岗位详情
              </el-button>
            </template>
          </el-table-column>
        </div>
        <el-table-column header-align='center' align='center' prop='equipId' label='操作' width='250'>
          <template slot-scope='scope'>
            <el-button type='primary' plain size='mini' @click='detail(scope.row)'>查看</el-button>
            <el-button type='primary' plain size='mini' @click='add(scope.row)' v-if="active=='third'">添加岗位</el-button>
            <el-button type='danger' plain size='mini' @click='dele(scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="right" v-show="tableData && tableData.length" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="page.total">
    </el-pagination>
    <saga-station ref='station' :options='options' :itemObj='itemObj' @refresh='refresh'></saga-station>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SagaStation from './Station'
//api
import {
  queryProperty, //查询资产
  deleteProperty, //删除资产
  getEquipBelongs, //获取设备族
} from '@/api/scan/request'
import { floorQuery } from '@/api/object/floor';

export default {
  name: 'assetslist',
  data() {
    return {
      loading: false,
      tableData: [],
      iframeSrc: '',
      allChecked: [],
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      building: {},//建筑id->名称
      floorsObj: {},//楼层id->名称
      allFamilyObj: {},
      allEquipObj: {},
      filter: {
        first: 'CodeType=-4',
        second: 'BIMID isNull',
        third: 'EquipmentId isNull',
        fourth: 'CodeType=1',
      },
      selection: [],
      options: [],
      itemObj: {}
    }
  },
  props: {
    buildingId: {
      default: ''
    },
    active: {
      default: 'first'
    },
    buildingData: {
      default: {}
    }
  },
  components: {
    SagaStation
  },
  methods: {
    //获取所有楼层
    getFloors() {
      floorQuery({}, res => {
        res.content.map(item => {
          this.floorsObj[item.id] = item.localName
        })
      })
    },
    //获取设备族
    getDeviceType() {
      let param = {
        data: {
          orders: "equipName asc",
          pageNumber: 1,
          pageSize: 500
        }
      }
      getEquipBelongs(param, res => {
        let obj = {}
        res.content.map(t => {
          this.allFamilyObj[t.family] = t.familyName;
          if (!obj[t.family]) {
            obj[t.family] = []
          }
          obj[t.family].push({ code: t.equipCode, name: t.equipName })
        })
        this.alloptions = obj
      })
    },
    //获取列表
    getTableData() {
      if (this.buildingId) {
        this.loading = true
        this.tableData = []
        let param = {
          filters: `buildingId='${this.buildingId}';${this.filter[this.active]}`,
          orders: "createTime desc,equipId desc",
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize
        }
        queryProperty(param, res => {
          this.tableData = res.content
          this.page.total = res.total
          this.loading = false
        })
      }
    },
    //页码
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getTableData()
    },
    //分页大小
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNumber = 1;
      this.getTableData()
    },
    //查看
    detail(row) {
      this.$message('开发中...')
    },
    //单个删除资产
    dele(row) {
      let param = [{ EquipID: row.EquipID }]
      this.delProperty(param)
    },
    //批量删除
    groupDel() {
      let param = this.selection.map(t => {
        return { EquipID: t.EquipID }
      })
      this.delProperty(param)
    },
    //删除接口
    delProperty(param) {
      deleteProperty(param, res => {
        this.selection = []
        this.$message.success('删除成功')
        this.getTableData()
      })
    },
    //选择项改变时
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    //根据建筑id获取建筑名称
    getbuildName(buildId) {
      if (JSON.stringify(this.building)) {
        this.buildingData.map(t => {
          this.building[t.BuildID] = t.BuildLocalName
        })
      }
      return this.building[buildId]
    },
    //根据楼层id获取楼层名称
    getfloorName(floorId) {
      return this.floorsObj[floorId]
    },
    //根据族三位编码对应族名称
    getFamilyName(family) {
      return this.allFamilyObj[family]
    },
    //刷新
    refresh() {
      this.page.pageNumber = 1;
      this.getTableData()
    },
    //添加岗位
    add(row) {
      this.options = this.alloptions[row.family]
      this.itemObj = row
      this.$refs.station.show()
    }
  },
  watch: {
    buildingId() {
      this.$refs.assetTable.doLayout()
      this.getTableData()
      this.selection = []
    },
    active(n, o) {
      this.$refs.assetTable.doLayout()
      this.getTableData()
      this.selection = []
    }
  },
  created() {
    this.getFloors()
    this.getDeviceType()
  }
}
</script>

<style scoped lang='less'>
.page-table-template {
  background-color: #fff;
  padding: 10px;

  .no-button-table {
    height: calc(100% - 48px);
  }

  .has-button-table {
    height: calc(100% - 94px);
  }

  .btn-box {
    padding: 10px;
    padding-top: 0;
    display: flex;
    justify-content: flex-end;
  }

  .right {
    padding: 10px;
  }
}
</style>
