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

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

import { ElButton } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import SetHistory from './setHistory.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = drawerApi.getData<any>();
      if (data) {
        console.warn(data);
      }
    }
  },
});

const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name', // 修改为实际的字段名，原代码中是 productName 可能不正确
  },
  columns: [
    { title: '序号', type: 'seq', width: 100 },
    { field: 'Name', title: '时间戳' },
    { field: 'ProtocolExt.salve_id', title: '点位值' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '管理',
      width: 240,
    },
  ],
  proxyConfig: {
    ajax: {
      query: () => {
        return {
          items: [
            {
              Name: '123',
            },
          ],
        };
      },
    },
  },
  exportConfig: {},
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    zoom: true,
  },
  pagerConfig: {
    enabled: false,
  },
  round: true,
  showOverflow: true,
};
const [PointTable, tableApi] = useVbenVxeGrid({
  gridOptions,
});

const [setModal, setApi] = useVbenModal({
  connectedComponent: SetHistory,
  onclose: () => {
    tableApi.reload();
  },
});

const btn_set = (row: any) => {
  console.warn(row);
  setApi.setData({ data: drawerApi.getData<any>() }).open();
};

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

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

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

const btn_clean = (row: any) => {
  console.warn(row);
};
</script>
<template>
  <Drawer title="历史记录" :footer="false" class="w-[1500px]">
    <div class="vp-raw w-full" style="height: 600px">
      <PointTable>
        <template #action="{ row }">
          <ElButton size="small" type="warning" round @click="btn_set(row)">
            设定
          </ElButton>
          <ElButton
            size="small"
            type="warning"
            round
            @click="btn_start(row)"
            v-if="true"
          >
            启用
          </ElButton>
          <ElButton
            size="small"
            type="warning"
            round
            @click="btn_stop(row)"
            v-else
          >
            停用
          </ElButton>
          <ElButton size="small" type="error" round @click="btn_export(row)">
            导出
          </ElButton>
          <ElButton size="small" type="error" round @click="btn_clean(row)">
            清空
          </ElButton>
        </template>
      </PointTable>
    </div>
    <setModal />
  </Drawer>
</template>
