<template>
  <div class="container">
    <div class="container-left">
      <div class="title-label">组织列表</div>
      <div class="title-content">可以选择对应的组织下的成员信息</div>
      <div><el-input v-model="filterText" placeholder="请输入组织关键词搜索"  suffix-icon="el-icon-search" cleaable></el-input></div>
      <div>
        <el-tree
          class="filter-tree"
          :data="treeData"
          @node-click="handleNodeClick"
          :props="defaultProps"
          highlight-current
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree">
          <template v-slot="{node}">
            <span :title="node.label" class="node-label">{{node.label}}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="container-right">
      <div class="container-right-head">
        <el-radio-group v-model="queryForm.tabType">
          <el-radio-button  v-for="(item,index) in tabTypeList" :label="item.key" :key="item.key">{{item.title}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="container-right-main">
          <component v-for="(item,index) in infoComponentsList" :rowData="rowData" :form="queryForm" v-if="queryForm.tabType === item.key" v-show="queryForm.tabType === item.key" :key="item.key" :is='item.component' :ref='item.component'></component>
      </div>
    </div>
  </div>
</template>

<script>
import {getTreeNode,getTableData,deleteUser,resetPassword} from '@/api/userManage'
import carManage from "@/views/pages/regionalManage/components/carManage";
import checkManage from "@/views/pages/regionalManage/components/checkManage";
import personManage from "@/views/pages/regionalManage/components/personManage";
import otherManage from "@/views/pages/regionalManage/components/otherManage";
import regionManage from "@/views/pages/regionalManage/components/regionManage";
import videoManage from "@/views/pages/regionalManage/components/videoManage";
import paymentManage from "@/views/pages/regionalManage/components/paymentManage";
import locationManage from "@/views/pages/regionalManage/components/locationManage";
import sensorManage from "@/views/pages/regionalManage/components/sensorManage";
import alertorManage from "@/views/pages/regionalManage/components/alertorManage";
export default {
  name: "index",
  components: {alertorManage,sensorManage,carManage,checkManage,personManage,otherManage,regionManage,videoManage,paymentManage,locationManage},
  data(){
    return {
      filterText:'',
      showQrCodeVisible:false,
      showDialog:false,
      infoComponentsList:[
        {name: '人员', key:'person', component: 'personManage'},
        {name: '区域', key:'region', component: 'regionManage'},
        {name: '车辆', key:'car', component: 'carManage'},
        {name: '摄像', key:'video', component: 'videoManage'},
        {name: '安检项', key:'check', component: 'checkManage'},
        {name: '支付', key:'payment',component: 'paymentManage'},
        {name: '其他', key:'other',component: 'otherManage'},
        {name: '定位', key:'location',component: 'locationManage'},
        {name: '储气罐传感器', key:'sensor',component: 'sensorManage'},
        {name: '报警器', key:'alertor',component: 'alertorManage'},
      ],
      rowData:{
        fSsczid:'',
        orgId:'',
        czmc:'',
        qyID:'',
        qymc:''
      },
      tabTypeList:[{
        key:'person',
        title:'人员'
      },{
        key:'region',
        title:'区域'
      },{
        key:'car',
        title:'车辆'
      },{
        key:'video',
        title: '摄像'
      },{
        key:'location',
        title: '定位'
      },{
        key:'sensor',
        title: '储气罐传感器'
      },{
        key:'alertor',
        title: '报警器'
      },{
        key:'check',
        title: '安检项'
      },{
        key:'payment',
        title: '支付'
      },{
        key:'other',
        title: '其他'
      }],
      resetPswForm:{
        dialogVisible:false,
        password:'',
        fUserId:'',
        label:'请输入"张三-18000000081"的新密码'
      },
      resetPwdRules:{
        password: [
          { required: true, message: '请输入新的密码', trigger: 'change' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData:[],
      queryForm:{
        orgId:'',
        tabType:'car'
      },
      loading:false,
      dataList:[],
    }
  },
  mounted(){
    this.initData();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods:{
    initData(){
      this.getTreeNodeList();
    },
    async getTreeNodeList(){
      await getTreeNode().then((res)=>{
        console.log('打印res',res);
        this.treeData=[{
          ...res.value
        }];
        console.log('打印this.treeDAta',this.treeData);
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //el-tree节点的点击事件
    handleNodeClick(data,node){
      let parentData = node.parent.data;
      console.log('打印parentData',parentData);
      if(data.lx == '厂站'){
        this.rowData.fSsczid = data.id;
        this.rowData.czmc = data.name;
        this.rowData.qymc = parentData.name;
        this.rowData.qyID = parentData.id;
      }else{
        this.rowData.qymc = data.name;
        this.rowData.qyID = data.id;
        this.rowData.fSsczid = '';
        this.rowData.czmc = '';
      }
      this.queryForm.orgId = data.id;
      this.rowData.orgId = data.id;
      let refName = this.infoComponentsList.filter((item)=>item.key == this.queryForm.tabType)[0].component;
      this.$nextTick(()=>{
        console.log('打印this.$refs',this.$refs[refName][0]);
        this.$refs[refName][0].handleSearch();
      })
      console.log('打印data',data);
      console.log('打印node',node)
    },

  }
}
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  width: 100%;
  height: 100%;
  .container-left{
    height: 96%;
    overflow: auto;
    min-width: 220px;
    max-width: 220px;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 3px;
    .title-label{
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      text-align: left;
      margin-bottom: 5px;
    }
    .title-content{
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #999999;
      margin-bottom: 10px;
    }
    .filter-tree{
      ::v-deep.el-tree-node__expand-icon.expanded {
        /* 修改为你想要的图标 */
        color:#5875eb;
      }
      ::v-deep.el-tree-node__expand-icon.collapsed {
        /* 修改为你想要的图标 */
        color:blue;
      }
      .node-label{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .container-right{
    //flex: 1;
    height:96%;
    margin-left: 10px;
    //padding: 10px;
    border-radius: 3px;
    width: calc(100% - 235px);
    background-color: #ffffff;
    padding: 10px;
    .container-right-head{
      //padding: 10px;
    }
    .container-right-main{
      //overflow: auto;
      margin-top: 10px;
      height: calc(100% - 94px);
      width: 100%;
      //overflow: auto;
      //background-color: #FFFFFF;
    }
  }
}

</style>