<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">
            <table>
              <tr>
                <td style="width:180px;border-bottom: 1px solid #006b3b;">
                  通讯状态: {{ txStatus[curDriver.driver_status] }}
                </td>

                <td style="width:180px;border-bottom: 1px solid #006b3b;">成功计数: {{ curDriver.health &&
                  curDriver.health.success_count }}</td>
                <td style="width:340px;border-bottom: 1px solid #006b3b;">
                  通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}
                </td>
              </tr>
              <tr>

                <td>
                  通讯计数: {{ curDriver.health && curDriver.health.total_count }}
                </td>
                <td>
                  失败计数: {{ curDriver.health && curDriver.health.failure_count }}
                </td>
                <td>
                  通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime || '-' }}
                </td>
                <!-- <td colspan="2">通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</td> -->
              </tr>
            </table>
          </span>
        </div>
        <div class="right-con">
          <div class="right-set">
            <fieldset class="height100 box2">
              <legend class="box-ht">设备列表</legend>
              <el-tree :data="deviceData" :props="defaultProps" :highlight-current="true" accordion node-key="device_name"
                ref="taskTree" :current-node-key="device_name" @node-click="handleNodeClick">
              </el-tree>
            </fieldset>
          </div>
          <div class="right-table">
            <div class="des1">
              <span class="box-title">设备信息</span>
              <div class="box-info1">
                <div>
                  <el-tag size="medium" type="">设备名称: {{ curDevice.device_name }}</el-tag>
                  <el-tag size="medium" type="">设备状态: {{ !curDevice.device_disable ? '启用' : '停用' }} </el-tag>
                  <el-tag size="medium" type="">设备描述: {{ curDevice.device_description }} </el-tag>
                </div>
                <el-button type="danger" @click="doDevice">{{ !curDevice.device_disable ? '停用' : '启用' }}</el-button>
              </div>
            </div>
            <el-table :data="tableData" height="600" border :header-cell-style="{ background: '#F6F7FC' }" size="large"
              :row-class-name="tableRowClassName">
              <el-table-column type="index" label="序号" width="80" align="center" />
              <el-table-column prop="point_name" label="名称" width="100" 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="80" align="center" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row.point_quality == 1 ? 'good' : 'bad' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="point_value" label="点位值" width="80" 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="80" align="center" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ pointTypeOptions[scope.row.point_type] }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
              <el-table-column label="操作" fixed="right" align="center" width="300" show-overflow-tooltip>
                <template #default="scope">
                  <el-button type="success" size="large" @click="openHis(scope.row)">
                    历史
                  </el-button>
                  <el-button type="warning" size="large" @click="openDe(scope.row)">
                    详情
                  </el-button>
                  <el-button type="primary" size="large" @click="openWrite(scope.row)">
                    写值
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>
        </div>
      </div>
    </div>
    <De :formData="formData" :dialogVisible="dialogVisible" v-if="dialogVisible" @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess">
    </De>
    <His :formData="formData" :dialogVisible="dialogVisible1" v-if="dialogVisible1" @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess">
    </His>
    <Write :formData="formData" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess">
    </Write>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick, onUnmounted } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import De from "@/components/De.vue";
import His from "@/components/His.vue";
import Write from "@/components/Write.vue";
export default {
  name: "data",
  components: {
    De,
    His,
    Write
  },
  setup() {

    const taskTree = ref(null);
    const state = reactive({
      indexi: 0,

      driverData: [],
      deviceData: [],
      currentNodekey: 11,
      tableData: [],
      defaultProps: {
        children: "children",
        label: "device_name"
      },
      curDriver: {},
      curDevice: {},
      start: 0, //启用设备  
      //
      formData: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      txStatus: [], //通讯状态
      pointTypeOptions: {},
      intervalId: null
    });

    onMounted(() => {
      getTxStatus();
      getPointType();
      getDriverData()
      // state.intervalId = setInterval(() =>
      //   getDriverData(), 1000);
    });

    onUnmounted(() => {
      clearInterval(state.intervalId);
    })

    const tableRowClassName = ({ row, rowIndex }) => {
      if (state.curDevice.device_disable) {
        return '#ccc'
      }

    }

    const getPointType = async () => {
      const parm = {};
      const res = await infoApi.getPointType(parm);

      if (res.code == 0) {
        state.pointTypeOptions = res.data;
      }
    }

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


    }
    // 获取通讯状态
    const getTxStatus = async () => {

      const res = await infoApi.getTxStatus();
      if (res.code == 0) {
        state.txStatus = res.data;
      }


    };
    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.deviceData = res.data || [];
        console.log(123, state.deviceData)
        if (state.deviceData.length > 0) {
          let node = state.curDevice || state.deviceData[0];
          handleNodeClick(node);
          nextTick(() => {
            console.log(123, state.deviceData[0].device_name)
            taskTree.value.setCurrentKey(state.deviceData[0].device_name);
          })
        }
      }

    }


    const handleNodeClick = (item) => {
      state.curDevice = 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;

      }
    }
    // 启用禁用设备
    const doDevice = async () => {
      const param = {
        driver_name: state.curDevice.driver_name,
        device_name: state.curDevice.device_name
      }
      const res = !state.curDevice.device_disable ? await infoApi.stopDevice(param) : await infoApi.startDevice(param);
      if (res.code == 0) {
        ElMessage.success(res.data || res.message || '请求成功');
        getDeviceData(state.curDriver.driver_name);
      }
    }
    const dialogClose = () => {
      state.dialogVisible = false;
      state.dialogVisible1 = false;
      state.dialogVisible2 = false;
      // 更新点位表
      getPointData(state.curDevice);
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      state.dialogVisible1 = false;
      state.dialogVisible2 = false;
    };
    const openDe = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible = true;

    }
    const openHis = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible1 = true;

    }
    const openWrite = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible2 = true;

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

  .left {
    width: 12%;
    border: 1px solid #006b3b;
    font-size: 16px;
    height: 100%;

    .qd-one {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 45px;

      img {
        width: 24px;
      }
    }
  }

  .right {
    width: 87%;
    border: 1px solid #006b3b;
    justify-content: space-around;

    .box-title {
      width: 80px;
      padding: 10px 5px;
      background: #00AAA3;
      color: #fff;
      margin: 0 5px;

      // border-right: 1px solid #006b3b;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .right-con {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .right-set {
      width: 15%;
      padding: 5px;
    }

    .right-table {
      width: 84%;
      //  .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%;
  display: inline-block;
  height: 100%;

  table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
  }

  td {
    padding: 10px 5px;
    border-right: 1px solid #006b3b;
    border-collapse: collapse;
    font-size: 16px;
  }
}

.des,
.des1 {
  border-bottom: 1px solid #006b3b;
  display: flex;
  align-items: center;
  width: 100%;
  // height: 80px;
}

.des1 {
  height: 50px;
}

.box-info1 {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}

.el-tag {
  margin-right: 10px;
  width: 200px;
  justify-content: left;
  padding: 20px 10px;
  // background:#00AAA3;
  // color: #fff;
}
</style>
