<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item label="区域:">
                        <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-item>
                            <Timeinterval></Timeinterval>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="ml10" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import { dictypeData } from "@/api/user";
import {deptTree} from "@/api/admin/dept";
import Timeinterval from "../../../../components/Timeinterval.vue";
export default {
    components: {Timeinterval},
    data(){
        return{
            form:{
                    time: "", //统计时间
                    value:'',
                    props:'',
                    // valueId: null,
                    valueTitle: '全国',
                    accordion: false,
                    defaultExpandedKey: [],
                    options:[],
                    default: {
                        value: 'id',
                        children: 'children',
                        label: 'name'
                    }
                },
            
        }
    },
    created() {
         this.dictionaries();
    },
    mounted() {
    },
    methods: {
        // 字典表
        // dictionaries() {
        //     dictypeData().then(res => {
        //         console.log("单位res:",res.data);
        //         res.data.forEach(item => {
        //             if (item.name == "全国") {
        //                 this.form.options = item.children;
        //             }
        //         });
        //     });
        // },
         
        dictionaries() {
            deptTree().then(res => {
                // console.log("单位res:",res.data);
                res.data.forEach(item => {
                    if (res.code == "A0000") {
                        this.form.options = res.data;
                    }
                });
            });
        },
        handleNodeClick(data, node, nodeData) {
            this.$refs.selectTree1.blur();
            this.form.valueTitle =data.name
            this.form.defaultExpandedKey = [];
        },
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 5px;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

.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>
