<template>
    <div class="page">
        <div v-if="!form.org">
            <div class="tabs">
                <div class="text1">个人认证已完成</div>
                <div class="text2">
                    <span>账户实名认证后不能修改</span>
                </div>
            </div>
            <div class="info">
                <div class="text1">姓名</div>
                <div class="text2">{{ form.realName }}</div>
            </div>
            <div class="info">
                <div class="text1">手机号码</div>
                <div class="text2">{{ form.phone }}</div>
            </div>
            <div class="info">
                <div class="text1">电子邮箱</div>
                <div class="text2">{{ form.email }}</div>
            </div>
            <div class="info">
                <div class="text1">身份证号</div>
                <div class="text2">{{ form.idNo }}</div>
            </div>
            <div class="info">
                <div class="text1">身份证照片</div>
                <div class="text2">已上传</div>
            </div>
        </div>

        <div v-else>
            <div class="tabs">
                <div class="text1">企业认证已完成</div>
                <div class="text2">
                    <span>账户实名认证后不能修改</span>
                </div>
            </div>
            <div class="info">
                <div class="text1">法人姓名</div>
                <div class="text2">{{ form.realName }}</div>
            </div>
            <div class="info">
                <div class="text1">身份证照片</div>
                <div class="text2">已上传</div>
            </div>
            <div class="info">
                <div class="text1">企业名称</div>
                <div class="text2">{{ form.orgName }}</div>
            </div>
            <div class="info">
                <div class="text1">身份证号</div>
                <div class="text2" v-if="form.idNo">{{ idNo }}</div>
            </div>
            <div class="info">
                <div class="text1">身份证照片</div>
                <div class="text2">已上传</div>
            </div>
            <div class="info">
                <div class="text1">工商营业执照注册号/统一社会信用代码</div>
            </div>
            <div class="text4">{{ form.orgNo }}</div>

            <div class="info">
                <div class="text1">工商营业执照有效日期截止时间</div>
                <div class="text2" v-if="form.orgLicenseExpire">{{ form.orgLicenseExpire }}</div>
                <div class="text2 text3" v-else>长期</div>
            </div>
            <div class="info">
                <div class="text1">营业执照</div>
                <div class="text2">已上传</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {}
        };
    },
    computed: {
        idNo() {
            return this.form.idNo.slice(0, 4) + ' ********** ' + this.form.idNo.slice(14, 18);
        }
    },
    mounted() {
        this.$http
            .post(
                '/identityAuth/all',
                {
                    query: {
                        userId: this.$store.state.userInfo.id
                    }
                },
                { body: 'json' }
            )
            .then(res => {
                if (!res.empty) {
                    this.form = res.content[0];
                    console.log(this.form.org);
                }
            });
    }
};
</script>
<style lang="less" scoped>
.page {
    padding: 10px 16px 150px;
}
.tabs {
    padding-bottom: 12px;
    .text1 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
    }
    .text2 {
        font-size: 12px;
        color: @text3;
        line-height: 22px;
        margin-top: 4px;
    }
}
.text4 {
    font-size: 16px;
    color: @text3;
    line-height: 24px;
    margin-bottom: 10px;
}
.info {
    display: flex;
    align-items: center;
    height: 70px;
    position: relative;
    .text1 {
        font-size: 14px;
        font-weight: bold;
        color: @text3;
        line-height: 24px;
        min-width: 90px;
    }

    .text2 {
        font-size: 16px;
        color: @text3;
        line-height: 24px;
        &.text3 {
            margin-left: 20px;
        }
    }

    &:not(:last-child) {
        &::after {
            content: '';
            position: absolute;
            left: 90px;
            right: 0px;
            bottom: 0;
            height: 1px;
            background-color: #202122;
        }
    }
}
</style>
