<template>
    <el-dialog :before-close="close" :title="form.certName" v-model="dialogVisible" width="600px" append-to-body>
        <el-form class="base-form" ref="formRef" hide-required-asterisk :rules="rules" :model="form" label-width="auto">
            <div v-if="form.specialType === '7'" class="d-flex j-c a-c" style="padding-bottom: 20px;">
                <el-form-item prop="logo">
                    <div class="d-flex j-c a-c" style="width: 90px;">
                        <HAvatar :src="form.logo" name="其他资质认证登记" fit="contain" shape="square"></HAvatar>
                    </div>
                </el-form-item>
            </div>
            <div v-else class="d-flex j-c a-c" style="padding: 0px 30px 20px;">
                <HAvatar v-if="form.certLevel === '1'" :size="100" :src="form.levelOneLogo" fit="contain" shape="square"></HAvatar>
                <HAvatar v-else :size="100" :src="form.levelTowLogo" fit="contain" shape="square"></HAvatar>
            </div>
            <el-form-item v-if="['4', '6'].includes(form.type)" prop="certLevel" label="认证级别">
                <div class="flex1">
                    <template v-if="form.specialType === '4'">
                        {{ selectDictLabel(cert_level, form.certLevel) }}
                    </template>
                    <template v-if="form.specialType === '6'">
                        {{ selectDictLabel(cert_level1, form.certLevel) }}
                    </template>
                </div>
            </el-form-item>
            <el-form-item v-if="['7'].includes(form.specialType)" prop="certName" label="资质认证证书名称">
                {{ form.certName }}
            </el-form-item>
            <el-form-item prop="certFile" label="资质认证证书">
                <div class="flex1">
                    <FileLook v-model="form.certFile" :span="18"></FileLook>
                </div>
            </el-form-item>
            <el-form-item prop="validity" label="有效期期限至（选填）">
                {{ +form.secularValidity ? '长期有效' : form.validity }}
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup name="CpyCheckDetail" lang="ts">
import { propTypes } from '@/utils/propTypes';
import useUserStore from '@/store/modules/user';
import up_rzbslogo from '@/assets/images/up_rzbslogo.png';
import { FileLook } from '@/views/models';
const emit = defineEmits(['update:show', 'change']);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userStore = useUserStore();
const props = defineProps({
    show: propTypes.bool.def(false),
    info: Object,
    cert_level: propTypes.any.def(null),
    cert_level1: propTypes.any.def(null)
});
const formList = ref<any[]>([]);
const dialogVisible = ref(false);
const form = ref<any>({
    logo: undefined,
    certName: undefined,
    certFile: undefined,
    validity: undefined,
    certLevel: '1'
});
const rules = reactive({
    logo: [{ required: true, trigger: 'blur', message: '请上传企业logo' }],
    certName: [{ required: true, trigger: 'blur', message: '请填写资质认证证书名称' }],
    certFile: [{ required: true, trigger: 'blur', message: '请上传资质认证证书' }],
    validity: [{ required: true, trigger: 'blur', message: '请选择有效期期限至终止日期' }]
});
const formRef = ref();
const close = () => {
    emit('update:show', false);
};


watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
watch(
    () => props.info,
    (val) => {
        if (val) {
            form.value = { ...val, ...val.specialCertMaterials };
        }
    },
    { immediate: true }
);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.cpy-slx {
    position: absolute;
    left: 0;
    top: 0;
    width: 125px;
}
.card-16 {
    padding: 20px 40px 20px 30px;
    background-color: #f7f7f7;
    border-radius: 8px;
}
</style>
