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

import { ref } from 'vue';

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

import { ElButton } from 'element-plus';

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

interface PointDataType {
  id: number;
  name: string;
  point_type: string;
  description: string;
  access: string;
  calculation: string;
  unit: string;
  protocol_config: string;
}

interface TemplateDateType {
  description: string;
  id: number;
  name: string;
  point_count: number;
  points: PointDataType[];
  type: string;
}

interface TemplateType {
  data: TemplateDateType;
}

const template_data = ref<TemplateDateType>();

const gridOptions: VxeGridProps<PointDataType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name', // 修改为实际的字段名，原代码中是 productName 可能不正确
  },
  columns: [
    { title: '序号', type: 'seq', width: 100 },
    { field: 'name', title: '点位名称' },
    { field: 'point_type', title: '点位类型' },
    { field: 'description', title: '点位描述' },
    { field: 'access', title: '读写权限' },
    { field: 'calculation', title: '计算公式' },
    { field: 'unit', title: '单位' },
    { field: 'protocol_config', title: '扩展配置' },
  ],
  exportConfig: {},
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    zoom: true,
  },
};

const [PointTable, tableApi] = useVbenVxeGrid({
  gridOptions,
});

const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = drawerApi.getData<TemplateType>();
      if (data) {
        template_data.value = data.data;
        tableApi.setGridOptions({
          data: template_data.value.points,
        });
      }
    }
  },
});

function btn_add() {
  // 这里添加新增点位的逻辑
  // console.log('新增点位');
}
</script>

<template>
  <Drawer title="模板点位管理" :footer="false" class="w-[1500px]">
    <div class="vp-raw w-full" style="height: 600px">
      <PointTable>
        <template #toolbar-tools>
          <ElButton class="mr-2" type="success" @click="btn_add">
            新增
          </ElButton>
        </template>
      </PointTable>
    </div>
  </Drawer>
</template>
