<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <el-form
                    ref="detailFormRef"
                    :model="detailForm"
                    label-position="left"
                    label-suffix="："
                    size="large"
                >
                    <el-collapse v-model="activeCollapse">
                        <el-collapse-item name="basic-info">
                            <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>
                                        <div>{{ detailForm.name }}</div>
                                    </el-descriptions-item>
                                    <el-descriptions-item :span="2">
                                        <template #label>
                                            <div style="display: flex; align-items: center">
                                                <span class="required-asterisk">*</span>
                                                供方基本情况调查内容
                                                <el-popover
                                                    :width="200"
                                                    placement="right"
                                                    trigger="hover"
                                                >
                                                    <template #reference>
                                                        <el-icon
                                                            :size="16"
                                                            style="
                                                                margin-left: 2px;
                                                                cursor: pointer;
                                                            "
                                                        >
                                                            <QuestionFilled color="#f90" />
                                                        </el-icon>
                                                    </template>
                                                    <div>供应商填写的基本情况调查表</div>
                                                    <el-divider style="margin: 6px 0"></el-divider>
                                                    <div
                                                        style="color: #409eff; cursor: pointer"
                                                        @click="previewBasicInfo()"
                                                    >
                                                        预览>>
                                                    </div>
                                                </el-popover>
                                            </div>
                                        </template>
                                        <el-form-item prop="requiredQualification">
                                            <el-checkbox-group
                                                v-model="detailForm.requiredQualification"
                                            >
                                                <el-checkbox
                                                    v-for="item in getDictionaryByCode(
                                                        'gfjbqkdcnrbm'
                                                    )"
                                                    :key="item.value"
                                                    :disabled="true"
                                                    :label="item.name"
                                                    :value="item.value"
                                                ></el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item :span="2">
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            物资分类
                                        </template>
                                        <el-form-item prop="gategoryNames">
                                            <div>{{ detailForm.gategoryNames }}</div>
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item
                                        v-if="detailForm.requiredQualification.includes('4')"
                                        :span="2"
                                    >
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            准入资质
                                        </template>
                                        <el-form-item prop="btzzName">
                                            <div>{{ detailForm.btzzName }}</div>
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item :span="2">
                                        <template #label> 备注</template>
                                        <el-form-item prop="desc">
                                            <div>{{ detailForm.desc }}</div>
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item :span="2">
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            启用/禁用
                                        </template>
                                        <el-form-item prop="status">
                                            <el-switch
                                                v-model="detailForm.status"
                                                active-text="启用"
                                                active-value="1"
                                                :disabled="true"
                                                inactive-text="禁用"
                                                inactive-value="0"
                                                inline-prompt
                                                style="
                                                    --el-switch-on-color: #13ce66;
                                                    --el-switch-off-color: #ff4949;
                                                "
                                            />
                                        </el-form-item>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item name="flow-node-config">
                            <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> 流程节点选择</template>
                                        <el-form-item prop="flowNode">
                                            <el-checkbox-group v-model="detailForm.flowNode">
                                                <el-checkbox
                                                    v-for="item in flowNodeList"
                                                    :key="item.id"
                                                    :disabled="true"
                                                    :label="item.name"
                                                    :value="item.id"
                                                ></el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item :span="2">
                                        <template #label> 流程预览</template>
                                        <div class="flow-preview">
                                            <MermaidFlow :flowNodes="detailForm.flowNode" />
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-form>
            </div>
        </div>
        <!-- 预览弹窗 -->
        <previewInfo
            ref="dialogRef"
            v-model:isShowAdd="previewDialog"
            :selectedContent="detailForm.requiredQualification"
            title="基本情况调查表"
        ></previewInfo>
    </div>
</template>

<script lang="ts" setup>
import MermaidFlow from '@/components/MermaidFlow/index.vue'
import { Document } from '@element-plus/icons-vue'
import { dataDetail } from '@/api/supplierMonitor/ConfigManagement/AccessQualificationConfig'
import previewInfo from '@/views/SupplierMonitor/QualificationAudit/AccessQualificationConfig/previewInfo.vue'
import { getDictionaryByCode } from '@/utils/dictionary'

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

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

// 表单相关
const detailFormRef = ref()
const detailLoading = ref(false)
const activeCollapse = ref(['basic-info', 'flow-node-config'])

// 表单数据
const flowNodeList = ref([
    { id: '1', name: '现场评审' },
    { id: '2', name: '样品试用' }
])

const detailForm = reactive<AddEditForm>({
    requiredQualification: []
})

const getDetail = async (id: string) => {
    // 获取详情逻辑
    detailLoading.value = true
    const { ...rest } = (await dataDetail(id)) as AddEditForm
    Object.assign(detailForm, {
        ...rest
    })
    detailForm.requiredQualification = detailForm.basic.code.split(',')
    detailForm.btzzName = detailForm.qualificationMap.required
        .map((item: any) => item.qualificationCategoryName)
        .join(',')
    detailForm.flowNode = getKeysFromValue(detailForm.process.code)
    detailLoading.value = false
}

const getKeysFromValue = (valueString: any) => {
    const nodeConfig = {
        '1': '3,4,5',
        '2': '6'
    }

    const values = valueString.split(',')

    return Object.entries(nodeConfig).reduce((acc, [key, configValue]) => {
        const configValues = configValue.split(',')
        if (configValues.some((val) => values.includes(val))) {
            acc.push(key)
        }
        return acc
    }, [])
}

// 预览
const previewDialog = ref(false)
const previewBasicInfo = () => {
    previewDialog.value = true
}

onMounted(() => {
    // 如果是编辑模式，获取详情数据
    if (route.query.id && typeof route.query.id === 'string') {
        getDetail(route.query.id)
    }
})
</script>

<style lang="scss" scoped>
:deep(.el-divider) {
    margin: 12px 0 !important;
}

.flow-preview {
    min-height: 400px;
    width: 100%;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #333;
}

.required-asterisk {
    color: #f56c6c;
    margin-right: 4px;
}
</style>
