<script setup lang="ts">
import { ref, unref, useTemplateRef } from 'vue';
import { fetchCancelCategoryProd, fetchGetCategoryProdList } from '@/service/api/goods/desk-category';
import { useModal } from '@/components/zt/Modal/hooks/useModal';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import RelatedGoodsModal from './related-goods-modal.vue';
const RelatedGoodsModalRef = useTemplateRef('GoodsModal');
const [register, { openModal }] = useModal({
  title: '已关联商品',
  isShowHeaderText: false,
  showFooter: false,
  width: 1000,
  height: 900
});
const searchForm = ref<Api.goods.ShopCategory>();
const [registerModalTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'code',
        label: '商品code',
        component: 'NInput',
        show: false
      },
      {
        field: 'prodName',
        label: '产品名称',
        component: 'NInput'
      }
    ],
    gridProps: {
      cols: '1'
    }
  },
  tableConfig: {
    keyField: 'id',
    title: '商品列表',
    showAddButton: false,
    minHeight: 500,
    scrollX: 800
  }
});
const emit = defineEmits<{ (e: 'refresh'): void }>();

const columns: NaiveUI.TableColumn<Api.goods.CategoryProd>[] = [
  {
    title: '产品名称',
    key: 'prodName',
    width: 500,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '上下架状态',
    key: 'status',
    render: row => {
      const statusText = ['下架', '上架', '违规下架', '平台审核'];
      return statusText[row.status] || '未知状态';
    }
  }
];
defineExpose({
  handleOpenModal
});
function handleOpenModal(row: Api.goods.ShopCategory) {
  searchForm.value = row;
  openModal();
}
function handleClick() {
  RelatedGoodsModalRef.value?.handleOpenModal(searchForm.value as Api.goods.ShopCategory);
}
async function handleCancle(row: Api.goods.CategoryProd) {
  await fetchCancelCategoryProd({
    parentCode: unref(searchForm)?.parentCode,
    code: row.code,
    shopId: row.shopId,
    categoryId: row.id,
    prodIdList: [row.prodId]
  });
  refresh();
  emit('refresh');
}
function handleRefsh() {
  refresh();
  emit('refresh');
}
</script>

<template>
  <BasicModal @register="register">
    <div class="flex items-center pl3">
      分类：
      <NBreadcrumb separator=">">
        <NBreadcrumbItem>{{ searchForm?.level1Name }}</NBreadcrumbItem>
        <NBreadcrumbItem>{{ searchForm?.level2Name }}</NBreadcrumbItem>
        <NBreadcrumbItem>{{ searchForm?.level3Name }}</NBreadcrumbItem>
      </NBreadcrumb>
    </div>
    <LayoutTable>
      <ZTable
        :columns="columns"
        show-table-action
        :api="fetchGetCategoryProdList"
        :default-params="{ code: searchForm?.code, shopId: searchForm?.shopId }"
        @register="registerModalTable"
      >
        <template #op="{ row }">
          <NPopconfirm @positive-click="handleCancle(row)">
            <template #trigger>
              <NButton type="primary" size="small" quaternary>取消关联</NButton>
            </template>
            确定取消关联此商品吗？
          </NPopconfirm>
        </template>
        <template #prefix>
          <NButton size="small" @click="handleClick">关联商品</NButton>
        </template>
      </ZTable>
    </LayoutTable>
    <RelatedGoodsModal ref="GoodsModal" @submit="handleRefsh"></RelatedGoodsModal>
  </BasicModal>
</template>

<style scoped></style>
