<template>
  <!-- <div> -->
  <!-- <el-form :inline="true" :model="form" class="demo-form-inline"> -->
  <el-form-item label="区域:">
    <el-select ref="selectTree1" v-model="form.valueTitle" >
      <el-option
        :value="form.editCheckCode"
        :label="form.valueTitle"
        class="options"
      >
        <el-tree
          id="tree-option"
          ref="selectTree"
          :accordion="form.accordion"
          :data="form.options"
          :highlight-current="true"
          :expand-on-click-node="false"
          :default-expanded-keys="form.defaultExpandedKey"
          @node-click="handleNodeClick"
          node-key="id"
        >
          <span slot-scope="{ node, data }">
            <i
              :class="[data.color != null ? 'ification_col' : '']"
              :style="{ 'background-color': data.color }"
            ></i
            >&nbsp;&nbsp;{{ data.name }}
          </span>
        </el-tree>
      </el-option>
    </el-select>
  </el-form-item>
  <!-- </el-form> -->
  <!-- </div> -->
</template>
<script>
import { deptTree } from "@/api/admin/dept";
export default {
  data() {
    return {
      vh: "",
      IdData: "",
      form: {
        value: "",
        valueTitle: "",
        editCheckCode: "", //选择的id
        accordion: true,
        defaultExpandedKey: [],
        //区域
        options: [],
        default: {
          value: "id",
          children: "children",
          label: "name",
        },
      },
    };
  },
  created() {
    this.area();
  },
  mounted() {
    this.form.valueTitle = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptName;
  },
  computed: {},
  methods: {
    //区域
    area() {
      this.form.defaultExpandedKey = [];
      deptTree().then((res) => {
        if (res.code == "A0000") {
          this.form.options = res.data;
          res.data.forEach((item) => {
            this.form.defaultExpandedKey.push(item.id);
            item.children.forEach((val) => {
              this.form.defaultExpandedKey.push(val.id);
            });
          });
          this.$emit("click", res.data[0]);
          this.$emit("clickFn", res.data);
        }
        // debugger
        this.IdData = this.form.options[0].children[0].id;
        this.$emit("sendMessage", this.IdData);
        this.$emit("send", this.form.options);
      });
    },
      init(){
        if(this.form.options.length>0){
          this.$refs.selectTree.setCurrentKey(this.form.options[0].id)
            this.form.valueTitle = this.form.options[0].name
            this.form.editCheckCode = this.form.options[0].id;
            this.$emit("click", this.form.options[0]);
        }
      },
    // 切换选项
    handleNodeClick(data) {
      this.form.editCheckCode = data.id;
      this.form.valueTitle = data.name;
      // this.form.defaultExpandedKey = [];
      this.$emit("click", data);
      this.$refs.selectTree1.blur();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  // max-height: 1000px;
  padding: 0;
  overflow: hidden;
  overflow-y: hidden;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}

ul li > .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}

.el-tree-node__label {
  font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
  font-weight: 700;
  color: #409eff;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
  font-weight: normal;
  color: #606266;
}

.el-popper {
  z-index: 9999;
}
.ification_col {
  display: inline-block;
  width: 20px;
  height: 10px;
}
</style>
