<template>
    <div class="detail-wrap">
        <div class="f-s-14 c-333 f-w-5 mb-10">原料信息</div>
        <el-row :gutter="16" class="mb-10">
            <el-col :span="24" class="field" v-if="info?.type !== undefined && info?.type !== null">
                <span class="label">找药类型</span>
                <span class="value">{{ selectDictLabel(dm_medicine_find_type, info?.type) || '-' }}</span>
            </el-col>

            <el-col :span="24" class="field">
                <span class="label">价格</span>
                <span class="value">{{ displayPrice }}</span>
            </el-col>

            <el-col :span="24" class="field" v-if="info?.priceType === '1'">
                <span class="label">价格说明</span>
                <span class="value">具体再议</span>
            </el-col>

            <el-col :span="24" class="field" v-if="info?.remark">
                <span class="label">价格补充说明</span>
                <span class="value">{{ info.remark }}</span>
            </el-col>

            <el-col :span="24" class="field" v-if="imgList.length">
                <span class="label">原料图</span>
                <div class="value img-list">
                    <el-image v-for="(img, idx) in imgList" :key="idx" :src="img" :preview-src-list="imgList" fit="cover" class="thumb" />
                </div>
            </el-col>

            <el-col :span="24" class="field" v-if="tagList.length">
                <span class="label">原料优势</span>
                <div class="value">
                    <el-tag v-for="(t, i) in tagList" :key="i" class="mr-8 mb-8">{{ t }}</el-tag>
                </div>
            </el-col>

            <el-col :span="24" class="field">
                <span class="label">检验报告</span>
                <div class="value">
                    <span>{{ selectDictLabel(solon_report_type, info?.reportType) || (+((info?.reportType || 0)) ? '有' : '无') }}</span>
                </div>
            </el-col>
            <el-col v-if="info?.report?.length" :span="24" class="field">
                <div>
                    <FileLook :value="info.report"></FileLook>
                </div>
            </el-col>
            <el-col v-if="+info?.providePha" :span="24" class="field">
                <div>后期可根据需要提供《中国药典》检测报告</div>
            </el-col>
            <el-col v-if="+info?.provideMetal" :span="24" class="field">
                <div>后期可根据需要提供重金属/农残专项检测报告</div>
            </el-col>
            <el-col :span="24" class="field">
                <span class="label">是否提供样品</span>
                <span class="value">{{ selectDictLabel(yes_no, info?.provideSample) || (+info?.provideSample ? '是' : '否') }}</span>
            </el-col>

            <el-col :span="24" class="field" v-if="+(info?.provideSample || 0)">
                <span class="label">样品费用</span>
                <span class="value">{{ selectDictLabel(solon_sample_free, info?.sampleFree) || (+info?.sampleFree ? '免费' : '收费') }}</span>
            </el-col>

            <el-col :span="24" class="field" v-if="+(info?.provideSample || 0) && +(info?.sampleFree || 0)">
                <span class="label">样品含税单价</span>
                <span class="value">{{ displaySamplePrice }}</span>
            </el-col>
        </el-row>

        <div class="h-1 bg-#f7f7f7 mg2-10-0"></div>

        <div class="f-s-14 c-333 f-w-5 mb-10">企业信息</div>
        <el-row :gutter="16">
            <el-col :span="12">
                <div class="field">
                    <span class="label">企业名称</span>
                    <span class="value">{{ info?.cpyName || '-' }}</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="field">
                    <span class="label">仓库所在地</span>
                    <span class="value">{{ displayArea }}</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="field">
                    <span class="label">联系人姓名</span>
                    <span class="value">{{ info?.contactName || '-' }}</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="field">
                    <span class="label">联系电话</span>
                    <span class="value">{{ info?.tel || '-' }}</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="views-supply-item" lang="ts">
import { computed } from 'vue';
import { propTypes } from '@/utils/propTypes';
import { FileLook } from '@/views/models';

const props = defineProps({
    info: propTypes.any.def(null),
    dict: propTypes.any.def(null)
});

// 字典列表（避免 props.dict 为空）
const dm_medicine_find_type = computed(() => props.dict?.dm_medicine_find_type || []);
const yes_no = computed(() => props.dict?.yes_no || []);
const solon_sample_free = computed(() => props.dict?.solon_sample_free || []);
const solon_report_type = computed(() => props.dict?.solon_report_type || []);

// 统一字典取 label
function selectDictLabel(list: any[] = [], value: any) {
    const hit = (list || []).find((i: any) => String(i.value) === String(value));
    return hit?.label ?? '';
}

// 价格显示
const displayPrice = computed(() => {
    const info = props.info || {};
    if (info.priceType === '1') return '具体再议';
    if (info.price === 0 || info.price) return `¥${Number(info.price).toLocaleString()}/kg`;
    return '-';
});

// 样品价格显示
const displaySamplePrice = computed(() => {
    const price = props.info?.samplePrice;
    if (price === 0 || price) return `¥${Number(price).toLocaleString()}/kg`;
    return '-';
});

// 原料图列表（兼容字符串、数组）
const imgList = computed<string[]>(() => {
    const v = props.info?.images;
    if (!v) return [];
    if (Array.isArray(v)) return v.filter(Boolean);
    if (typeof v === 'string') {
        // 逗号或分号分隔
        return v.split(/[,;]\s*/).filter(Boolean);
    }
    return [];
});

// 原料优势标签
const tagList = computed<string[]>(() => {
    const v = props.info?.tags;
    if (!v) return [];
    if (Array.isArray(v)) return v.filter(Boolean);
    if (typeof v === 'string') return v.split(/[,;]\s*/).filter(Boolean);
    return [];
});

// 检验报告文件
const reportFiles = computed<any[]>(() => {
    const v = props.info?.report;
    if (!v) return [];
    if (Array.isArray(v)) return v;
    if (typeof v === 'string') return v ? [v] : [];
    return [];
});

function getFileUrl(item: any) {
    if (!item) return '#';
    if (typeof item === 'string') return item;
    return item.url || item.path || '#';
}
function getFileName(item: any) {
    if (!item) return '';
    if (typeof item === 'string') {
        try {
            const url = new URL(item, window.location.origin);
            return decodeURIComponent(url.pathname.split('/').pop() || '文件');
        } catch {
            const segs = item.split('/');
            return decodeURIComponent(segs[segs.length - 1] || '文件');
        }
    }
    return item.name || item.filename || '文件';
}

// 仓库所在地显示（兼容数组/字符串/对象）
const displayArea = computed(() => {
    const v = props.info?.warehouseAddress;
    if (!v) return '-';
    if (Array.isArray(v)) return v.filter(Boolean).join(' / ');
    if (typeof v === 'object') {
        const { province, city, district, name } = v as any;
        const parts = [province, city, district, name].filter(Boolean);
        return parts.length ? parts.join(' / ') : '-';
    }
    return String(v);
});
</script>

<style lang="scss" scoped>
.detail-wrap {
    .field {
        display: flex;
        align-items: flex-start;
        padding: 6px 0;
        .label {
            color: #666;
            min-width: 120px;
            flex: 0 0 auto;
        }
        .value {
            color: #333;
            flex: 1;
            word-break: break-all;
        }
    }
    .img-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        .thumb {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #f0f0f0;
            background: #fafafa;
        }
    }
}
</style>
