<template>
    <div id="modelFile">
        <span class="modelFile" style="margin-right: 12px;">模型文件</span>
        <el-cascader :options="options" :show-all-levels="false" @change="handleChange" style="width:160px;"
        @active-item-change='handleItemChange' clearable placeholder="请选择模型文件" v-model="casVal"></el-cascader>
    </div>
</template>
<script>
import tools from "@/utils/scan/tools"
import request from "@/api/model/file.js";
import { mapGetters, mapActions } from "vuex"

export default {
  computed: {
    ...mapGetters("layout", [ "projectId", "secret", "userId" ])
  },
  data() {
    return {
      casVal: [],
      options: [],
      modelIdToFloorId: {}
    };
  },
  created() {
    this.init()
  },
  watch: {
    projectId() {
      this.casVal =[]
      this.options = []
      this.init()
    }
  },
  methods: {
    //设置默认选项
    setValue(val) {
        if (val && val.length) {
          this.casVal = val
        }
    },
    //获取数据
    init() {
      this.getDirectory()
    },
    // 获取文件夹
    getDirectory() {
      request.queryModel("", res => {
        this.options = res.Content.map(t => {
          return {
            value: t.Id,
            label: t.Name,
            children: []
          }
        })
      });
    },
    // 通过id查询文件夹下模型文件
    handleItemChange(val) {
      let data = {
        FolderId: val[0],
        ProjectId: this.projectId
      };
      request.queryFloorList(data, res => {
        let tempArr = res.Content.map(t => {
          this.modelIdToFloorId[t.CurrentModelId] = t.Id;
          return {
            value: t.CurrentModelId,
            label: t.FloorName
          }
        })
        this.pushChild(this.options, tempArr, val[0])
      })
    },
    // 将模型文件list填到相应的文件夹下
    pushChild(options, arr, Code) {
      options.map(option => {
        if (option.value == Code) {
          option.children = arr;
        } else {
          if (option.children) {
            this.pushChild(option.children, arr, Code)
          }
        }
      })
    },
    //改变item
    handleChange(value) {
      this.$emit("change", value)
    }
  }
};
</script>
<style lang="less">
    .el-cascader .el-input .el-input__inner {
        vertical-align: bottom;
    }
</style>
<style lang="less" scoped>
    #modelFile {
        margin-left: 10px;
        float: left;
        .modelFile {
            color: #999999;
            font-size: 14px;
        }
    }
</style>
