<template>
  <div id="updatePoint">
    <div class="condition">
      <div class="header">
        <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
        <el-button size="small" style="float:right" @click="updateZ">更新</el-button>
      </div>
      <el-scrollbar style="height:calc(100% - 43px)">
        <div class="item">
          <p>将位置标签图片批量补充到业务空间:</p>
          <div v-for="item in zoneList" :key="item.objid" class="zone-item">
            <el-tooltip class="item" effect="light" :content="item.RoomLocalName || item.RoomName" placement="top">
              <p>{{item.RoomLocalName || item.RoomName}}</p>
            </el-tooltip>
            <el-button type="info" icon="el-icon-delete" circle style="float:right;" size="mini" @click="deleteZone(item.RoomID)"></el-button>
          </div>
          <div class="zone-item" style="border:none;">
            <el-cascader :props="zoneCascader" :show-all-levels="false" v-model="zoneCa" @change="changeCascader" filterable style="float:left;">
            </el-cascader>
            <el-button type="primary" icon="el-icon-plus" circle style="float:right;" size="mini" @click="addZone"></el-button>
          </div>
        </div>
        <div class="item">
          <p>位置标签图片信息:</p>
          <locationPointMsg :pointObj="$route.params.item" ref="pointMsg"></locationPointMsg>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import locationPointMsg from '@/views/data_admin/buildGraphy/locationPointMsg'
import { queryDictionaryHead, zoneQueryByPoint, queryZone } from '@/api/scan/request';
import { mapGetters } from 'vuex'
export default {
  data() {
    let that = this;
    return {
      zoneList: [],//业务空间列表
      pointItem: {},//点位标签对象
      zoneTypeList: [],//业务空间类型
      zoneCascader: {//业务空间忌廉器
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          that.getCascaderNode(level, node, resolve);
        }
      },
      newZoneObj: {},//当前新建业务空间
      zoneCa: []
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  components: {
    locationPointMsg
  },
  created() {
    this.pointItem = this.$route.params.item
    this.getSpaceList();
  },
  methods: {
    //创建
    updateZ() {
      console.log(this.zoneList);
      if (this.$refs.pointMsg.choImg.length && this.zoneList.length) {
        let imgs = {};
        this.$refs.pointMsg.choImg.map((item, key) => {
          imgs[`additionalProp${key + 1}`] = item;
        })
        this.zoneList.map(item => {
          item.Pic = imgs;
        })
        let param = {
          data: {
            content: this.zoneList
          }
        }
      }
      else if (!this.$refs.pointMsg.choImg.length) {
        this.$message("请至少选择一张图片");
      }
      else {
        this.$message("请至少添加一个业务空间");
      }

    },
    //获取空间列表
    getSpaceList() {
      let pa = {
        X: this.pointItem.X,
        Y: this.pointItem.Y,
        data: { Filters: `buildingId = '${this.pointItem.BuildId}' and floorId = '${this.pointItem.FloorId}'` }
      }
      zoneQueryByPoint(pa, res => {
        this.zoneList = res.Content;
      });
    },
    //级联node
    getCascaderNode(level, node, resolve) {
      let id = (level + 1) * 10;
      //建筑
      if (level == 0) {
        let nodes = this.$route.params.floorData.map(item => ({
          value: item.BuildID,
          label: item.BuildLocalName || item.BuildName,
          leaf: level >= 3
        }))
        resolve(nodes)
      }
      //楼层
      else if (level == 1) {
        let floors = this.$route.params.floorData.filter(item => { return item.BuildID == node.value })
        let nodes = floors[0].Floor.map(item => ({
          value: item.FloorID,
          label: item.FloorLocalName || item.FloorName,
          leaf: level >= 3
        }))
        resolve(nodes)
      }
      //空间类型
      else if (level == 2) {
        if (this.zoneTypeList && this.zoneTypeList.length) {
          resolve(this.zoneTypeList)
        }
        else {
          let pa = {
            Filters: `parentId='Space'`
          }
          queryDictionaryHead(pa, res => {
            this.zoneTypeList = res.Content.filter((item => { return item.Name != '元空间' })).map(item => ({
              value: item.Code,
              label: item.Name,
              leaf: level >= 3
            }))
            resolve(this.zoneTypeList)
          });
        }
      }
      //业务空间
      else {
        let pa = {
          zone: node.value,
          data: {
            "Filters": `buildingId='${node.parent.parent.value}';floorId='${node.parent.value}'`,
            "Orders": "createTime desc, RoomID asc",
            "PageNumber": 1,
            "PageSize": 999
          }
        }
        queryZone(pa, res => {
          let nodes = res.Content.map(item => ({
            value: item,
            label: item.RoomLocalName || item.RoomName,
            leaf: level >= 3
          }))
          resolve(nodes)
        })
      }
    },
    //删除业务空间
    deleteZone(zoneid) {
      this.zoneList = this.zoneList.filter(item => { return item.RoomID != zoneid });
    },
    //添加业务空间
    addZone() {
      if (this.newZoneObj.RoomID && this.zoneList.findIndex((item) => (item.RoomID == this.newZoneObj.RoomID)) == -1) {
        this.zoneList.push(this.newZoneObj)
        console.log(this.zoneList)
      }
      else if (!this.newZoneObj.RoomID) {
        this.$message("请选择业务空间后添加")
      }
      else {
        this.$message("已有业务空间，请重新选择");
      }
      this.zoneCa = [];
      this.newZoneObj = {}
    },
    //选择业务空间
    changeCascader(val) {
      this.newZoneObj = val[3]
    },
    //返回
    goBack() {
      this.$router.push({
        name: "buildGraphy",
        params: { nowBuildFloor: this.$route.params.nowBuildFloor }
      })
    }
  },
  watch: {
    projectId: {
      handler(val) {
        this.goBack();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.condition {
  position: relative;
  padding: 10px 10px;
  display: flex;
  height: calc(100% - 22px);
  flex-direction: column;
  border: 1px solid #dfe6ec;
  background: #fff;
  .header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    span {
      line-height: 33px;
      margin-left: 15px;
    }
    /deep/ .buildFloor {
      line-height: 32px;
    }
  }
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.item {
  padding: 10px 10px;
  label {
    display: inline-block;
    padding: 5px 10px;
    width: 130px;
  }
}
.zone-item {
  display: inline-block;
  position: relative;
  width: 245px;
  padding: 5px 10px;
  margin: 0 5px 5px 0;
}
.zone-item p {
  width: 200px;
  float: left;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgb(220, 223, 230);
  padding-left: 15px;
  padding: 0 0 0 15px;
  border-radius: 5px;
}
</style>