<template>
    <a-form ref="form" :model="model" :form="form"  labelAlign="left"  :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-row :gutter="[16,16]">
            <a-col :span="8">
                <a-form-item label="企业法人">
                    <a-input type="text" placeholder="请填写企业法人"
                             v-decorator="['legalPerson', { rules: [{ required: true, message: '请填写企业法人！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="经营场所">
                    <a-input type="text" placeholder="请填写经营场所"
                             v-decorator="['registeredAddress', { rules: [{ required: true, message: '请填写经营场所！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="有效期">
                    <a-date-picker type="text" placeholder="请选择有效期"
                                   v-decorator="['businessTerm', { rules: [{ required: false, message: '请选择有效期！' }] }]"></a-date-picker>
                </a-form-item>
                <a-form-item label="联系人姓名">
                    <a-input type="text" placeholder="请填写联系人姓名"
                             v-decorator="['sfzName', { rules: [{ required: true, message: '请填写联系人姓名！' }] }]"></a-input>
                </a-form-item>

                <a-form-item label="身份证号">
                    <a-input type="text" placeholder="请填写身份证号"
                             v-decorator="['idCard', { rules: [{ required: true, message: '请填写身份证号！' }] }]"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="2">
            </a-col>
            <a-col :span="14">
                <a-form-item label="上传实名证照"  :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                    <a-row>
                        <a-col span="20" push="16" >
                            <a-button type="link" @click="warning">手持证件要求</a-button>
                        </a-col>
                    </a-row>
                    <a-row >
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                            v-decorator="['ewmLogo', { rules: [{ required: true, message: '请上传门头照片！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>门头照片</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                            v-decorator="['imgs', { rules: [{ required: true, message: '请上传前台照片！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>前台照片</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                                        v-decorator="['sfzImg1', { rules: [{ required: true, message: '请上传法人身份证（正面）！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>法人身份证（正面）</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                                         v-decorator="['sfzImg2', { rules: [{ required: true, message: '请上传法人身份证（反面）！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>法人身份证（反面）</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                                        v-decorator="['sfzImg3', { rules: [{ required: true, message: '请上传法人手持身份证照片！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>法人手持身份证照片</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                            v-decorator="['yyImg', { rules: [{ required: true, message: '请上传营业执照！' }] }]"></j-image-upload>
                            <span class="margin-top-18"><span style="color: red">*</span>营业执照</span>
                        </a-col>
                        <a-col span="5" class="upload">
                            <j-image-upload class="avatar-uploader" text="上传"
                                            v-decorator="['tzhyImg']"></j-image-upload>
                            <span class="margin-top-18">特种行业许可证</span>
                        </a-col>
                    </a-row>

                </a-form-item>
            </a-col>
        </a-row>
        <a-divider />
        <a-row>
            <a-col :span="24" :style="{ textAlign: 'right' }">
                <a-button type="primary" @click="submit">确定</a-button>
            </a-col>
        </a-row>

    </a-form>
</template>

<script>
    import { Modal } from 'ant-design-vue';
    import { editAuthInfo} from "../../../api/hotel";

    export default {
        created() {
            // alert("这里获取当前缓存门店信息，照片信息");
            var info = JSON.parse(localStorage.getItem("storeInfo"));
            console.log(info);
            setTimeout(() => {
                this.form.setFieldsValue(
                    {
                        id: info.id,
                        yyImg: info.yyImg,
                        tzhyImg: info.tzhyImg,
                        legalPerson: info.legalPerson,
                        registeredAddress: info.registeredAddress,
                        businessTerm: info.businessTerm,
                        sfzImg1: info.sfzImg1,
                        sfzImg2: info.sfzImg2,
                        sfzImg3: info.sfzImg3,
                        sfzName: info.sfzName,
                        idCard: info.idCard,
                        ewmLogo:info.ewmLogo,
                        imgs:info.imgs
                    }
                )
            },100)
            // if (info.ewmLogo){
            //     this.model.ewm = info.ewmLogo
            // }
            // if (info.imgs){
            //     this.model.imgList = info.imgs;
            // }
        },
        data() {
            return {
                visible: false,
                formLayout: 'horizontal',
                form: this.$form.createForm(this, { certImg: null }),
                model: {
                    certImg: null,
                    id: 0,
                    ewm: null,
                    imgList: null
                }
            }
        },
        computed: {
            formItemLayout() {
                const { formLayout } = this;
                return formLayout === 'horizontal'
                    ? {
                        labelCol: { span: 4 },
                        wrapperCol: { span: 14 },
                    }
                    : {};
            },
        },
        methods: {
            warning() {
                this.$warning({
                    title: '手持身份证拍照要求',
                    // JSX support
                    content: (
                        <ul>
                        <li>免冠，建议未化妆，五官可见;</li>
                <li>身份证全部信息清晰无遮挡，否则将无法通过认证;</li>
                <li>完整露出手臂;</li>
                <li>以酒店门头招牌为背景图片;</li>
                <li>请勿进行任何软件处理;</li>
                <li>单张图片不超过5M，尺寸要求500（长）X412（宽）以上，支持jpg、png、gif;</li>
                </ul>
            ),
            });
            },
            submit() {
                // console.log(this.form.values.certImg)
                this.form.validateFields((err, values) => {
                    console.log(values)
                    if (!err) {
                        // values['ewmLogo'] = this.model.ewm
                        // values['imgs'] = this.model.imgList;
                        editAuthInfo(values).then(res=>{
                            if (res.code == 200){
                                this.$message.success('编辑成功')
                                localStorage.setItem("storeInfo", JSON.stringify(res.result))
                            }else{
                                this.$message.error(res.message)
                            }

                        })
                    }
                });
            }
        },
    }
</script>

<style scoped>
.upload{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    margin-top: 10px;
}
    .margin-top-18{
        margin-top: -18px;
    }
</style>
