<template>
    <el-card style="height: 100%">
        <el-row :span="24" :gutter="20">
            <el-col :span="isPreview ? 24 : 18"  :class="isPreview ? '' : 'border-r border-[#e5e7eb]'">
                <FlowFormView :processInstanceId="processInstanceId" />
                <div class="page-title">{{ isUpdate ? t('expertApply.updateTitle') : t('expertApply.title') }}</div>
                <div class="mb10 header-meta">
                    <div class="meta-item">{{ t('cooperationUnit.reporterLabel') }}{{ dataList[0]?.createBy }}</div>
                    <div class="meta-item">{{ t('cooperationUnit.reportingUnitLabel') + displayUnit }}</div>
                    <div class="meta-item">{{ t('cooperationUnit.dateLabel') }}{{ dataList[0]?.createTime ? dayjs(dataList[0]?.createTime).format('YYYY-MM-DD') : '--' }}</div>
                    <div class="meta-item">{{ t('cooperationUnit.serialNumber') + '--' }}</div>
                </div>
                <el-table :data="dataList"
                    v-loading="loading" border>
                    <el-table-column :label="t('expertLibrary.table.index')" type="index" width="60" />
                    <el-table-column :label="t('expertLibrary.table.name')" prop="expertName" min-width="140"
                        show-overflow-tooltip />
                    <el-table-column :label="t('expertLibrary.table.contact')" prop="contactInformation" min-width="140"
                        show-overflow-tooltip />
                    <el-table-column :label="t('expertLibrary.table.field')" prop="technologyField" min-width="140"
                        show-overflow-tooltip />
                    <el-table-column :label="t('expertLibrary.table.title')" prop="professionalTitle" min-width="120"
                        show-overflow-tooltip />
                    <el-table-column :label="t('expertLibrary.table.company')" prop="workUnit" min-width="160"
                        show-overflow-tooltip />
                    <el-table-column :label="t('expertLibrary.table.level')" prop="level" min-width="100"
                        show-overflow-tooltip>
                        <template #default="{ row }">
                            <span>{{ level.find((item:any) => item.value === row.level)?.label || '--' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('expertLibrary.table.status')" prop="externalStatus" min-width="120"
                        show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-tag :type="['info', 'primary', 'success', 'danger'][row.status]">{{ externalStatusLabel(row.status) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('expertLibrary.table.action')" width="100" fixed="right">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="handleView(row)">{{ t('common.viewBtn') || '查看'
                            }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <ExpertDetailDialog v-model:visible="detailVisible" :detail="currentDetail" :meta="detailMeta" />
            </el-col>
            <el-col :span="6" v-if="!isPreview">
                <ApprovalAction status="pending" :task-id="taskId" :process-instance-id="processInstanceId"></ApprovalAction>
            </el-col>
        </el-row>
    </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getExpertInformationDetailByProcessInstanceId } from '/@/api/investment/cooperationUnit';
import ApprovalAction from "/@/components/workbench/common/ApprovalAction.vue";
import ExpertDetailDialog from '/@/components/investment/ExpertDetailDialog.vue';
import { useUserInfo } from '/@/stores/userInfo';
import { dayjs } from 'element-plus';
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue';
import {level} from "/@/hooks/enums";

const { t } = useI18n();
const route = useRoute()
const isPreview = route.query.isPreview === 'true'
const processInstanceId = route.query.processInstanceId as string
const taskId = route.query.taskId as string

const loading = ref(false);
const isUpdate = ref(route.query.flowType === '2')
const dataList = ref<any[]>([]);

// 头部摘要显示
const userInfoStore = useUserInfo();
const displayUnit = (userInfoStore.userInfos.user?.deptName || '');

// 详情查看
const detailVisible = ref(false);
const currentDetail = ref<any>({});
const detailMeta = reactive({
    reporter: 'xxx',
    unit: 'xxx',
    date: new Date().toISOString().slice(0, 10),
});

const getDataList = async () => {
    loading.value = true;
    try {
        const res = await getExpertInformationDetailByProcessInstanceId(processInstanceId);
        dataList.value = res.data || [];
    } finally {
        loading.value = false;
    }
};

const handleView = (row: any) => {
    // 转换为详情组件需要的格式
    const attachmentUrl = row.attachmentUrl ? JSON.parse(row.attachmentUrl) : []
    // 转换为详情组件需要的格式
    const testimonyMaterials = row.testimonyMaterials ? JSON.parse(row.testimonyMaterials) : []
    currentDetail.value = { ...row,
        attachments: attachmentUrl,
        evidences: testimonyMaterials,
    };
    detailVisible.value = true;
};

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 val || '-';
};

const externalStatusLabel = (val: string) => {
    return {
        '0': t('expertLibrary.status.pending'),
        '1': t('expertLibrary.status.reviewing'),
        '2': t('expertLibrary.status.approved'),
        '3': t('expertLibrary.status.rejected'),
    }[val] || 1
};

onMounted(() => {
    getDataList();
})
</script>

<style scoped>
.page-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin: 0 auto;
}

.header-meta .meta-item {
    color: var(--el-text-color-regular);
}
</style>