<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { onMounted, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { ElButton, ElTag, ElTree } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { cdcmDriverAPI } from '#/cdcm/api/api.js';
import req from '#/cdcm/api/req_code';

import Detail from './detail.vue';
import History from './history.vue';
import Write from './write.vue';

const driverData = ref([]);
const indexi = ref('');
const curDriver = ref({});
const deviceData = ref([]);
const defaultProps = ref({
  children: 'children',
  label: 'Name',
});

onMounted(() => {
  getDriverData();
});
const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 100 },
    { field: 'name', title: '名称', width: 300 },
    { field: 'description', title: '描述' },
    { field: 'type', title: '质量', width: 120 },
    { field: 'enabled', title: '点位值', width: 120 },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '管理',
      width: 240,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: () => {
        return {
          items: [
            {
              name: 'test',
            },
          ],
        };
      },
    },
  },
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    custom: false,
    export: false,
    // import: true,
    refresh: false,
    zoom: false,
  },
};
const [TemplateTable] = useVbenVxeGrid({
  gridOptions,
});

const [historyModal, historyApi] = useVbenDrawer({
  connectedComponent: History,
});

const [detailModal, detailApi] = useVbenDrawer({
  connectedComponent: Detail,
});

const [writeModal, writeApi] = useVbenDrawer({
  connectedComponent: Write,
});

const changeQd = (i: any, item: any) => {
  console.warn(i, item);
  indexi.value = i;
  curDriver.value = item;
  getDeviceData(item.ID);
};

function getDriverData() {
  driverData.value = [
    {
      ID: 2,
      Name: 'devicename',
    },
  ];
  console.warn(driverData.value);

  if (driverData.value) {
    changeQd(0, driverData.value[0]);
  }
}

async function getDeviceData(id: Number) {
  const res = await cdcmDriverAPI({ id }, req.DriverQuery);
  console.warn(1, res.data.data.Devices);
  deviceData.value = res.data.data.Devices;
}

console.warn(7777, deviceData);

const handleNodeClick = () => {};

const openHistory = (row: any) => {
  console.warn(row);
  historyApi.setData({ data: row }).open();
};

const openDetail = (row: any) => {
  console.warn(row);
  detailApi.setData({ data: row }).open();
};

const openWrite = (row: any) => {
  console.warn(row);

  writeApi.setData({ data: row }).open();
};
</script>
<template>
  <div class="vp-raw w-full" style="height: 800px">
    <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)"
        >
          {{ item.Name }}
        </div>
      </fieldset>
      <div class="right">
        <fieldset class="right-set box2">
          <legend class="box-ht">设备列表</legend>
          <ElTree
            :data="deviceData"
            :props="defaultProps"
            :highlight-current="true"
            accordion
            node-key="Name"
            :current-node-key="Name"
            @node-click="handleNodeClick"
          />
          <div>{{ deviceData }}</div>
        </fieldset>
        <div class="right-table">
          <div class="des1">
            <span class="box-title">设备信息</span>
            <div class="box-info1">
              <div>
                <ElTag size="medium" type="">设备名称:</ElTag>
                <ElTag size="medium" type="">设备描述: </ElTag>
              </div>
              <ElButton class="mr-2" type="success"> 启用 </ElButton>
            </div>
          </div>
          <TemplateTable>
            <template #action="{ row }">
              <ElButton
                size="small"
                type="primary"
                round
                @click="openHistory(row)"
              >
                历史
              </ElButton>
              <ElButton
                size="small"
                type="primary"
                round
                @click="openDetail(row)"
              >
                详情
              </ElButton>
              <ElButton size="small" type="info" round @click="openWrite(row)">
                写值
              </ElButton>
            </template>
          </TemplateTable>
        </div>
      </div>
    </div>
    <historyModal />
    <detailModal />
    <writeModal />
  </div>
</template>
<style lang="scss" scoped>
.all-content {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 20px;

  .left {
    width: 15%;
    height: 100%;
    border: 1px solid #666;

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

.right {
  display: flex;
  justify-content: space-between;
  width: 84%;
  padding: 15px;
  border: 1px solid #666;

  .box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    padding: 10px 5px;
    margin: 0 5px;
    color: #fff;
    background: #666;
  }

  .right-set {
    width: 20%;
    height: 100%;
    padding: 5px;
    border: 1px solid #666;
  }

  .right-table {
    width: 78%;
  }
}

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

.des1 {
  height: 50px;
}

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

.el-tag {
  justify-content: left;
  width: 200px;
  padding: 20px 10px;
  margin-right: 10px;
}

.active {
  color: #fff;
  background: #00aaa3;
}
</style>
