<template>
    <div class="approval-form">
        <!-- 基础信息 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
                <el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
                <el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
                <el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
                    }}</el-descriptions-item>
                <el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!-- 供应商信息 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
                <el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangId }}</el-descriptions-item>
                <el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!-- 产品信息 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <div slot="header" class="infoTitle">产品信息</div>
            <el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
                <el-table-column prop="chanpinName" label="产品名称" />
                <el-table-column prop="chanpinType" label="产品型号" />
                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
                    :cell-style="{ background: 'pink' }" />
                <el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
                <el-table-column prop="yontu" label="用途" />
                <el-table-column prop="totalPrice" label="合计" />
            </el-table>
        </el-card>

        <!-- 合同条款 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
                <el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
                    }}</el-descriptions-item>
                <el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
                    }}</el-descriptions-item>
                <el-descriptions-item label="合同类型">{{
                    getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!-- 附件 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <div slot="header" class="infoTitle">附件</div>

            <el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
                <el-table-column prop="fileName" label="文件名" width="300" />
                <el-table-column label="文件类型" width="200">
                    <template #default="scope">
                        {{ getFileType(scope.row.fileName) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-link type="primary" @click="handlePreview(scope.row)">
                            预览
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
import { defineProps } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';

// 定义props
const props = defineProps<{
    detailInfo: CaigouPlanVO
}>();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));




// 根据字典数组和值获取标签文本
const getTagLabel = (dictArray: any[], value: any): string => {
    if (!dictArray || !value) return '';
    const item = dictArray.find(item => item.value === value);
    return item?.label || value;
}
onMounted(() => {

});


// 获取文件类型（后缀名）
const getFileType = (fileName: string): string => {
    if (!fileName) return '';
    const lastDotIndex = fileName.lastIndexOf('.');
    if (lastDotIndex === -1) return '';
    return fileName.substring(lastDotIndex + 1).toLowerCase();
};

// 预览文件
const handlePreview = (file) => {
    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
    window.open(file.fileUrl, '_blank');
};
</script>

<style scoped>
.infoTitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.approval-form {
    padding: 20px;
}

.card {
    border-radius: 8px;
}

.error-tip {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

::v-deep(.el-input__inner) {
    color: red;
}
</style>