<script setup lang="tsx">
import { ref, unref } from 'vue';
import { fetchEditCategoryProd, fetchGetCategoryProdHb } from '@/service/api/goods/desk-category';
import { useModal } from '@/components/zt/Modal/hooks/useModal';
const options = ref();
const value = ref([]);
const rowData = ref<Api.goods.ShopCategory>();
const [registerModal, { openModal, setModalLoading, setSubLoading, closeModal }] = useModal({
  title: '关联商品',
  width: 1000,
  isShowHeaderText: false,
  height: 800
});
const emit = defineEmits<{ (e: 'submit'): void }>();
defineExpose({
  handleOpenModal
});
async function handleOpenModal(row: Api.goods.ShopCategory) {
  rowData.value = row;
  openModal();
  setModalLoading(true);
  const { data } = await fetchGetCategoryProdHb({ code: row.parentCode });
  if (data) {
    options.value = data.map(it => {
      return {
        ...it,
        label: it.prodName,
        value: it.prodId
      };
    });
  }
  setModalLoading(false);
}
async function handleSave() {
  if (!value.value.length) {
    window.$message?.error('请选择需要关联的商品');
    return;
  }
  setSubLoading(true);
  await fetchEditCategoryProd({
    parentCode: unref(rowData)?.parentCode,
    code: unref(rowData)?.code,
    shopId: unref(rowData)?.shopId,
    categoryId: unref(rowData)?.id,
    prodIdList: unref(value)
  });
  emit('submit');
  closeModal();
  value.value = [];
}
</script>

<template>
  <BasicModal @register="registerModal" @ok="handleSave">
    <NTransfer
      v-model:value="value"
      :options="options"
      :show-selected="false"
      source-filterable
      target-filterable
      class="h-750px"
    />
  </BasicModal>
</template>

<style scoped></style>
