<script lang="ts" setup>
import type { CustomerEntity } from '@vben/types';

import { computed, ref } from 'vue';

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

import { getProductDetailApi } from '#/api/product';
import { getScqyDetailApi } from '#/api/scqy';
import { getCustomerListApi } from '#/api/user';

const data = ref<any>(null);
const loading = ref(false);
const scqyName = ref('');
const merchantNames = ref<string[]>([]);

// 产品基本信息
const productInfo = computed(() => {
  if (!data.value) return [];
  return [
    { label: '产品名称', value: data.value.productsname },
    { label: '产品型号', value: data.value.productsmodel },
    { label: '产品类别', value: data.value.productscategory },
    { label: '机具类型', value: data.value.productsjjlx },
    // { label: '品目', value: data.value.productspm },
    {
      label: '产品价格',
      value: data.value.productsprice ? `¥${data.value.productsprice}` : '-',
    },
    // { label: '一级分类', value: data.value.productsfl1 },
    // { label: '二级分类', value: data.value.productsfl2 },
    { label: '创建时间', value: data.value.productsdate },
  ];
});

// 补贴信息
const subsidyInfo = computed(() => {
  if (!data.value) return [];
  return [
    // { label: '分档名称', value: data.value.productsfdmc },
    // { label: '分档编号', value: data.value.productsfdbh },
    {
      label: '中央补贴',
      value: data.value.productszybt ? `¥${data.value.productszybt}` : '-',
    },
    {
      label: '特殊县中央补贴',
      value: data.value.productstsxzybt
        ? `¥${data.value.productstsxzybt}`
        : '-',
    },
  ];
});

// 生产企业信息
const scqyInfo = computed(() => {
  if (!data.value) return [];
  return [{ label: '生产企业名称', value: scqyName.value || '未关联' }];
});

// 经销商信息
const merchantsInfo = computed(() => {
  if (merchantNames.value.length === 0) {
    return [{ label: '关联经销商', value: '暂未关联任何经销商' }];
  }
  return merchantNames.value.map((name, index) => ({
    label: `经销商 ${index + 1}`,
    value: name,
  }));
});

// 获取生产企业名称
const fetchScqyName = async (scqyId: string) => {
  if (!scqyId) {
    scqyName.value = '未提供ID';
    return;
  }
  try {
    const res = await getScqyDetailApi({ scqyinfoid: scqyId });
    scqyName.value = res.scqyinfomc || '未知企业';
  } catch (error) {
    console.error('获取生产企业名称失败:', error);
    scqyName.value = '获取失败';
  }
};

// 获取经销商名称
const fetchMerchantNames = async (merchantIds: string) => {
  if (!merchantIds) {
    merchantNames.value = [];
    return;
  }
  try {
    const ids = merchantIds.split(',');
    // 使用 getCustomerListApi 获取所有经销商数据
    const res = await getCustomerListApi({
      pageindex: 1,
      rows: 999,
      'usersnature.value': '经销商',
    });
    if (res.Data) {
      // 从返回的列表中筛选出ID匹配的经销商
      const matchedMerchants = res.Data.filter((merchant: CustomerEntity) =>
        ids.includes(merchant.usersid),
      );
      merchantNames.value = matchedMerchants.map(
        (m: CustomerEntity) => m.usersname || '未知经销商',
      );
    } else {
      merchantNames.value = ['未能获取到经销商列表'];
    }
  } catch (error) {
    console.error('获取经销商名称失败:', error);
    merchantNames.value = ['获取经销商列表时出错'];
  }
};

const [Modal, modalApi] = useVbenModal({
  title: '产品详情',
  class: 'w-10/12 max-w-6xl',
  showCancelButton: false,
  confirmText: '关闭',
  onConfirm() {
    modalApi.close();
  },
  async onOpenChange(isOpen) {
    if (isOpen) {
      const modalData = modalApi.getData();
      if (modalData?.row?.productsid) {
        try {
          loading.value = true;
          const detailData = await getProductDetailApi({
            productsid: modalData.row.productsid,
          });
          data.value = detailData;

          // 并行获取关联数据
          await Promise.all([
            fetchScqyName(detailData.productsscqyid),
            fetchMerchantNames(detailData.productsmerchantid),
          ]);
        } catch (error) {
          console.error('获取产品详情失败:', error);
        } finally {
          loading.value = false;
        }
      }
    } else {
      data.value = null;
      scqyName.value = '';
      merchantNames.value = [];
      loading.value = false;
    }
  },
});

function openDetailModal(rowData: any) {
  modalApi.setData({ row: rowData });
  modalApi.open();
}

defineExpose({
  openDetailModal,
});
</script>

<template>
  <Modal>
    <div v-loading="loading" class="space-y-5 p-4">
      <!-- 产品基本信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">产品基本信息</span>
        </el-divider>
        <el-descriptions :column="3" border class="mb-4" label-width="140px">
          <el-descriptions-item
            v-for="item in productInfo"
            :key="item.label"
            :label="item.label"
          >
            <span>{{ item.value || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 补贴信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">补贴信息</span>
        </el-divider>
        <el-descriptions :column="2" border class="mb-4" label-width="140px">
          <el-descriptions-item
            v-for="item in subsidyInfo"
            :key="item.label"
            :label="item.label"
          >
            <span>{{ item.value || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 生产企业信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">
            生产企业信息
          </span>
        </el-divider>
        <el-descriptions :column="1" border class="mb-4" label-width="140px">
          <el-descriptions-item
            v-for="item in scqyInfo"
            :key="item.label"
            :label="item.label"
          >
            <span>{{ item.value || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 关联经销商信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">
            关联经销商信息
          </span>
        </el-divider>
        <el-descriptions
          :column="2"
          border
          class="mb-4"
          label-width="140px"
          v-if="merchantsInfo.length > 0"
        >
          <el-descriptions-item
            v-for="item in merchantsInfo"
            :key="item.label"
            :label="item.label"
          >
            <span>{{ item.value || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <div v-else class="text-gray-500">暂未关联任何经销商</div>
      </div>
    </div>
  </Modal>
</template>
