<template>
    <div class="login">
        <div class="tabs">
            <div class="text1">企业认证</div>
            <div class="text2">
                <span>账户实名认证后不能修改，</span>
                <span>请使用本人身份信息完成认证</span>
            </div>
        </div>

        <van-form @submit="submit" class="form" @failed="failed" ref="form">
            <van-field
                label="法人姓名"
                name="法人姓名"
                placeholder="请输入法人姓名"
                v-model="form.realName"
                :rules="[{ required: true, message: '请输入法人姓名' }]"
            >
            </van-field>

            <van-field
                label="身份证号"
                name="身份证号"
                placeholder="请输入身份证号"
                v-model="form.idNo"
                :rules="[
                    { required: true, message: '请输入身份证号' },
                    {
                        pattern: IDPattern,
                        message: '身份证号格式错误'
                    }
                ]"
            >
            </van-field>

            <van-field
                label="身份证照片（正面照）"
                name="正面照"
                v-model="form.idFront"
                class="img"
                :rules="[
                    {
                        validator: val => {
                            return !!this.form.idFront;
                        },
                        message: '请上传身份证正面照片'
                    }
                ]"
            >
                <template #input>
                    <div class="img-content">
                        <van-image :src="form.idFront || require('@assets/svgs/bg-png.svg')" fit="cover" radius="20" />
                        <van-uploader name="idFront" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field>
            <van-field
                label="身份证照片（反面照）"
                name="反面照"
                v-model="form.idBack"
                class="img"
                :rules="[
                    {
                        validator: val => {
                            return !!this.form.idBack;
                        },
                        message: '请上传身份证反面照片'
                    }
                ]"
            >
                <template #input>
                    <div class="img-content">
                        <van-image :src="form.idBack || require('@assets/svgs/bg-png.svg')" fit="cover" radius="20" />
                        <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field>
            <van-field
                label="企业名称"
                name="企业名称"
                placeholder="请输入企业名称"
                v-model="form.orgName"
                :rules="[{ required: true, message: '请输入企业名称' }]"
            >
            </van-field>
            <!-- <van-field class="name" label="工商营业执照注册号/统一社会信用代码"> </van-field> -->
            <div class="name">工商营业执照注册号/统一社会信用代码</div>
            <van-field
                placeholder="请输入"
                v-model="form.orgNo"
                :rules="[{ required: true, min: 18, max: 18, message: '请输入18位统一社会信用代码', trigger: 'blur' }]"
            >
            </van-field>
            <div class="time">
                <!-- <van-field label="工商营业执照有效日期截止时间"> </van-field> -->
                <div class="name1">工商营业执照有效日期截止时间</div>
                <van-checkbox v-model="form.checked" @change="change">长期</van-checkbox>
            </div>
            <div class="name3">证照有效截止日期需大于60天，如证照上日期为长期或无， 请勾选长期</div>
            <van-field
                label="例：2034-06-17"
                readonly
                is-link
                @click="showPopup"
                placeholder="请选择"
                v-model="form.orgLicenseExpire"
                input-align="right"
                label-width="200"
                label-class="sub"
                :rules="[
                    {
                        orgLicenseExpire: [
                            {
                                required: true,
                                validator: (rule, value, callback) => {
                                    if (!this.form.checked) {
                                        if (!this.form.orgLicenseExpire) {
                                            callback(new Error('请选择日期截止方式'));
                                        } else {
                                            callback();
                                        }
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ]
                    }
                ]"
            >
            </van-field>
            <div v-if="!show2">
                <van-popup v-model:show="show" position="bottom">
                    <van-datetime-picker
                        @change="Time"
                        v-model="form.orgLicenseExpire"
                        type="date"
                        title="选择年月日"
                        placeholder="工商营业执照注册号/统一社会信用代码"
                        :min-date="minDate"
                        :max-date="maxDate"
                        @confirm="confirm"
                    />
                </van-popup>
            </div>
            <van-field
                label="营业执照"
                v-model="form.orgLicense"
                class="img"
                :rules="[
                    {
                        validator: val => {
                            return !!this.form.orgLicense;
                        },
                        message: '请上传营业执照'
                    }
                ]"
            >
                <template #input>
                    <div class="img-content">
                        <van-image
                            :src="form.orgLicense || require('@assets/svgs/bg-png.svg')"
                            fit="cover"
                            radius="20"
                        />
                        <van-uploader name="orgLicense" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field>
            <div class="button" ref="btn">
                <van-button
                    round
                    block
                    @click="submit"
                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
                    class="sure"
                >
                    提交审核
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    mixins: [phone],
    data() {
        return {
            active: 'phone',
            emailPattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
            IDPattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            form: {
                realName: '',
                checked: false,
                orgLicenseExpire: '',
                orgName: '',
                orgNo: '',
                idNo: '',
                idFront: '',
                idBack: '',
                status: '',
                orgLicense: ''
            },
            btn: null,
            show2: false,
            show: false
        };
    },
    mounted() {
        this.btn = this.$refs.btn;
    },
    methods: {
        Time() {
            if (this.form.orgLicenseExpire) {
                this.form.checked = false;
            }
        },
        change() {
            if (this.form.checked == true) {
                this.show2 = true;
                this.form.orgLicenseExpire = undefined;
            } else {
                this.show2 = false;
                this.show = false;
            }
            this.$forceUpdate();
        },
        showPopup() {
            this.show = true;
        },
        confirm(value) {
            var date = new Date(value);
            date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            this.form.orgLicenseExpire = date;
            this.show = false;
        },
        submit() {
            this.$refs.form
                .validate()
                .then(() => {
                    let form = { ...this.form };
                    delete form.checked;
                    form.userId = this.userInfo.id;
                    form.status = 'PENDING';
                    form.org = true;
                    // console.log(form);
                    this.$http
                        .post('/identityAuth/apply', {
                            ...form
                        })
                        .then(() => {
                            this.$router.replace('/Waiting');
                        });
                })
                .catch(() => {
                    this.bs.value.refresh();
                });
        },
        afterRead(file, e) {
            this.updateFile(file, 'id', 1000).then(img => {
                this.form[e.name] = img;
            });
        },
        failed() {
            console.log('验证失败');
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    padding: 10px 16px 150px;
}
/deep/ .van-cell__right-icon {
    margin-top: 23px;
}
.tabs {
    padding-bottom: 12px;
    .text1 {
        font-size: 20px;
        font-weight: bold;
        color: @text0;
        line-height: 30px;
    }
    .text2 {
        font-size: 12px;
        color: @text3;
        line-height: 22px;
        margin-top: 4px;
        span {
            &:last-child {
                color: @prim;
            }
        }
    }
}
.time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // height: 95px;
    margin-top: 20px;
}
.name3 {
    font-size: @font1;
    font-weight: 400;
    color: @text3;
    line-height: 24px;
    margin-top: 4px;
}
.form {
    .name {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
        margin-top: 20px;
    }
}
.van-cell::after {
    border-bottom-color: @tabBorder;
}

.icon {
    display: block;
    margin-top: 12px;
}
/deep/ .van-form {
    // margin-top: 28px;
    .van-cell {
        padding: 0px 0;

        .van-field__left-icon {
            margin-right: 8px;
        }
    }

    .van-field__body {
        height: 70px;
        align-items: center;
    }

    .van-field__label {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
        margin-top: 25px;
    }
}
.button {
    margin-top: 60px;

    .del {
        margin-top: 20px;
        border-color: @text0;
    }

    .sure {
        color: @bg !important;
    }

    .van-button {
        font-weight: bold;
    }
}

.sub-code {
    padding-right: 0;
    border-width: 0;
}

.img {
    display: flex;
    padding: 20px 0 10px;

    .img-label {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 20px;
        margin: 5px 12px 5px 0;
        min-width: 86px;
    }
}

.img-content {
    position: relative;
    /deep/.van-uploader {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        .van-uploader__upload {
            width: 160px;
            height: 160px;
            background-color: @bg;
        }
    }
}

.button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @bg2;
    padding: 6px 42px;
    z-index: 20;
    .bottom(6px);
    border-top: 1px solid @tabBorder;
}

/deep/.img {
    &.van-cell {
        margin-top: 20px;
        .van-field__body {
            height: 160px;
        }
        .van-field__label {
            margin-top: 5px;
        }
    }
}
/deep/.sub {
    color: @text3!important;
    font-weight: normal !important;
    font-size: @font1 !important;
}
/deep/.van-checkbox__icon--checked .van-icon {
    border-width: 0;
    background: linear-gradient(to right, @prim, @warn);
}
/deep/.van-field__control {
    font-size: @font1 !important;
    color: @text0;
}
</style>
