<template>
  <el-cascader placeholder="全部" :options="LocationList" v-model="value" filterable size="small" @change="changeCascader" change-on-select
    :props="props" clearable class="location"></el-cascader>
</template>
<script>
import { dynamicLocationList } from "@/api/scan/request";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      LocationList: [],
      value: [],
      timer: null,
      props: {
        value: 'Name',
        label: 'Name',
        children: 'List'
      }
    };
  },
  created() {
    this.init();
  },
  props: {
    Related: {},
    typeName: {}
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  methods: {
    init() {
      let param = { Related: this.Related, TypeName: this.typeName };
      dynamicLocationList(param, res => {
        this.LocationList = res.Content[0].List;
        //添加未明确对象
        this.LocationList = this.delNullItems(this.LocationList)
        this.LocationList.map(item => {
          if (item.List) {
            item.List.map(child => {
              if (child.List) {
                child.List.unshift({ Name: '未明确业务空间' })
              }
            })
            item.List.unshift({ Name: '未明确楼层' })
          }
        })
        this.LocationList.unshift({ Name: '未明确建筑' })
      });
    },
    delNullItems(arr) {
      let tempArr = JSON.parse(JSON.stringify(arr))
      let options = tempArr.map(item => {
        if (item.Name == 'null') return undefined
        if (item.List && item.List.length) {
          item.List = this.delNullItems(item.List)
        }
        return item
      }).filter(d => d)
      return options
    },
    changeCascader(val) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        let tempVal = JSON.parse(JSON.stringify(val));
        if (tempVal.length && tempVal[tempVal.length - 1].indexOf('未明确') > -1) {
          tempVal.splice(tempVal.length - 1, 1, '')
        }
        this.$emit("change", tempVal);
      }, 800);
    }
  },
  watch: {
    projectId(n, o) {
      this.init();
    }
  }
};
</script>
<style lang="less" scoped>
.location {
  width: 100%;
  /deep/ .el-input__inner {
    vertical-align: baseline;
  }
}
</style>

