<template>
    <div class="container">
        <div class="top">
            <div class="title">实名认证请选择</div>
            <div class="name">账户实名认证后不能修改，<span>请使用本人身份信息完成认证</span></div>
        </div>
        <!-- <div class="box" @click="$router.push('/verified')">
            <img class="img" :src="require(`@assets/renzheng-icon-geren.png`)" alt="" />
            <div class="text">个人认证</div>
            <div class="btn">下一步</div>
        </div>
        <div class="box box1" @click="$router.push('/verifiedSucs')">
            <img
                class="img"
                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-11-10-16-35hyCazZgd.png"
                alt=""
            />
            <div class="text">企业认证</div>
            <div class="btn">下一步</div>
        </div> -->

        <div class="auth-list">
            <div
                class="auth"
                :class="{ active: chooseIndex === index }"
                v-for="(item, index) in authOptions"
                :key="index"
                @click="chooseIndex = index"
            >
                <img :src="chooseIndex === index ? item.imgPre : item.img" alt="" class="img1" />
                <span class="text1">{{ item.title }}</span>
                <img v-if="chooseIndex === index" src="@assets/icon_gouxuan_next.png" alt="" class="img2" />
                <img v-else src="@assets/icon_gouxuan.png" alt="" class="img2" />
            </div>
        </div>

        <div class="btn-content">
            <van-button type="primary" block round @click="next">下一步</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chooseIndex: 0,
            authOptions: [
                {
                    img: require(`@assets/renzheng-icon-geren.png`),
                    imgPre: require(`@assets/renzheng-icon-geren-pre.png`),
                    title: '个人认证'
                },
                {
                    img: require(`@assets/renzheng-icon-qiye.png`),
                    imgPre: require(`@assets/renzheng-icon-qiye-pre.png`),
                    title: '企业认证'
                }
            ]
        };
    },
    computed: {},
    methods: {
        next() {
            if (this.chooseIndex) {
                this.$router.push('/verifiedSucs');
            } else {
                this.$router.push('/verified');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: @bg3;
    .btn {
        width: 80px;
        height: 34px;
        background: linear-gradient(135deg, @prim 0%, @warn 100%);
        border-radius: 22px;
        color: #333230;
        font-size: 16px;
        text-align: center;
        line-height: 34px;
    }
    .title {
        font-size: 20px;
        color: @text0;
        line-height: 30px;
        font-weight: bold;
    }
    .name {
        font-size: 12px;
        font-weight: 400;
        color: @text3;
        line-height: 22px;
        margin-top: 4px;
    }
    span {
        color: @prim;
    }
    .box {
        display: flex;
        align-items: center;
        // justify-content: center;
        margin: 0 auto;
        width: 303px;
        .line();
        height: 88px;
        background: #1f2021;
        .img {
            width: 38px;
            height: 38px;
            margin-left: 30px;
        }
        &.box1 {
            margin-top: 30px;
        }
        .text {
            font-size: 16px;
            font-weight: bold;
            margin: 0 50px 0 16px;
            color: @text0;
            line-height: 24px;
        }
    }
}

.top {
    background-color: @bg;
    padding: 10px 16px 12px;
}

.auth-list {
    padding: 48px 30px 60px;
    .auth {
        .flex();
        position: relative;
        background: @bg;
        height: 88px;
        padding: 0 30px;
        border-radius: 8px;
        .img1 {
            width: 38px;
            height: 38px;
        }
        .text1 {
            font-size: @font2;
            color: @text3;
            line-height: 24px;
            margin-left: 16px;
        }
        .img2 {
            width: 32px;
            height: 32px;
            position: absolute;
            right: -16px;
            top: 50%;
            transform: translateY(-50%);
        }
        * {
            z-index: 2;
        }

        &.active {
            background: linear-gradient(135deg, @prim, @warn);
            .text1 {
                color: @text0;
            }
        }

        &::after {
            content: '';
            position: absolute;
            left: 1px;
            top: 1px;
            right: 1px;
            bottom: 1px;
            background: @bg;
            z-index: 0;
            border-radius: 8px;
        }
    }
    .auth + .auth {
        margin-top: 30px;
    }
}
.btn-content {
    margin: 0 48px;
    .van-button {
        background: linear-gradient(135deg, @prim 0%, @warn 100%);
        color: @btnText;
        font-size: @font2;
        border-width: 0px;
    }
}
</style>
