<template>
    <el-dialog v-model="visibleInner" :title="t('common.viewBtn') + ' ' + t('expertLibrary.title')" width="900px"
        append-to-body>
        <!-- 顶部三列摘要 -->
        <el-descriptions :column="3" border class="mb10">
            <el-descriptions-item :label="t('expertApply.reporter')">
                {{ meta.reporter }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.date')">
                {{ meta.date }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.reportingUnit')">
                {{ meta.unit }}
            </el-descriptions-item>
        </el-descriptions>

        <!-- 专家信息 -->
        <el-descriptions :title="t('expertLibrary.title')" :column="2" border>
            <el-descriptions-item :label="t('expertApply.table.name')">
                {{ detail.expertName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.contact')">
                {{ detail.contactInformation || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.field')">
                {{ detail.technologyField || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.title')">
                {{ detail.professionalTitle || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.company')" :span="2">
                {{ detail.workUnit || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.level')">
                <span>{{ level.find((item:any) => item.value === detail.level)?.label || '--' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertLibrary.table.status')">
                <el-tag :type="['info', 'primary', 'success', 'danger'][detail.status]">{{ statusLabel(detail.status) }}</el-tag>
            </el-descriptions-item>
        </el-descriptions>

        <!-- 附件与佐证材料 -->
        <el-descriptions :column="1" border class="mt10">
            <el-descriptions-item :label="t('expertApply.table.attachments')">
                <template v-if="(detail.attachments || []).length">
                    <span v-for="(f, idx) in detail.attachments" :key="'a-' + idx">
                        <a :href="`${baseURL}${f.url}`" target="_blank">
                            <el-button link type="primary">
                                {{ f.name }}
                            </el-button>
                        </a>
                        <span v-if="f.size">（{{ f.size }}）</span>
                        <span v-if="idx !== detail.attachments.length - 1" class="mx8">|</span>
                    </span>
                </template>
                <template v-else>-</template>
            </el-descriptions-item>
            <el-descriptions-item :label="t('expertApply.table.evidences')">
                <template v-if="(detail.evidences || []).length">
                    <span v-for="(f, idx) in detail.evidences" :key="'e-' + idx">
                        <a :href="`${baseURL}${f.url}`" target="_blank">
                            <el-button link type="primary">
                                {{ f.name }}
                            </el-button>
                        </a>
                        <span v-if="f.size">（{{ f.size }}）</span>
                        <span v-if="idx !== detail.evidences.length - 1" class="mx8">|</span>
                    </span>
                </template>
                <template v-else>-</template>
            </el-descriptions-item>
        </el-descriptions>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visibleInner = false">{{ t('tagsView.close') || '关闭' }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import {level} from "/@/hooks/enums";

const baseURL = import.meta.env.VITE_API_URL

const props = defineProps<{
    visible: boolean
    detail: any
    meta: { reporter: string; unit: string; date: string }
}>();
const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void
}>();

const { t } = useI18n();

const visibleInner = ref(false);
watch(
    () => props.visible,
    (v) => (visibleInner.value = v),
    { immediate: true },
);
watch(visibleInner, (v) => emit('update:visible', v));

const levelLabel = (val: string) => {
    if (val === 'national') return t('expertApply.level.national');
    if (val === 'provincial') return t('expertApply.level.provincial');
    if (val === 'city') return t('expertApply.level.city');
    return '-';
};
const statusLabel = (val: string) => {
    return {
        '0': t('expertLibrary.status.pending'),
        '1': t('expertLibrary.status.reviewing'),
        '2': t('expertLibrary.status.approved'),
        '3': t('expertLibrary.status.rejected'),
    }[val] || val
};
</script>

<style scoped>
.mb10 {
    margin-bottom: 10px;
}
</style>