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

import { computed, h, nextTick, ref, watch } from 'vue';

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

import { message as Message, Tag, Modal } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  postThingModelInfoPageAsync,
  postThingModelInfoDeleteAsync,
  postThingModelInfoCreateAsync,
  postThingModelInfoUpdateAsync,
  postThingModelInfoCopyStandardThingModel,
} from '#/api-client';
import { TableAction } from '#/components/table-action';
import { $t } from '#/locales';

import {
  addThingModelFormSchema,
  editThingModelFormSchema,
  querySchema,
  tableSchema,
} from './schema';

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

// 定义props
interface Props {
  visible?: boolean;
  productId?: string;
  productName?: string;
  ioTPlatform?: string;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  productId: '',
  productName: '',
  ioTPlatform: '2',
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
  'close': [];
}>();

const formOptions: VbenFormProps = {
  schema: querySchema.value,
};

const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'thingModelName',
  },
  columns: tableSchema.value,
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  toolbarConfig: {
    custom: true,
  },
  customConfig: {
    storage: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { data } = await postThingModelInfoPageAsync({
          body: {
            pageIndex: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          },
        });
        return data;
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

const editRow: Record<string, any> = ref({});

const [ThingModelModal, thingModelModalApi] = useVbenModal({
  draggable: true,
  footer: true,
  showCancelButton: true,
  showConfirmButton: true,
  onConfirm: submit,
  onBeforeClose: () => {
    return true;
  },
  onOpenChange: (isOpen: boolean) => {
    if (isOpen && editRow.value.id) {
      // 编辑模式下，模态框打开后设置表单值
      nextTick(() => {
        editFormApi.setValues({ ...editRow.value });
      });
    }
  },
  onCancel: () => {
    thingModelModalApi.close();
  },
});

const [AddForm, addFormApi] = useVbenForm({
  collapsed: false,
  commonConfig: {
    labelWidth: 110,
    componentProps: {
      class: 'w-4/5',
    },
  },
  layout: 'horizontal',
  schema: addThingModelFormSchema.value,
  showCollapseButton: false,
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});

const [EditForm, editFormApi] = useVbenForm({
  collapsed: false,
  commonConfig: {
    labelWidth: 110,
    componentProps: {
      class: 'w-4/5',
    },
  },
  layout: 'horizontal',
  schema: editThingModelFormSchema.value,
  showCollapseButton: false,
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});

// 监听props变化，自动设置筛选条件
watch(
  () => [props.visible, props.productId, props.ioTPlatform],
  async ([visible, productId, ioTPlatform]) => {
    console.log('物模型模态框props变化:', { visible, productId, ioTPlatform });
    if (visible && productId) {
      // 延迟执行，确保组件完全初始化
      setTimeout(async () => {
        try {
          // 设置表单筛选条件
          const filterValues: any = {};
          
          if (ioTPlatform) {
            filterValues.ioTPlatform = ioTPlatform;
          }
          
          if (productId) {
            filterValues.oneNETProductId = productId;
          }

          console.log('设置筛选条件:', filterValues);

          // 设置筛选表单的值
          if (Object.keys(filterValues).length > 0) {
            await gridApi.formApi.setValues(filterValues);
            // 重新加载数据
            await gridApi.reload();
          }
        } catch (error) {
          console.error('设置筛选条件时出错:', error);
        }
      }, 100);
    }
  },
  { immediate: true }
);

// 新增和编辑提交的逻辑
async function submit() {
  const isEdit = !!editRow.value.id;
  const formApi = isEdit ? editFormApi : addFormApi;
  const api = isEdit
    ? postThingModelInfoUpdateAsync
    : postThingModelInfoCreateAsync;
  const { valid } = await formApi.validate();
  if (!valid) return;

  const formValues = await formApi.getValues();

  const fetchParams: any = {
    query: {
      input: {
        ...formValues,
        // 自动添加平台和产品信息
        ioTPlatform: parseInt(props.ioTPlatform) as 1 | 2,
        ioTPlatformProductId: props.productId,
        // 编辑时需要添加ID
        ...(isEdit && { id: editRow.value.id }),
      },
    },
  };

  try {
    const resp = await api({ body: fetchParams });
    if (resp.data) {
      Message.success(
        editRow.value.id ? $t('common.editSuccess') : $t('common.addSuccess'),
      );
      thingModelModalApi.close();
      editRow.value = {};
      gridApi.reload();
    } else {
      Message.error(
        editRow.value.id ? $t('common.editFail') : $t('common.addFail'),
      );
    }
  } catch (error) {
    console.error('提交失败:', error);
    Message.error(
      editRow.value.id ? $t('common.editFail') : $t('common.addFail'),
    );
  }
}

async function onEdit(record: any) {
  editRow.value = record;
  thingModelModalApi.open();
}

const openAddModal = async () => {
  editRow.value = {};
  thingModelModalApi.open();
};

// 删除函数
async function onDel(record: any) {
  try {
    const resp = await postThingModelInfoDeleteAsync({
      body: { id: record.id },
    });
    if (resp.data) {
      Message.success($t('common.deleteSuccess'));
      gridApi.reload();
    } else {
      Message.error($t('common.deleteFail'));
    }
  } catch (error) {
    console.error('删除失败:', error);
    Message.error($t('common.deleteFail'));
  }
}

// 复制标准模型函数
async function copyStandardThingModel() {
  try {
    const resp = await postThingModelInfoCopyStandardThingModel({
      body: {
        ioTPlatform: props.ioTPlatform,
        ioTPlatformProductId: props.productId,
      },
    });
    if (resp.data) {
      Message.success('复制标准模型成功');
      gridApi.reload();
    } else {
      Message.error('复制标准模型失败');
    }
  } catch (error) {
    console.error('复制标准模型失败:', error);
    Message.error('复制标准模型失败');
  }
}

// 关闭模态框
function closeModal() {
  emit('update:visible', false);
  emit('close');
}
</script>

<template>
  <Modal
    :open="visible"
    :title="`物模型管理 - ${productName || '产品'}`"
    width="90%"
    :footer="null"
    @cancel="closeModal"
    @ok="closeModal"
    :body-style="{ height: '70vh', overflow: 'hidden' }"
  >
    <div style="height: 100%; display: flex; flex-direction: column;">
      <Grid style="flex: 1; overflow: hidden;">
        <template #toolbar-actions>
          <TableAction :actions="[
            {
              label: $t('common.add'),
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: openAddModal.bind(null),
              auth: ['AbpIdentity.Users.Create'],
            },
            {
              label: '复制标准模型',
              type: 'default',
              icon: 'ant-design:copy-outlined',
              onClick: copyStandardThingModel,
              auth: ['AbpIdentity.Users.Create'],
            },
          ]" />
        </template>

        <template #isValueNeedConvert="{ row }">
          <component :is="h(Tag, { color: row.isValueNeedConvert ? 'blue' : 'default' }, () =>
            row.isValueNeedConvert ? '是' : '否',
          )
            " />
        </template>

        <template #action="{ row }">
          <TableAction :actions="[
            {
              label: $t('common.edit'),
              type: 'link',
              size: 'small',
              auth: ['AbpIdentity.Users.Update'],
              onClick: onEdit.bind(null, row),
            },
          ]" :drop-down-actions="[
            {
              label: $t('common.delete'),
              icon: 'ant-design:delete-outlined',
              type: 'primary',
              popConfirm: {
                title: $t('common.askConfirmDelete'),
                confirm: onDel.bind(null, row),
              },
            },
          ]" />
        </template>
      </Grid>
    </div>
    <ThingModelModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
      <component :is="editRow.id ? EditForm : AddForm" />
    </ThingModelModal>
  </Modal>
</template>
