<template>
    <a-form ref="form" :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 17 }">
        <a-divider orientation="left">
            经营执照
            <span class="red-txt">(*必填)</span>
        </a-divider>
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item label="营业执照">
            <j-image-upload class="avatar-uploader" text="上传"
                v-decorator="['yyImg', { rules: [{ required: true, message: '请上传营业执照！' }] }]"></j-image-upload>
        </a-form-item>
        <a-form-item label="特种行业许可">
            <j-image-upload class="avatar-uploader" text="上传"
                v-decorator="['tzhyImg', { rules: [{ required: false, message: '请上传营业执照！' }] }]"></j-image-upload>
        </a-form-item>

        <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-divider orientation="left">
            个人证件
            <span class="red-txt">(*必填)</span>
            <a-tag color="orange">
                与酒店联系人信息保持一致
            </a-tag>
        </a-divider>
        <a-form-item label="身份证照(正面)">
            <j-image-upload class="avatar-uploader" text="上传"
                v-decorator="['sfzImg1', { rules: [{ required: true, message: '请上传身份证照(正面)！' }] }]"></j-image-upload>
        </a-form-item>

        <a-form-item label="身份证照(反面)">
            <j-image-upload class="avatar-uploader" text="上传"
                v-decorator="['sfzImg2', { rules: [{ required: true, message: '请上传身份证照(反面)！' }] }]"></j-image-upload>
        </a-form-item>

        <a-form-item label="手持身份证照">
            <j-image-upload class="avatar-uploader" text="上传"
                v-decorator="['sfzImg3', { rules: [{ required: true, message: '请上传手持身份证照！' }] }]"></j-image-upload>
            <a-button type="link" @click="warning">手持证件要求</a-button>
        </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-button type="primary" @click="submit">确定</a-button>


    </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
                }
            )
        },100)
    },
    data() {
        return {
            visible: false,
            formLayout: 'horizontal',
            form: this.$form.createForm(this, { certImg: null }),
            model: {
                certImg: 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) {
                    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>
.red-txt {
    color: red;
}
</style>
