<script setup lang="ts">
import { ref } from 'vue';

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postDeviceThingModelManagementCommandPageAsync } from '#/api-client';
import { $t } from '#/locales';

defineOptions({
  name: 'DeviceThingModelCommandModal',
});

const deviceThingModelId = ref<string>('');
const deviceModelName = ref<string>('');

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: [],
    showDefaultActions: false,
  },
  gridOptions: {
    columns: [
      {
        field: 'commandName',
        title: '指令名称',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
       {
        field: 'issueCommand',
        title: '下发指令',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'propertyArray',
        title: '属性标识符集合',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'action',
        title: $t('common.action'),
        width: 200,
        fixed: 'right',
        slots: { default: 'action' },
      },
    ],
    height: 400,
    pagerConfig: {},
    proxyConfig: {
      ajax: {
        query: async ({ page }) => {
          if (!deviceThingModelId.value) {
            return { items: [], totalCount: 0 };
          }
          const { data } = await postDeviceThingModelManagementCommandPageAsync({
            body: {
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              deviceThingModelId: deviceThingModelId.value,
            },
          });
          return data || { items: [], totalCount: 0 };
        },
      },
    },
  },
});

const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<Record<string, any>>();
      deviceThingModelId.value = data?.deviceThingModelId || '';
      deviceModelName.value = data?.deviceModelName || '';
      if (gridApi && gridApi.reload) {
        gridApi.reload();
      }
    }
  },
});
</script>

<template>
  <Modal :title="`指令管理 - ${deviceModelName || ''}`" class="w-[900px]">
    <Grid>
      <!-- 这里后续可以加 toolbar-actions：新增指令、编辑、删除等 -->
    </Grid>
  </Modal>
</template>


