<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <div class="content-area">
                    <el-form
                        ref="addEditFormRef"
                        :model="detailForm"
                        label-position="left"
                        label-suffix="："
                        size="large"
                    >
                        <el-collapse v-model="activeCollapse">
                            <div id="access-application" class="content-section">
                                <el-collapse-item name="access-application">
                                    <template #title>
                                        <div class="section-title">
                                            <el-icon>
                                                <Document />
                                            </el-icon>
                                            <span>推荐供应商</span>
                                        </div>
                                    </template>
                                    <div class="section-content">
                                        <el-descriptions :column="2" border>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    供应商名称
                                                </template>
                                                <el-form-item prop="supplierName">
                                                    {{ detailForm.supplierName || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    推荐人
                                                </template>
                                                <el-form-item prop="referrer"
                                                    >{{ detailForm.referrer || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    推荐单位
                                                </template>
                                                <el-form-item prop="recommendedDepartment">
                                                    {{ detailForm.recommendedDepartment || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    推荐时间
                                                </template>
                                                <el-form-item prop="applyDate">
                                                    {{ detailForm.applyDate || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    拟供应物资类型
                                                </template>
                                                <el-form-item prop="gategoryNames">
                                                    {{ detailForm.gategoryNames || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    供方基本情况调查表内容
                                                </template>
                                                <el-form-item prop="accessConfigurationName">
                                                    {{ detailForm.accessConfigurationName || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    推荐理由
                                                </template>
                                                <el-form-item prop="drivingReasons">
                                                    {{ detailForm.drivingReasons || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    供应商合作意愿
                                                </template>
                                                <el-form-item prop="cooperateWillingness">
                                                    {{
                                                        dictionaryEscape(
                                                            'zr-gyshzyy',
                                                            detailForm.cooperateWillingness
                                                        ) || '-'
                                                    }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    简要说明
                                                </template>
                                                <el-form-item prop="briefDescription">
                                                    {{ detailForm.briefDescription || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </div>
                                </el-collapse-item>
                            </div>
                        </el-collapse>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { dictionaryEscape, getDictionaryByCode } from '@/utils/dictionary.ts'
import { CircleCheck, Document } from '@element-plus/icons-vue'
import { dataDetail } from '@/api/supplierMonitor/QualificationAudit/SupplyInfo.ts'

interface AddEditForm {
    [key: string]: string | number | undefined | null | any
}

const route = useRoute()
const router = useRouter()

const detailLoading = ref(false) // 详情加载状态
const activeCollapse = ref(['access-application'])

// 表单相关
const detailForm = reactive<AddEditForm>({})

// 数据获取
const getDetail = async (id: string) => {
    // 获取详情逻辑
    detailLoading.value = true
    const { ...rest } = (await dataDetail(id)) as AddEditForm
    Object.assign(detailForm, {
        ...rest
    })
    let drivingReasonsList = getDictionaryByCode('zr-tjly')
    let values = detailForm.drivingReasons?.split(',')
    if (values && values.length > 0) {
        detailForm.drivingReasons = values
            .map((value) => drivingReasonsList.find((item) => String(item.value) === value)?.name)
            .filter(Boolean)
            .join(',')
    }
    detailForm.gategoryNames = detailForm.materialCategory2List
        .map((item: any) => item.categoryName)
        .join(',')

    detailLoading.value = false
}

onMounted(() => {
    if (route.query.id && typeof route.query.id === 'string') {
        getDetail(route.query.id)
    }
})
</script>

<style lang="scss" scoped>
.content-area {
    width: 100%;
    height: 100%;
}
</style>
