<template>
  <el-card class="content-div">
    <div class="all-content">
      <fieldset class="left  box2">
        <legend class="box-ht">通讯列表</legend>
        <div v-for="(item, i) in driverData" :class="i === indexi ? 'active' : ''"  class="qd-one" :key="i" @click="changeQd(i, item)">
          <img src="../assets/qd.png" alt="">
          {{ item.driver_name }}
        </div>
      </fieldset>
      <div class="right">
        <div class="des">
          <span class="box-title">通讯信息</span>
          <span class="box-info"> 
            <el-tag>通讯名称:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯总计数:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯描述:{{ curDriver.driver_description }}</el-tag>
            <el-tag>通讯状态:{{ curDriver.driver_status }}</el-tag>
            <el-tag>通讯成功计数:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯失败计数:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯最后一次成功时间:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯最后一次失败时间:{{ curDriver.driver_name }}</el-tag>
            <el-tag>通讯最后一次失败原因:{{ curDriver.driver_name }}</el-tag>
          </span>
        </div>
        <div class="right-con">
          <div class="right-set">
            <div>设备列表</div>
            <el-tree
            :data="driceData"
            :props="defaultProps"
            :highlight-current="true"
            accordion 
            node-key="device_name"
            ref="taskTree"
            :current-node-key="device_name" 
            @node-click="handleNodeClick">
          </el-tree>
          </div>
          <div class="right-table">
            <div class="des">
              <span class="box-title">设备信息</span>
              <div class="box-info"> 
                <el-tag>设备名称: </el-tag>
                <el-tag>设备描述: </el-tag>
                <el-button type="danger">禁用</el-button>
              </div>
            </div>
            <el-table :data="tableData"  height="400" border :row-class-name="tableRowClassName"
              :header-cell-style="{ background: '#F6F7FC' }" size="large">
              <el-table-column type="index" label="序号" width="80" align="center" />
              <el-table-column prop="point_name" label="名称" width="150" align="center" show-overflow-tooltip />
              <el-table-column prop="point_description" label="描述" align="center" show-overflow-tooltip />
              <el-table-column prop="point_quality" label="质量" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="point_value" label="值" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="point_unit" label="单位" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="point_type" label="类型" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
              <el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
                <template #default="scope">
                  <el-button type="success" size="large">
                    历史
                  </el-button>
                  <el-button type="warning" size="large" v-if="scope.row.point_permissions ==2">
                    详情
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage } from "element-plus";
export default {
  name: "data",
  setup() {
    const taskTree = ref(null);
    const state = reactive({
      indexi: 0,
      
      driverData: [],
      driceData: [ ],
      currentNodekey: 11,
      tableData: [],
      defaultProps: {
        children: "children",
        label: "device_name"
      },
      curDriver: {}
    });

    onMounted(() => {
      getDriverData();
    });

    const getDriverData = async () => {
      const res = await infoApi.getDriverData();
      if (res.code == 0) {
        state.driverData = res.data || [];
        if (state.driverData.length > 0) {
          changeQd(0, state.driverData[0]);
          state.curDriver = state.driverData[0];
        }
      }


    }
    const changeQd = (i, item) => {
      state.indexi = i;
      state.curDriver = item;
      getDeviceData(item.driver_name);
    }

    const getDeviceData = async (driver_name) => {
      const param = {
        driver_name: driver_name
      }
      const res = await infoApi.getDeviceData(param);
      if (res.code == 0) {
        state.driceData = res.data || [];
        console.log(123, state.driceData)
        if (state.driceData.length > 0) {
          handleNodeClick(state.driceData[0]);
          nextTick(() => {
            console.log(123 , state.driceData[0].device_name)
            taskTree.value.setCurrentKey(state.driceData[0].device_name);
          })
        }
      }

    }

    const handleNodeClick = (item) => {
      getPointData(item);
    }

    const getPointData = async (item) => {
      const param = {
        driver_name: item.driver_name,
        device_name: item.device_name
      }

      const res = await infoApi.getPointData(param);
      if(res.code == 0) {
        state.tableData = res.data;

      }
    }



    return {
      ...toRefs(state),
      taskTree,
      changeQd,
      handleNodeClick
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  justify-content: space-between;
  font-size: 14px;

  .left {
    width: 15%;
    border: 1px solid #006b3b;
    font-size: 16px; 
    .qd-one {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 45px;
      img {
        width: 24px;
      }
    }
  }

  .right {
    width: 84%;
    border: 1px solid #006b3b;
    justify-content: space-around;
.box-title {
  height:100% !important;
  width: 30px;
  background: #00AAA3;
  color:#fff;
  // border-right: 1px solid #006b3b;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .right-con {
      display: flex;
      justify-content: space-between;
    }
    .right-set {
      width: 12%;
      padding: 5px;
    }

    .right-table {
      width: 88%;
      //  .el-tree-node {
      //     border: 1px solid #ddd !important;
      //     margin-top: 10px !important;
      // }
    }
  }
  .active {
    background: #00AAA3;
    color: #fff;
  }
}

.right {
  width: 84%;
  border: 1px solid #006b3b; 
  
  
  .right-set {
    width: 10%;
    padding: 20px;
    overflow: auto;
  }
  .right-table {
    width: 88%;
    //  .el-tree-node {
    //     border: 1px solid #ddd !important;
    //     margin-top: 10px !important;
    // }
  }
}
.box-info {
      width:100%; 
      // border: 1px solid red;
      display: flex;
      flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       ::v-deep .el-tag {
        margin: 10px;
       }
    }
  .des { 
    border-bottom: 1px solid #006b3b;
    display: flex;
    align-items: center; 
    width:100%; 
    
  }
</style>
