<template>
  <div id="cascader-group">
    <el-row :gutter="20">
      <el-col :span="12">
        <p>源端设备类：</p>
        <el-select
          v-model="value"
          placeholder="请选择"
          :props="props"
          multiple
          @change="changeVal">
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.facility"
            :value="item.code"
          />
        </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, queryEquip} from "@/api/scan/request";
  import {sourceQuery} from "@/api/relation/api";

  export default {
    name: "setCascader",
    props: {
      all: {
        type: Boolean,
        default: false,
      },
      RelationTypeName: {
        type: String
      },

    },
    computed: {
      ...mapGetters("layout", ["projectId"])
    },
    data() {
      return {
        value: "",
        endValue: '',
        options: [],
        endOptions: [],
        props: {
          value: "code",
          label: "facility"
        },
        falg: true,
        content: [],

      };
    },
    created() {
      this.getData();
    },
    watch: {
      projectId() {
        this.value = '';
        this.getData();
      },
      RelationTypeName() {
        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: [
            "Category"
          ]
        }
        let param1 = {
          data: {
            Distinct: true,
            Orders: "EquipName asc",
            PageNumber: 1,
            PageSize: 500,
            Projection: [
              "EquipCode", "EquipName"
            ]
          }
        }
        let param3 = {
          Filters: `ProjectId='${this.projectId}';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.Category
            });
            this.filterForOptions();
          }
          if (this.value) {
            this.changeVal(this.value)
          }
          if (arr) {
            this.value = []
            arr.forEach(({SourceType}) => this.value.push(SourceType))
            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>
