<template>
    <el-dialog :before-close="close" title="资质详情" v-model="dialogVisible" width="600px" append-to-body>
        <el-form class="base-form" ref="formRef" hide-required-asterisk label-width="auto">
            <el-form-item prop="industryType" label="所属行业及企业类型">
                <div class="d-flex a-c">
                    <div>{{ selectDictLabel(industry_type, form.industryType) }}</div>
                    <div style="padding: 0 10px;">
                        <el-icon>
                            <arrow-right />
                        </el-icon>
                    </div>
                    <div>{{ selectDictLabel(enterprise_type, form.cpyType) }}</div>
                </div>
            </el-form-item>
            <div style="min-height: 300px;">
                <template v-if="formList.length">
                    <template v-for="(item, index) in formList" :key="index">
                        <template v-if="item.fieldType === '1'">
                            <el-form-item prop="1" label="其他证明材料（选填）">
                                <div class="flex1">
                                    <FileLook v-model="item.fileValue" :span="18"></FileLook>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '2'">
                            <el-form-item prop="time" label="证件有效期至">
                                <div>{{ item.secularValue ? '长期有效' : item.fieldValue }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '3'">
                            <el-form-item prop="3" label="经营许可分类">
                                <div class="flex1">
                                    {{  selectDictLabel(business_license, item.fieldValue) }}
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '4'">
                            <el-form-item prop="4" label="药品生产许可证分类码">
                                <div class="flex1 d-flex flex-cln">
                                    <div v-for="sitem in item.fieldValue" :key="sitem">
                                        {{ selectDictLabel(drug_production_license, sitem) }}
                                    </div>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '5'">
                            <el-form-item prop="5" label="药品生产许可号">
                                <div>{{ item.fieldValue }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '6'">
                            <el-form-item prop="6" label="药品生产许可证书">
                                <div class="flex1">
                                    <FileLook v-model="item.fileValue" :span="18"></FileLook>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '7'">
                            <el-form-item prop="7" label="药品经营许可证号">
                                <div>{{ item.fieldValue }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '8'">
                            <el-form-item prop="8" label="药品经营许可证书">
                                <div class="flex1">
                                    <FileLook v-model="item.fileValue" :span="18"></FileLook>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '9'">
                            <el-form-item prop="9" label="食品生产许可证号">
                                <div>{{ item.fieldValue }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '11'">
                            <el-form-item prop="11" label="食品生产许可证书">
                                <div class="flex1">
                                    <FileLook v-model="item.fileValue" :span="18"></FileLook>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '12'">
                            <el-form-item prop="12" label="食品经营许可证号">
                                <div>{{ item.fieldValue }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '13'">
                            <el-form-item prop="13" label="食品经营许可证书">
                                <div class="flex1">
                                    <FileLook v-model="item.fileValue" :span="18"></FileLook>
                                </div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '14'">
                            <el-form-item prop="14" label="业务范围">
                                <div>{{  selectDictLabels(business_scope1, item.fieldValue, ',') }}</div>
                            </el-form-item>
                        </template>
                        <template v-if="item.fieldType === '15'">
                            <el-form-item prop="14" label="业务范围">
                                <div>{{  selectDictLabels(business_scope2, item.fieldValue, ',') }}</div>
                            </el-form-item>
                        </template>
                    </template>
                </template>
                <template v-else>
                    <el-empty :image="nodata" :image-size="180" description="请先选择上述所属企业及企业类型"></el-empty>
                </template>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup name="CpyAuthDetail" lang="ts">
import nodata from '@/assets/images/nodata.jpg';
import { propTypes } from '@/utils/propTypes';
import useUserStore from '@/store/modules/user';
import { FileLook, ImageViewer } from '@/views/models';

const emit = defineEmits(['update:show']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userStore = useUserStore();
const props = defineProps({
    show: propTypes.bool.def(false),
    info: Object,
    drug_production_license: propTypes.any.def(null),
    business_license: propTypes.any.def(null),
    industry_type: propTypes.any.def(null),
    enterprise_type: propTypes.any.def(null),
    business_scope1: propTypes.any.def(null),
    business_scope2: propTypes.any.def(null),
});
const formList = ref<any[]>([]);
const dialogVisible = ref(false);
const form = ref<any>({});
const formRef = ref();
const close = () => {
    emit('update:show', false);
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
watch(
    () => props.info,
    (val) => {
        formList.value = val?.certMaterials;
        Object.assign(form.value, val);
    },
    { immediate: true }
);
</script>
<style lang="scss" scoped>
.cpy-slx {
    position: absolute;
    left: 0;
    top: 0;
    width: 125px;
}
</style>
