<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.id" class="zone-item">
            <el-tooltip class="item" effect="dark"
              :content="`${item.building.localName} / ${item.floor.localName} / ${item.dClassDef.name} / ${item.localName}`"
              placement="top">
              <p>{{item.localName || item.name}}</p>
            </el-tooltip>
            <i class="el-icon-delete" circle style="float:right;line-height:32px;padding: 0 9px 0 0;cursor: pointer;" size="mini"
              @click="deleteZone(item.id)"></i>
          </div>
          <div class="zone-item" style="border:none;border-left:-4px;width:auto;">
            <el-cascader v-show="plusZone" :props="zoneCascader" :show-all-levels="false" v-model="zoneCa" @change="changeCascader" filterable
              style="float:left;">
            </el-cascader>
            <el-button v-show="plusZone" type="success" icon="el-icon-check" circle style="float:right;margin:2px 10px;" size="mini" @click="addZone">
            </el-button>
            <el-button v-show="!plusZone" type="primary" icon="el-icon-plus" circle style="float:left;margin:2px 0;" size="mini"
              @click="plusZone=true"></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 { zoneQueryByPoint, zoneQuery, updateZonePic } from '@/api/scan/request';
import { mapGetters } from 'vuex'
import { queryPhysicsAllType } from "@/api/dict";
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: [],
      plusZone: false
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  components: {
    locationPointMsg
  },
  created() {
    this.pointItem = this.$route.params.item
    this.getSpaceList();
  },
  methods: {
    //创建
    updateZ() {
      let imgs = this.$refs.pointMsg.choImg.concat();
      console.log(imgs);
      imgs = imgs.map(item => ({
        id: item.objectId,
        key: item.key,
        name: item.name,
        type: item.type
      }))
      if (imgs.length && this.zoneList.length) {
        let zones = this.zoneList.map(item => {
          if (item.pic) {
            item.pic = item.pic.concat(imgs);
          }
          else {
            item.pic = imgs;
          }
          return { roomId: item.id, pic: item.pic, classCode: item.classCode };
        })
        let param = {
          content: zones
        }
        updateZonePic(param, res => {
          this.$message.success("更新成功");
          this.$refs.pointMsg.clearImg();
        })
      }
      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}';floorId='${this.pointItem.floorId}'`,
          cascade: [{ name: "floor" }, { name: "building" }, { name: "zoneName" }]
        }
      }
      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.id,
          label: item.localName || item.name,
          leaf: level >= 3
        }))
        resolve(nodes)
      }
      //楼层
      else if (level == 1) {
        let floors = this.$route.params.floorData.filter(item => { return item.id == node.value })
        let nodes = floors[0].floor.map(item => ({
          value: item.id,
          label: item.localName || item.name,
          leaf: level >= 3
        }))
        resolve(nodes)
      }
      //空间类型
      else if (level == 2) {
        if (this.zoneTypeList && this.zoneTypeList.length) {
          resolve(this.zoneTypeList)
        }
        else {
          let pa = {
            type: `space`
          }
          queryPhysicsAllType(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 = {
          filters: `not id isNull`,
          orders: "createTime desc, id asc",
          pageNumber: 1,
          pageSize: 1000,
          zoneType: node.value,
          buildingId: node.parent.parent.value,
          floorId: node.parent.value
        }
        zoneQuery(pa, res => {
          let nodes = res.content.map(item => {
            item.building = { localName: node.parent.parent.label };
            item.floor = { localName: node.parent.label };
            item.dClassDef = { name: node.label };
            console.log(item);
            return {
              value: item,
              label: item.localName || item.name,
              leaf: level >= 3
            }
          })
          resolve(nodes)
        })
      }
    },
    //删除业务空间
    deleteZone(zoneid) {
      this.zoneList = this.zoneList.filter(item => { return item.id != zoneid });
    },
    //添加业务空间
    addZone() {
      if (this.newZoneObj.id && this.zoneList.findIndex((item) => (item.id == this.newZoneObj.id)) == -1) {
        this.zoneList.push(this.newZoneObj)
        this.plusZone = false;
      }
      else if (!this.newZoneObj.id) {
        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;
  margin: 5px 15px 10px 0;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
}
.zone-item p {
  width: 200px;
  float: left;
  height: 32px;
  overflow: hidden;
  padding-left: 15px;
  padding: 0 0 0 15px;
}
</style>
