<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
    <el-row class="filters">
      <el-col :span="9">
        <el-input placeholder="输入设备名称或设备本地编码进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
        </el-input>
      </el-col>
      <el-col :span="15">
        <span style="margin-left:10px;">所属楼层</span>
        <el-cascader @change="getTableData" v-model="floor" :options="options" :props="props"></el-cascader>
        <el-checkbox style="margin-left:10px;" @change="getTableData" v-model="showType" label="只显示在当前业务空间中的设备"></el-checkbox>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <div>
              {{scope.row.localName||scope.row.name||''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="equipCategory.name" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="linkOtherSpace" label="已关联其他业务空间" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="action" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="toDetail(scope.$index, scope.row)" type="primary" plain>查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="fr" 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>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getSpaceEquip,
  // buildingQuery, //数据中心-建筑查询
  notEqInSpaceQuery, //没有和当前空间绑定的设备
  notEqForSpaceQuery, //未服务当前空间的设备
  eqInSpaceCreate, //设备所在业务空间--创建关系
  eqForSpaceCreate, //设备服务业务空间--创建关系
  getEqNotInSpace, //空间内没有和空间关联的设备
  getEqNotForSpace, //空间内没有服务空间的设备
} from "@/api/scan/request";
import { mapGetters } from "vuex";
import { buildingQuery } from '@/api/object/build';
export default {
  components: {

  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      title: "添加设备",
      keycode: '', //输入查询条件
      options: [], //建筑楼层级联
      floor: [], // 选中的建筑楼层
      showType: false, //是否只显示在当前业务空间中的设备
      inSpaceType: '设备',
      dialogVisible: false,
      tableData: [],
      loading: false,
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      }, // 列表样式
      selections: [], // 选中项
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      props: { //自定义字段
        value: "id",
        label: "localName",
        children: "floor"
      },
    };
  },
  props: {
    type: {}, //Equipment--EquipmentFor
    spaceId: {},
    zone: {}, //分区类型
  },
  created() {
    this.getBuilding();
  },
  methods: {
    // 获取项目下建筑
    getBuilding() {
      let pa = {
        cascade: [{ name: 'floor', orders: 'floorSequenceId desc' }],
        orders: "localName asc",
      }
      buildingQuery(pa, res => {
        this.options = res.content.map(t => {
          if (t.floor) {
            t.floor = t.floor.map(item => {
              return item;
            })
          } else {
            t.floor = []
          }
          t.floor.unshift({ id: 'all', localName: '全部' }, { id: 'isNull', localName: '未明确楼层' })
          return t;
        })
        this.options.unshift({ id: 'all', localName: '全部' }, { id: 'isNull', localName: '未明确楼层' })
      })
    },
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true;
      this.tableData = [];
      this.getTableData();
    },
    // 获取列表数据
    getTableData() {
      this.loading = true
      let pa = {
        data: {
          cascade: [{ name: "equipCategory" }],
          filters: '',
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize,
          orders: 'id asc'
        },
        type: this.zone,
        spaceId: this.spaceId
      }
      if (this.floor[0] == 'isNull') {
        pa.data.filters += `buildingId isNull`
      } else if (this.floor[0] && this.floor[0] != 'all') {
        pa.data.filters += `buildingId='${this.floor[0]}'`
      }
      if (this.floor[1] == 'isNull') {
        pa.data.filters += `;floorId isNull`
      } else if (this.floor[1] && this.floor[1] != 'all') {
        pa.data.filters += `;floorId='${this.floor[1]}'`
      }
      if (this.keycode != '') {
        pa.data.filters += `;name contain "${this.keycode}" or localName contain "${this.keycode}" or localId contain "${this.keycode}"`
      }
      // 删除首尾分号
      pa.data.filters = pa.data.filters.replace(/(^;)|(;$)/g, '');
      if (pa.data.filters == '') {
        delete pa.data.filters
      }
      if (this.showType) {
        if (this.type == "equipment") {
          // pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
          pa.data.cascade = [{ Name: "equipCategory" }];
          getEqNotInSpace(pa, res => {
            this.loading = false
            this.getDataSuc(res, 'ZoneSpaceBaseIn')
          })
        } else {
          // pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
          pa.data.cascade = [{ Name: "equipCategory" }];
          getEqNotForSpace(pa, res => {
            this.loading = false
            this.getDataSuc(res, 'ZoneSpaceBaseFor')
          })
        }
      } else {
        if (this.type == "equipment") {
          pa.data.cascade.push({ Name: "zoneSpaceInBase" })
          notEqInSpaceQuery(pa, res => {
            this.loading = false
            this.getDataSuc(res, 'ZoneSpaceBaseIn')
          })
        } else {
          pa.data.cascade.push({ Name: "zoneSpaceForBase" })
          notEqForSpaceQuery(pa, res => {
            this.loading = false
            this.getDataSuc(res, 'ZoneSpaceBaseFor')
          })
        }
      }
    },
    // 获取列表成功回调
    getDataSuc(res, zonespacebase) {
      let response = res.content.map(t => {
        let otherSpace = [];
        if (t[zonespacebase] && t[zonespacebase].length) {
          t[zonespacebase].map(item => {
            otherSpace.push(item.localName || item.name)
          })
        }
        t.linkOtherSpace = otherSpace.join(',');
        return t;
      })
      this.tableData = res.content;
      this.page.total = res.total;
    },
    //选中项修改
    handleSelectionChange(val) {
      this.selections = val;
    },
    // 确认 保存关系
    savaRelation() {
      let pa = {
        data: {
          spaceId: this.spaceId,
          equipIdList: []
        },
        type: this.zone
      }
      this.selections.map(t => {
        pa.data.equipIdList.push(t.id)
      })
      if (this.type == "equipment") {
        eqInSpaceCreate(pa, res => {
          this.successCallback()
        })
      } else {
        eqForSpaceCreate(pa, res => {
          this.successCallback()
        })
      }
    },
    // 关联成功回调
    successCallback() {
      this.$message.success('关联成功');
      this.$emit('refresh');
      this.dialogVisible = false;
    },
    // 改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    // 改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    // 查看详情
    toDetail() {
      this.$message('开发中')
    }
  },
  watch: {
    showType(n) {

    }
  }
};
</script>
<style lang="less" scoped>
#addEqDialog {
  .filters {
    margin-bottom: 10px;
    /deep/ .el-input__inner {
      vertical-align: baseline;
    }
  }
  .table-box {
    height: 350px;
  }
}
</style>
