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

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

import { Button, Image, Tabs, TabPane } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import {
  type DrugItem,
  type ProductTypeOption,
  fetchProductTypeOptions,
  getDrugPriceGridOptions,
  handleBatchSave,
  handleSaveRow,
  TCM_PLACEHOLDER_IMAGE,
} from '../config/drug-price-table';
import { drugPriceFormOptions } from '../config/search';

const activeTab = ref<string>('');
const storeId = ref<number>(0);
const productTypeOptions = ref<ProductTypeOption[]>([]);

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  width: 1200,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    await handleBatchSave(drugGridApi, storeId.value);
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const data = modalApi.getData<{ store_id: number }>();
      if (data?.store_id) {
        storeId.value = data.store_id;
      }
      productTypeOptions.value = await fetchProductTypeOptions();
      activeTab.value = String(productTypeOptions.value[0]?.value ?? '1');
      await nextTick();
      drugGridApi?.reload?.();
    } else {
      activeTab.value = '';
      storeId.value = 0;
      productTypeOptions.value = [];
    }
  },
});

const handleSaveCurrentRow = async (row: DrugItem) => {
  await handleSaveRow(row, storeId.value, drugGridApi);
};

const activeProductType = computed(() => Number(activeTab.value) || 1);

const drugPriceGridOptions = computed(() =>
  getDrugPriceGridOptions(
    () => storeId.value,
    () => activeProductType.value,
    handleSaveCurrentRow,
  ),
);

const [DrugGrid, drugGridApi] = useVbenVxeGrid({
  formOptions: drugPriceFormOptions,
  gridOptions: drugPriceGridOptions,
});

watch(activeTab, async (tab, prev) => {
  if (!storeId.value || !tab || !prev) {
    return;
  }
  await nextTick();
  drugGridApi?.reload?.();
});

const handleBatchSaveCurrent = async () => {
  await handleBatchSave(drugGridApi, storeId.value);
};

const rowImageSrc = (row: DrugItem) => {
  return row.image || TCM_PLACEHOLDER_IMAGE;
};
</script>

<template>
  <Modal title="修改药品价格" class="w-[80%] md:w-[50%] lg:w-[30%] h-[60%]">
    <div>
      <Tabs v-model:activeKey="activeTab">
        <TabPane
          v-for="option in productTypeOptions"
          :key="String(option.value)"
          :tab="option.label"
        />
      </Tabs>
      <DrugGrid v-if="activeTab">
        <template #toolbar-actions>
          <Button type="primary" @click="handleBatchSaveCurrent">
            批量保存
          </Button>
        </template>
        <template #drug-image="{ row }">
          <div class="div" style="width: 120px; height: 120px; overflow: scroll">
            <Image :src="rowImageSrc(row)" height="30" width="30" />
          </div>
        </template>
        <template #row-action="{ row }">
          <Button type="link" size="small" @click="handleSaveCurrentRow(row)">
            保存
          </Button>
        </template>
      </DrugGrid>
    </div>
  </Modal>
</template>

<style scoped>
:deep(.ant-tabs-content-holder) {
  padding-top: 16px;
}
</style>
