import { unref, watch } from 'vue'
import type { MaybeRef, Ref } from 'vue'
import { useTable } from '@/components/Table'
import { deleteModelAttribute, getModelAttributeList } from '@/api/product/model'
import { useModal } from '@/components/Modal'
import type { ModelAttribute } from '@/api/product/types'
import { useMessage } from '@/hooks/web/useMessage'

export function useModelAttribute(productId: MaybeRef<string>, modelId: Ref<string | undefined>) {
  const [registerModelAttributeTable, { reload, setPagination }] = useTable({
    async api(params) {
      if (!unref(modelId))
        return []

      return getModelAttributeList({
        ...params,
        productId: unref(productId),
        modelId: unref(modelId),
      })
    },
    columns: [
      {
        title: '功能类型',
        dataIndex: 'itemType',
        customRender: ({ value }) => ({ 1: '属性', 2: '命令' }[value]),
      },
      {
        title: '功能名称',
        dataIndex: 'name',
      },
      {
        title: '标识符',
        dataIndex: 'identifier',
      },
      {
        title: '数据类型',
        dataIndex: 'dataType',
      },
    ],
    bordered: true,
    inset: true,
    canResize: false,
    actionColumn: {
      width: 150,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  })
  watch(modelId, () => {
    setPagination({ current: 1 })
    reload()
  })

  const [registerModelAttributeModal, { openModal: openModelAttributeModal }] = useModal<ModelAttribute>()

  async function handleDeleteModelAttribute(id: string) {
    try {
      await deleteModelAttribute(id)
      useMessage().createMessage.success('删除成功')
      reload()
    }
    catch {}
  }

  return {
    registerModelAttributeTable,
    registerModelAttributeModal,
    openModelAttributeModal,
    reloadModalAttribute: reload,
    handleDeleteModelAttribute,
  }
}