<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 { cdcmDataAPI, cdcmDriverAPI } from '#/cdcm/api/api.js';
import req from '#/cdcm/api/req_code';

import Add from './add.vue';
import Device from './device.vue';
import Edit from './edit.vue';

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: 100 },
    { field: 'name', title: '驱动名称', width: 300 },
    { field: 'description', title: '模板描述' },
    { field: 'type', title: '驱动类型', width: 120 },
    { field: 'enabled', title: '驱动状态', width: 120 },
    {
      field: 'action1',
      slots: { default: 'action1' },
      title: '启停控制',
      width: 150,
    },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '管理',
      width: 240,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const ret = await cdcmDriverAPI(
          {
            page_num: page.currentPage,
            page_size: page.pageSize,
          },
          req.DriverQueryPage,
        );
        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 [addModal, addApi] = useVbenModal({
  connectedComponent: Add,
  onclose: () => {
    tableApi.reload();
  },
});
const [editModal, editApi] = useVbenModal({
  connectedComponent: Edit,
  onclose: () => {
    tableApi.reload();
  },
});

const [deviceModal, deviceApi] = useVbenDrawer({
  connectedComponent: Device,
});

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

const btn_edit = (row: any) => {
  editApi.setData({ data: row }).open();
};

// 删除
const btn_delete = (row: any) => {
  showConfirm(row.id);
};
function showConfirm(rowId: Number) {
  confirm('确认删除该驱动？')
    .then(async () => {
      const ret = await cdcmDriverAPI({ id: rowId }, req.DriverDelete);
      if (ret.data.code === 0) {
        ElMessage.success(ret.data.data);
        tableApi.reload();
      } else {
        ElMessage.error(ret.data.data || ret.data.msg);
      }
    })
    .catch(() => {});
}

const btn_device = (row: any) => {
  deviceApi.setData({ data: row }).open();
};

const start_device = async (row: any) => {
  const ret = await cdcmDataAPI({ id: row.id }, req.DriverStart);
  if (ret.data.code === 0) {
    ElMessage.success(ret.data.data);
    tableApi.reload();
  } else {
    ElMessage.error(ret.data.data || ret.data.msg);
  }
};

const stop_device = async (row: any) => {
  const ret = await cdcmDataAPI({ id: row.id }, req.DriverStop);
  if (ret.data.code === 0) {
    ElMessage.success(ret.data.data);
    tableApi.reload();
  } else {
    ElMessage.error(ret.data.data || ret.data.msg);
  }
};
</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 #action1="{ row }">
        <ElButton
          size="small"
          type="primary"
          round
          v-if="!row.enabled"
          @click="start_device(row)"
        >
          启用
        </ElButton>
        <ElButton
          size="small"
          type="primary"
          round
          v-else
          @click="stop_device(row)"
        >
          停用
        </ElButton>
      </template>
      <template #action="{ row }">
        <ElButton size="small" type="primary" round @click="btn_device(row)">
          设备
        </ElButton>
        <ElButton size="small" type="primary" round @click="btn_edit(row)">
          编辑
        </ElButton>
        <ElButton size="small" type="danger" round @click="btn_delete(row)">
          删除
        </ElButton>
      </template>
    </TemplateTable>
    <addModal @submit="() => tableApi.reload()" />
    <editModal @submit="() => tableApi.reload()" />
    <deviceModal @close="() => tableApi.reload()" />
  </div>
</template>
