<template>
  <!-- <div> -->
  <!-- <el-form :inline="true" :model="form" class="demo-form-inline"> -->
  <!-- <el-form-item label="组织机构名称:" prop="valueTitle" :rules="{ required: true, message: '物业公司名称不能为空', trigger: 'blur' }"> -->
    <el-select
      ref="selectTree1"
      v-model="form.valueTitle"
      placeholder="请输入组织机构名称"
    >
      <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"
        >
          <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 {
  props: {
    valueTitle: {
        type: String,
        required: true,
      },
      editCheckCode: {
        type: String,
        required: true,
      },

    },
    watch: {
        'valueTitle': {
          handler(Value) {
            // newValue 和 oldValue 是一样的
           // console.log(Value,'++++++++++++++++++');
            this.form.valueTitle=Value
          },
          deep: true
        },
        'editCheckCode': {
          handler(Value) {
            // newValue 和 oldValue 是一样的
           // console.log(Value,'++++++++++++++++++');
            this.form.editCheckCode=Value
          },
          deep: true
        }
      },
  data() {
    return {
      vh: "",
      IdData: "",
      form: {
        value: "",
        valueTitle: "",
        editCheckCode: "",//选择的id
        accordion: true,
        defaultExpandedKey: [],
        //区域
        options: [],
        default: {
          value: "id",
          children: "children",
          label: "name",
        },
      },

    };
  },
  created() {
    // this.form.valueTitle = JSON.parse(
    //   window.sessionStorage.getItem("Info")
    // ).deptName;
    this.area();
  },
  beforeMount(){
    // this.form.valueTitle=this.valueTitle
    // this.form.editCheckCode=this.editCheckCode
  },
  mounted() {

    this.form.valueTitle=this.valueTitle
    this.form.editCheckCode=this.editCheckCode

  },
  computed: {},
  methods: {
    //区域
    area() {
      deptTree().then((res) => {
        if (res.code == "A0000") {
          this.form.options = res.data;
          //this.$emit("click", res.data[0]);
        }
        // debugger
        this.IdData = this.form.options[0].children[0].id;
        this.$emit("sendMessage", this.IdData);

        //用于子组件向父组件传递部门id非code
      });
    },
    // 切换选项
    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>
