<template>
    <el-dialog :before-close="close" :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
        <el-form ref="recordCompanyFormRef" :model="form" :rules="rules" label-width="auto">
            <div class="mb20">
                <UploadAvatar title="企业logo" v-model="form.storePhoto"></UploadAvatar>
                <div class="t-a-c">企业logo</div>
            </div>
            <el-form-item prop="cpyName" label="企业名称">
                <el-input v-model="form.cpyName" class="base-input" placeholder="请填写企业名称" />
            </el-form-item>
            <el-form-item prop="cpyType" label="企业类型">
                <el-radio-group v-model="form.cpyType">
                    <el-radio v-for="item in cpy_type" :key="item.value" :label="item.value" :value="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="form.cpyType === '13'">
                <el-form-item prop="supervisionType" label="具体类型">
                    <el-radio-group v-model="form.supervisionType">
                        <el-radio v-for="item in supervision_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="supervisionArea" label="监管区域">
                    <AreaCascader :zlevel="2" v-model="form.supervisionArea" checkStrictly></AreaCascader>
                </el-form-item>
            </template>
            <el-form-item prop="creditCode" label="统一社会信用代码">
                <el-input v-model="form.creditCode" maxlength="18" class="base-input" placeholder="请填写18位统一社会信用代码" />
            </el-form-item>
            <el-form-item prop="license" label="营业执照">
                <div class="flex1">
                    <FileUpload v-model="form.license" format="object" :isFile="false" :span="20" :limit="1" :fileType="['png', 'jpg', 'jpeg']"></FileUpload>
                </div>
            </el-form-item>
            <el-form-item prop="adcdCode" label="所在行政区">
                <AreaCascader :zlevel="2" v-model="form.adcdCode"></AreaCascader>
            </el-form-item>
            <el-form-item prop="address" label="具体地址">
                <el-input v-model="form.address" class="base-input" placeholder="请填写区县以下的具体企业地址信息" />
            </el-form-item>
            <el-form-item prop="contactPerson" label="企业联系人">
                <el-input v-model="form.contactPerson" class="base-input" placeholder="请填写企业联系人姓名" />
            </el-form-item>
            <el-form-item prop="tel" label="企业联系电话">
                <el-input v-model="form.tel" class="base-input" maxlength="11" placeholder="请填写企业联系电话" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup name="editCpy" lang="ts">
import { addRecordCompany, updateRecordCompany } from '@/api/enterprise/recordCompany';
import { propTypes } from '@/utils/propTypes';
import { AreaCascader, UploadAvatar } from '@/views/components';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, cpy_type, supervision_type } = toRefs<any>(proxy?.useDict('cpy_res_status', 'cpy_type', 'supervision_type'));
const emit = defineEmits(['update:show', 'seccess']);
const props = defineProps({
    title: propTypes.string.def(''),
    show: propTypes.bool.def(false),
    info: propTypes.any.def(null)
});
const recordCompanyFormRef = ref<ElFormInstance>();
const buttonLoading = ref(false);
const form = ref<any>({});
const rules = reactive({
    storePhoto: [{ required: true, trigger: 'blur', message: '请上传企业logo' }],
    cpyName: [{ required: true, trigger: 'blur', message: '请填写企业名称' }],
    creditCode: [{ required: true, trigger: 'blur', message: '请填写18位统一社会信用代码' }],
    license: [{ required: true, trigger: 'blur', message: '请上传营业执照' }],
    cpyType: [{ required: true, trigger: 'blur', message: '请选择结构类型' }],
    adcdCode: [{ required: true, trigger: 'blur', message: '请选择所在行政区' }],
    address: [{ required: true, trigger: 'blur', message: '请填写具体地址' }],
    contactPerson: [{ required: true, trigger: 'blur', message: '请填写企业联系人姓名' }],
    tel: [{ required: true, trigger: 'blur', message: '请填写企业联系电话' }]
});
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});
/** 提交按钮 */
const submitForm = () => {
    recordCompanyFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateRecordCompany(form.value).finally(() => (buttonLoading.value = false));
            } else {
                await addRecordCompany(form.value).finally(() => (buttonLoading.value = false));
            }
            proxy?.$modal.msgSuccess('修改成功');
            emit('seccess', form.value)
            close()
        }
    });
};
/** 取消按钮 */
const close = () => {
    emit('update:show', false)
};
watch(
    () => props.show,
    (val) => {
        dialog.visible = val;
    },
    { immediate: true }
);
watch(
    () => props.title,
    (val) => {
        dialog.title = val;
    },
    { immediate: true }
);
watch(
    () => props.info,
    (val) => {
        if (val) {
            Object.assign(form.value, val)
        }
    },
    { immediate: true }
);
</script>
