<template>
    <div class="setting">
        <van-cell-group :border="false">
            <van-cell title="头像" is-link>
                <template #value>
                    <van-image
                        radius="4"
                        width="38"
                        height="38"
                        :src="userInfo.avatar || require('@assets/img_default_photo.png')"
                        fit="cover"
                    />

                    <van-uploader class="avatar" :after-read="afterRead" result-type="file" />
                </template>
            </van-cell>
            <van-cell
                title="昵称"
                @click="$router.push('/changeText?type=nickname')"
                is-link
                :value="userInfo.nickname"
            />
            <!-- <van-cell title="实名认证" @click="goAuth" is-link :value="authStatus" /> -->
            <van-cell class="not" title="用户ID" :value="userInfo.id" @click="showConsoleEve" />
            <van-cell class="not" v-if="showConsole" title="审核版本" is-link @click="goReview" />
            <van-cell class="not" v-if="showConsole" title="测试app" is-link @click="goTest" />
        </van-cell-group>

        <van-action-sheet
            v-model:show="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="chooseSex"
        />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ref } from 'vue';
import eruda from 'eruda';
export default {
    computed: {
        ...mapState(['userInfo', 'showConsole'])
    },
    data() {
        return {
            showTest: false
        };
    },
    setup() {
        //性别
        const show = ref(false);
        const actions = [{ name: '男' }, { name: '女' }];

        return {
            show,
            actions,
            clickNum: 0,
            timeout: null
        };
    },
    methods: {
        chooseSex(val) {
            this.updateUser({ sex: val.name });
        },
        afterRead(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 'avatar', 300).then(img => {
                this.updateUser({ avatar: img, useCollectionPic: false }).then(res => {
                    this.$toast.clear();
                });
            });
        },
        afterRead2(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 'bg', 1200).then(img => {
                this.updateUser({ bg: img }).then(res => {
                    this.$toast.clear();
                });
            });
        },
        showConsoleEve() {
            this.clickNum++;
            if (this.clickNum >= 10) {
                localStorage.setItem('showConsole', new Date().getTime() + 60 * 60 * 1000);
                eruda.init();
                this.clickNum = 0;

                this.$store.commit('setShowConsole', true);
                return;
            } else {
                if (this.timeout) {
                    clearTimeout(this.timeout);
                }
                this.timeout = setTimeout(() => {
                    this.clickNum = 0;
                }, 1000);
            }
        },
        goReview() {
            window.location.href = 'https://www.raex.vip/9th/home?review=true';
        },
        goTest() {
            window.location.href = 'https://test.raex.vip/9th/home';
        },
        goAuth() {
            this.$router.push('/faceAuth');
            // if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
            //     this.$router.push('/waiting');
            // } else if (this.authStatus === '未认证') {
            //     if (this.faceAuth) {
            //         this.$router.push('/faceAuth');
            //     } else {
            //         this.$router.push('/verified');
            //     }
            // }
        }
    }
};
</script>

<style lang="less" scoped>
.setting {
    padding: 10px 0 100px;
}

.tabs {
    font-size: 20px;
    font-weight: bold;
    color: @text0;
    line-height: 30px;
    padding: 0 16px;
}

.avatar {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    bottom: 0;
}

/deep/ .van-cell {
    align-items: center;
    height: 70px;
    position: relative;
    .van-cell__title {
        span {
            font-weight: bold;
            font-size: 14px;
        }
    }

    .van-cell__value {
        span {
            font-size: 16px;
            color: #ffffff;
            line-height: 24px;
        }
    }

    &.not {
        .van-cell__value {
            span {
                font-size: 13px;
                color: @text3;
                line-height: 24px;
            }
        }
    }

    &.intro {
        overflow: hidden;
        .van-cell__value {
            span {
                font-size: 13px;
                color: @text0;
                line-height: 24px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>
