<template>
    <!-- <div> -->
        <!-- <el-form :inline="true" :model="form" class="demo-form-inline"> -->
            <el-form-item label="部门:" prop="valueTitle">
              <el-select ref="selectTree1" :value="form.value" v-model="form.valueTitle" clearable>
                  <el-option :value="form.valueTitle" :label="form.valueTitle" class="options">
                      <el-tree
                              id="tree-option"
                              ref="selectTree"
                              :accordion="form.accordion"
                              :data="form.options"
                              :props="form.props"
                              :node-key="form.props.value"
                              :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";
import { pvTree } from "@/api/AccountOperation";
export default {
  data() {
    return {
      vh: "",
      form: {
        value:'',
        props:'',
        valueTitle: '',
        accordion: false,
        defaultExpandedKey: [],
        //区域
        options:[],
        default: {
          value: 'id',
          children: 'children',
          label: 'name'
        }
      },
    };
  },
  created() {
    this.area();
  },
  mounted() {
  },
  computed: {
  },
  methods: {
      //区域
    area(){
        pvTree()
  .then((res)=>{
        // console.log(res);
        if(res.code=="A0000"){
          this.form.options=res.data
        }
      })
    },
    // 切换选项
    handleNodeClick(data) {
        // console.log(data);
      this.$refs.selectTree1.blur();
      this.form.valueTitle =data.name
      this.form.defaultExpandedKey = [];
      this.$emit("click", data);
    },
  },
};
</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>
