<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" @click='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 "./Timeinter.vue";
export default {
    components: {Timeinterval},
    data(){
        return{
        
            a:0,
            form:{
                sisi:'',
                    time: "", //统计时间
                    value:'',
                    props:'',
                    // valueId: null,
                    valueTitle: JSON.parse(sessionStorage.getItem('Info')) .deptName=='中国' ? '全国' :JSON.parse(sessionStorage.getItem('Info')) .deptName,
                    accordion: false,
                    defaultExpandedKey: [],
                    options:[],
                    default: {
                        value: 'id',
                        children: 'children',
                        label: 'name',
                    },
                    radio:"在线",
                    inquiry:"",
                },
            
        }
    },
    created() {
         this.dictionaries();
    },
    mounted() {
      
        

        this.$store.commit("sagServerity/SET_PROJECTUNIT", {id:JSON.parse(sessionStorage.getItem('Info')).deptId,name:JSON.parse(sessionStorage.getItem('Info')).deptName})
    },
    methods: {
        search(){
            this.$store.commit("sagServerity/SET_PROJECTUNIT", this.sisi)
           this.a=this.a+1
            // console.log(this.a,'a++')
            this.$store.commit("sagServerity/SET_SEARCH",this.a )
            
        },
        // 字典表
        // dictionaries() {
        //     dictypeData().then(res => {
        //         res.data.forEach(item => {
        //             if (item.name == "单位树") {
        //                 this.form.options = item.children;
        //             }
        //         });
        //     });
        // },
        dictionaries() {
            deptTree().then(res => {
                // console.log("单位res:",res.data);
                this.$store.commit("sagServerity/SET_DEPTREE",res )
                res.data.forEach(item => {
                    if (res.code == "A0000") {
                        this.form.options = res.data;
                    }
                });
            });
        },
        handleNodeClick(data, node, nodeData) {
       this.sisi=data
            this.$store.commit("sagServerity/SET_PROJECTUNIT", data)
            // console.log(this.$store.getters.projectUnit,'vuex1111')
            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;
}

::v-deep .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    display: flex;
    width: 48%;
    .el-form-item__content {
      flex: 1 !important;
      .el-select {
        width: 100%;
      }
      .el-input__inner {
        width: 100% !important;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
.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>
