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

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

import { ElButton, ElMessage } from 'element-plus';

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

import Add from './add.vue';
import Edit from './edit.vue';
import Point from './point.vue';

const [addModal, addApi] = useVbenModal({
  connectedComponent: Add,
});

const [editModal, editApi] = useVbenModal({
  connectedComponent: Edit,
  onclose: () => {
    tableApi.reload();
  },
});

const [pointModal, pointApi] = useVbenDrawer({
  connectedComponent: Point,
  onclose: () => {
    tableApi.reload();
  },
});

interface TemplateType {
  id: number;
  name: string;
  type: string;
  description: string;
  point_count: number;
  points: any[];
}

const gridOptions: VxeGridProps<TemplateType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { field: 'name', title: '模板名称', width: 300 },
    { field: 'type', title: '模板类型', width: 200 },
    { field: 'description', title: '模板描述' },
    { field: 'point_count', title: '点位数量', width: 150 },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '管理',
      width: 240,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const ret = await cdcmTemplateAPI(
          {
            page_num: page.currentPage,
            page_size: page.pageSize,
          },
          req.TemplateQueryPage,
        );
        return {
          total: ret.data.data.total,
          items: ret.data.data.list,
        };
      },
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

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

// 新增
const btn_add = () => {
  addApi.open();
};

// 编辑
const btn_edit = (row: TemplateType) => {
  editApi.setData({ data: row }).open();
};

// 删除
const btn_delete = (row: TemplateType) => {
  showConfirm(row.id);
};
function showConfirm(rowId: Number) {
  confirm('确认删除该模板？')
    .then(async () => {
      const ret = await cdcmTemplateAPI({ id: rowId }, req.TemplateDelete);
      if (ret.data.code === 0) {
        ElMessage.success(ret.data.data);
        tableApi.reload();
      } else {
        ElMessage.error(ret.data.data || ret.data.msg);
      }
    })
    .catch(() => {});
}
// 点位
const btn_point = (row: TemplateType) => {
  pointApi.setData({ data: row }).open();
};
</script>

<template>
  <div class="vp-raw w-full" style="height: 600px">
    <TemplateTable>
      <template #toolbar-tools>
        <ElButton class="mr-2" type="success" @click="btn_add"> 新增 </ElButton>
        <ElButton class="mr-2" type="primary" @click="() => tableApi.query()">
          刷新当前页面
        </ElButton>
        <ElButton type="primary" @click="() => tableApi.reload()">
          刷新并返回第一页
        </ElButton>
      </template>
      <template #action="{ row }">
        <ElButton size="small" type="primary" round @click="btn_edit(row)">
          编辑
        </ElButton>
        <ElButton size="small" type="success" round @click="btn_point(row)">
          点位
        </ElButton>
        <ElButton size="small" type="danger" round @click="btn_delete(row)">
          删除
        </ElButton>
      </template>
    </TemplateTable>

    <addModal />
    <editModal />
    <pointModal />
  </div>
</template>
