<template>
    <div class="content">
        <van-cell-group :border="false">
            <van-cell title="头像" is-link>
                <template #value>
                    <van-image
                        round
                        width="40"
                        height="40"
                        :src="userInfo.avatar || require('@assets/png-moren-touxiang.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="个性签名"
                :class="[userInfo.intro ? 'intro' : 'not']"
                @click="$router.push('/changeText?type=intro')"
                is-link
                :value="userInfo.intro || 'TA还什么都没有留下'"
            />
            <van-cell title="背景图片" is-link v-if="userInfo.minter">
                <template #value>
                    <van-image
                        round
                        width="40"
                        height="40"
                        :src="userInfo.bg || require('@assets/bg.png')"
                        fit="cover"
                    />
                    <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group :border="false">
            <van-cell title="手机号码" :value="showPhone" />
            <van-cell title="实名认证" is-link :value="userInfo.phone" @click.stop="goAuth">
                <template #value>
                    <div class="value-text" v-if="authStatus !== '已认证'">
                        <span>未认证</span>
                    </div>
                    <div class="value-text" v-else>
                        <img src="@assets/ok.png" alt="" />
                        <span>已认证</span>
                    </div>
                </template>
            </van-cell>
            <van-cell title="支付密码" is-link :value="userInfo.phone" @click="$router.push('/tradingPassword')">
                <template #value>
                    <div class="value-text" v-if="set">
                        <img src="@assets/ok.png" alt="" />
                        <span>已设置</span>
                    </div>
                    <div class="value-text" v-else>
                        <span>未设置</span>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="edit_return">
            <div class="edit_return_con" @click="logout">退出登录</div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ref } from 'vue';
import eruda from 'eruda';
export default {
    data() {
        return {
            set: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        showPhone() {
            if (this.userInfo.phone) {
                return this.userInfo.phone.slice(0, 3) + '****' + this.userInfo.phone.slice(-4);
            }
            return '';
        }
    },
    mounted() {
        this.$http
            .get('/user/tradeCodeStatus', {
                userId: this.userInfo.id
            })
            .then(res => {
                console.log(res);
                this.set = res.set;
            });
    },
    methods: {
        copy() {
            this.$copyText(this.userInfo.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        goAuth() {
            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
                this.$router.push('/waiting');
            } else if (this.authStatus === '未认证') {
                this.$router.push('/verified');
            }
        },
        chooseSex(val) {
            this.updateUser({ sex: val.name });
        },
        afterRead(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 500).then(img => {
                this.updateUser({ avatar: img, useCollectionPic: false }).then(res => {
                    this.$toast.clear();
                });
            });
        },
        afterRead2(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateFile(e, 2000).then(img => {
                this.updateUser({ bg: img }).then(res => {
                    this.$toast.clear();
                });
            });
        },
        showConsole() {
            this.clickNum++;
            if (this.clickNum >= 10) {
                localStorage.setItem('showConsole', new Date().getTime() + 60 * 60 * 1000);
                eruda.init();
                this.clickNum = 0;
                return;
            } else {
                if (this.timeout) {
                    clearTimeout(this.timeout);
                }
                this.timeout = setTimeout(() => {
                    this.clickNum = 0;
                }, 1000);
            }
        },
        logout() {
            this.$dialog
                .confirm({
                    message: '确认要退出登录吗?',
                    confirmButtonText: '退出登录'
                })
                .then(() => {
                    localStorage.removeItem('nineToken');
                    this.$router.go(-1);
                });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-cell--clickable:active {
    background: @bg;
}
.content {
    // margin-top: 44px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: @bg;
    padding: 20px 16px;
    box-sizing: border-box;
    .edit_data {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 30px;
    }
    .edit_data_divider {
        margin: 14px 0;
        height: 1px;
        background: #5f646f;
        opacity: 0.2;
    }
    .user_id {
        display: flex;
        justify-content: space-between;
        .user_id_title {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
        }
        .user_id_con {
            display: flex;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5f646f;
            line-height: 24px;
            .user_id_con_img {
                width: 18px;
                height: 20px;
                margin-left: 4px;
                padding-top: 2px;
                box-sizing: border-box;
            }
        }
    }
}
.avatar {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    bottom: 0;
}

.van-cell-group {
    background-color: @bg2;
    border-radius: 12px;
    overflow: hidden;
}
.van-cell-group + .van-cell-group {
    margin-top: 15px;
}
/deep/ .van-cell:after {
    border-color: #97979710;
}
/deep/ .van-cell__title {
    width: 100px;
}
/deep/ .van-cell {
    align-items: center;
    height: 66px;
    position: relative;
    padding: 0 16px;
    .van-cell__title {
        span {
            font-size: 16px;
            color: #ffffff;
        }
    }
    .van-cell__value {
        span {
            font-size: 16px;
            color: #ffffff66;
            line-height: 24px;
        }
    }
    .van-uploader__input {
        position: absolute;
        top: 7px;
        left: 45px;
    }
    &.not {
        .van-cell__value {
            span {
                font-size: 16px;
                color: #ffffff66;
                line-height: 24px;
            }
        }
    }
    &.intro {
        overflow: hidden;
        .van-cell__value {
            span {
                font-size: 13px;
                color: #ffffff;
                line-height: 24px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
.edit_return {
    width: 100%;
    height: 56px;
    // background: #15152d;
    // position: fixed;
    padding: 60px 0 20px;
    box-sizing: border-box;
    .edit_return_con {
        height: 50px;
        background: @bg2;
        border-radius: 8px;
        font-size: 16px;
        font-weight: bold;
        color: #86333a;
        line-height: 50px;
        text-align: center;
    }
}

.value-text {
    .flex();
    justify-content: flex-end;
    img {
        width: 16px;
        height: 16px;
    }
    span {
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        line-height: 22px;
        margin-left: 3px;
    }
}
</style>
