<template>
  <div id="spaceSelect">
    <span class="buildFloor" style="padding-right:12px">空间类型</span>
    <el-cascader
      v-model="value"
      placeholder="请选择空间类型"
      clearable
      :style="isWidth ? '' : 'width:160px;'" size="small" 
      :props="{value:'Code',label:'Name',children:'ZoneType'}"
      :options="options" 
      @change="changeVal">
    </el-cascader>
  </div>
</template>

<script>
import { queryAllZoneType } from '@/api/scan/request';
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  props: {
    isWidth: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      value:[null],
      spaceVal: null,//值
      options: [],
      props: {
        isWidth:false
      }
    }
  },
  methods: {
    setValue(val) {
      this.value = val;
      this.changeVal(val);
    },
    //获取下拉框数据
    getOptionData() {
      let params1 = {Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }]}
      queryAllZoneType(params1, res => {
        this.options = res.Content;
        this.changeVal(this.value);
      })
    },
    //改变空间
    changeVal(value) {
      let val = value[value.length - 1];
      let space = {};
      this.options.forEach(item => {
        if (item.ZoneType) {
          item.ZoneType.forEach(other => {
            if (other.Code == val) {
              space = other
            }
          })
        } else {
          if (item.Code == val) {
            space = item
          }
        }
      })
      this.$emit('change', val, space, value)
    }
  },
  created() {
    this.getOptionData();
  }
}
</script>

<style lang="less" scoped>
#spaceSelect {
  float: left;
  margin-left: 10px;
  .buildFloor {
    color: #999999;
    font-size: 14px;
  }
}
</style>