<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <div class="main-content">
                    <div class="content-area">
                        <el-form
                            ref="addEditFormRef"
                            :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>
                                                <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="supplierAddr">
                                                    {{ detailForm.supplierAddr || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    供应商联系人
                                                </template>
                                                <el-form-item prop="supplierContact">
                                                    {{ detailForm.supplierContact || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    联系电话
                                                </template>
                                                <el-form-item prop="supplierTel">
                                                    {{ detailForm.supplierTel || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    开始合作日期
                                                </template>
                                                <el-form-item prop="cooperationDate">
                                                    {{ detailForm.cooperationDate || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    退出提出日期
                                                </template>
                                                <el-form-item prop="outDate">
                                                    {{ detailForm.outDate || '-' }}
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label>
                                                    <span class="required-asterisk">*</span>
                                                    退出原因
                                                </template>
                                                <el-form-item prop="result">
                                                    <div>{{ detailForm.result || '-' }}</div>
                                                </el-form-item>
                                            </el-descriptions-item>
                                            <el-descriptions-item :span="2">
                                                <template #label> 附件</template>
                                                <el-form-item prop="b">
                                                    <CustomUploader
                                                        :disabled="true"
                                                        :fileList="detailForm.files"
                                                        :previewAndDownload="false"
                                                        :typeRegularArr="typeRegularArr"
                                                        type="button"
                                                    >
                                                    </CustomUploader>
                                                </el-form-item>
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Document } from '@element-plus/icons-vue'
import CustomUploader from '@/components/CustomUploader/index.vue'
import { dataDetail } from '@/api/supplierMonitor/SupplyManagement/DismissalManagement.ts'

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

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

// 表单相关
const addEditFormRef = ref()
const detailLoading = ref(false)
const activeCollapse = ref(['basic-info'])

// 表单数据
const detailForm = reactive<AddEditForm>({})

//附件上传
const typeRegularArr = [
    'mp4',
    'mov',
    'avi',
    'mkv',
    'wmv',
    'flv',
    'mpeg',
    'mpg',
    '3gp',
    'webm', // 视频格式
    'doc',
    'docx',
    'xls',
    'xlsx',
    'ppt',
    'pptx',
    'txt',
    'rtf',
    'pdf', // 文档格式
    'jpg',
    'png',
    'bmp',
    'gif' // 图像文件
]

const getDetail = async (id: string) => {
    // 获取详情逻辑
    const { ...rest } = (await dataDetail(id)) as AddEditForm
    Object.assign(detailForm, {
        ...rest
    })
}

// 取消
const handleCancel = () => {
    router.push({ name: 'SupplierExitManagement' })
}

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

<style lang="scss" scoped>
.form-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;

    .page-form {
        overflow-y: hidden;
        overflow-y: auto;
        padding: 0 20px;

        /* 隐藏滚动条样式 */
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background: transparent;
        }

        /* Firefox 隐藏滚动条 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

.step-container {
    width: 100%;
    margin-bottom: 20px;
}

.table-actions {
    margin: 16px 0 16px 16px;
}

.content-area {
    /* 确保容器的高度计算正确 */
    box-sizing: border-box;

    :deep(.el-collapse) {
        /* 通过增加 1px 来补偿 border 导致的 1px 高度差 */
        margin-bottom: 1px;
    }
}
</style>
