<template>
  <div id="cascader-group">
    <el-row :gutter="20">
      <el-col :span="12">
        <p>源端设备类：</p>
        <el-select
          v-model="value"
          placeholder="请选择"
          :props="props"
          multiple
          disabled
        >
          <el-option
            v-for="item in oraginOption"
            :key="item.code"
            :label="item.facility"
            :value="item.code"
            disabled
          />
        </el-select>
      </el-col>
      <el-col :span="12">
        <p>末端设备类：</p>
        <el-select
          v-model="endValue"
          placeholder="请选择"
          :props="props"
        >
          <el-option
            v-for="item in endOptions"
            :key="item.code"
            :label="item.facility"
            :value="item.code"
            disabled
          />
        </el-select>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getEquipBelongs } from "@/api/scan/request";
import { queryEquip } from "@/api/object/equip"

import { sourceQuery } from "@/api/relation/api";

export default {
  name: "getCascader",
  props: {
    all: {
      type: Boolean,
      default: false,
    },
    RelationTypeName: {
      type: String
    },
    number: {
      type: Number
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      value: "",
      endValue: '',
      options: [],
      oraginOption: [],
      endOptions: [],
      props: {
        value: "code",
        label: "facility"
      },
      falg: true,
      content: [],

    };
  },
  created() {
    this.getData();
  },
  watch: {
    projectId() {
      this.value = '';
      this.getData();
    },
    RelationTypeName() {
      this.getData();
    },
    number() {
      this.getData();
    }
  },
  methods: {
    setValue(val) {
      this.value = val
    },
    //修改val
    changeVal(val) {
      this.endOptions = this.options.filter(i => !val.includes(i.code))
      this.$emit("change", val)
    },
    //获取当前项目下的设备类型(只拿到编码-需要过滤)
    getData() {
      let param2 = {
        distinct: true,
        pageNumber: 1,
        pageSize: 500,
        projection: ["classCode"]
      }
      let param1 = {
        data: {
          distinct: true,
          orders: "equipName asc",
          pageNumber: 1,
          pageSize: 500,
          projection: [
            "equipCode", "equipName"
          ]
        }
      }
      let param3 = {
        // Filters: `ProjectId='${this.projectId}';CalcName='${this.RelationTypeName}'`
        calcName: this.RelationTypeName

      }
      let promise2 = new Promise((resolve, reject) => {
        queryEquip(param2, res => {
          resolve(res)
        })
      })
      let promise1 = new Promise((resolve, reject) => {
        getEquipBelongs(param1, res => {
          resolve(res)
        })
      })
      let promise3 = new Promise((resolve, reject) => { //回显
        sourceQuery(param3, res => {
          resolve(res)
        })
      })
      Promise.all([promise1, promise2, promise3]).then((res) => {
        let allData = res[0], data = res[1], arr = res[2].content
        this.options = this.formatOptions(allData.content)
        if (!this.all) {
          this.content = data.content.map(t => {
            return t.classCode
          });
          this.filterForOptions();
        }
        if (this.value) {
          this.changeVal(this.value)
        }
        if (arr) {
          this.value = []
          arr.forEach(({ sourceType }) => this.value.push(sourceType))
          this.oraginOption = this.options.filter(i => this.value.includes(i.code))
          this.endOptions = this.options.filter(i => !this.value.includes(i.code))
        }
      })
    },
    //格式化options数据
    formatOptions(arr) {
      let data = [];
      arr.map(t => {
        let temp = {};
        temp.code = t.equipCode;
        temp.facility = t.equipName;
        data.push(temp)
      })
      return data;
    },
    //过滤
    filterForOptions() {
      this.options = this.options.filter(item => {
        if (this.content.indexOf(item.code) > -1) {
          return item
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
#cascader-group {
  /*float: left;*/
  /*margin-left: 10px;*/
  /*display: inline-block;*/

  .buildFloor {
    color: #999999;
    font-size: 14px;
  }
}
</style>
