<template>
    <div class="supplies-detail">
        <el-card shadow="always" class="back-card">
            <el-button type="primary" plain size="large" @click="goBack">返回</el-button>
            <span style="margin-left: 20px;">查看耗材</span>
        </el-card>

        <el-card shadow="never" class="detail-card">
            <el-row :gutter="40" style="margin-top: 30px;">
                <el-col :span="12">
                    <div><b><span style="color:red;margin-right: 3px">*</span>耗材名称：</b>{{ formData.suppliesName || '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>商品编码：</b>{{ formData.suppliesCode || '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>院方系统编码：</b>{{ formData.hospitalSystemCode || '--' }}</div>
                    <div><b>生产厂商：</b>{{ productManufacturerList.find(item => item.value === formData.manufacturer)?.label|| '--' }}</div>
                    <div><b>供应商：</b>{{ productSupplierList.find(item => item.value === formData.supplier)?.label || '--' }}</div>
                    <div class="long-label"><b>许可证有效期提醒：</b>{{ formData.licenseExpiryReminder ? formData.licenseExpiryReminder + '个月' : '--' }}</div>
                    <div class="long-label"><b>商品许可证有效期至：</b>{{ formData.productLicenseExpiry ? formData.productLicenseExpiry.slice(0, 10) : '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>保质期：</b>{{ formData.shelfLife ? formData.shelfLife + '个月' : '--' }}</div>

                </el-col>
                <el-col :span="12">
                    <div><b><span style="color:red;margin-right: 3px">*</span>商品资质：</b>{{ getDictLabel(product_qualification, formData.productQualification) || '--' }}</div>
                    <div><b>批准文号：</b>{{ formData.approvalNumber || '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>所属分类：</b>{{ formData.suppliesCategoryId || '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>保质期临期提醒：</b>{{ formData.shelfLifeReminder ? formData.shelfLifeReminder + '个月' : '--' }}</div>
                    <div><b>品牌：</b>{{ formData.brand || '--' }}</div>
                    <div><b>产品所属标签：</b>{{ formData.productLabel || '--' }}</div>
                    <div><b>产品适用科室：</b>{{ formData.applicableDepartment || '--' }}</div>
                </el-col>
            </el-row>

            <el-divider content-position="left">入货信息:</el-divider>
            <el-row :gutter="40" style="margin-top: 50px">
                <el-col :span="12">
                    <div><b><span style="color:red;margin-right: 3px">*</span>入货价格：</b>{{ formData.purchasePrice || '--' }} 元</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>耗材单位：</b>{{ getDictLabel(product_package_unit, formData.suppliesUnit) || '--' }}</div>
                </el-col>
                <el-col :span="12">
                    <div><b><span style="color:red;margin-right: 3px">*</span>销售价格：</b>{{ formData.sellPrice || '--' }} 元/{{ getDictLabel(product_package_unit, formData.suppliesUnit) || '--' }}</div>
                    <div><b><span style="color:red;margin-right: 3px">*</span>耗材规格：</b>{{ formData.suppliesSpec || '--' }}{{ getDictLabel(product_spec_unit, formData.suppliesSpecUnit) || '--' }}/{{ getDictLabel(product_package_unit, formData.suppliesUnit) || '--' }}</div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { getSuppliesManage } from '@/api/warehouse/suppliesManage';
    import { listSuppliesCategory } from '@/api/warehouse/suppliesCategory';
    import { getCurrentInstance } from 'vue';

    const router = useRouter();
    const route = useRoute();
    const { proxy } = getCurrentInstance();
    if (!proxy) {
        throw new Error('getCurrentInstance() returned null');
    }

    const productSupplierList = ref(JSON.parse(route.query.productSupplierList as string || '[]'));
    const productManufacturerList = ref(JSON.parse(route.query.productManufacturerList as string || '[]'));

    // 字典数据
    const product_qualification = ref([]);
    const product_package_unit = ref([]);
    const product_spec_unit = ref([]);

    // 加载字典数据
    const loadDict = async () => {
        const dictData = await proxy.useDict(
            'product_qualification',
            'product_package_unit',
            'product_spec_unit'
        );
        product_qualification.value = dictData.product_qualification;
        product_package_unit.value = dictData.product_package_unit;
        product_spec_unit.value = dictData.product_spec_unit;
    };

    const formData = ref < any > ({});

    // 字典label工具
    function getDictLabel(dictList: any[], value: string) {
        if (!dictList || !Array.isArray(dictList)) return value || '--';
        const found = dictList.find((item) => item.value === value);
        return found ? found.label : value || '--';
    }

    // 返回按钮
    const goBack = () => {
        router.back();
    };

    // 获取详情数据
    const getDetail = async (id: string) => {
        try {
            const res = await getSuppliesManage(id);
            formData.value = res.data;
        } catch (error) {

        }
    };

    onMounted(async () => {
        try {
            const id = route.params.id;
            if (id) {
                // 先加载字典数据
                await loadDict();
                // 再加载分类和详情数据
                await Promise.all([
                    getDetail(id.toString())
                ]);
            }
        } catch (error) {
            console.error('页面加载失败:', error);
            proxy.$modal.msgError('页面加载失败');
        }
    });
</script>

<style scoped>
    .supplies-detail {
        padding: 20px;
    }

    .back-card {
        margin-bottom: 20px;
    }

    .detail-card {
        background-color: #fff;
    }

    .el-row {
        margin-left: 30px;
        margin-bottom: 20px;
    }

    .el-col {
        margin-bottom: 20px;
    }

    .el-col div {
        line-height: 40px;
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 8px;
    }

    .el-col div b {
        display: inline-block;
        min-width: 140px;
        color: #606266;
        white-space: nowrap;
        text-align: right;
        padding-right: 12px;
        flex-shrink: 0;
    }

    .long-label b {
        min-width: 160px;
    }

    .long-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>