<template>
    <div class="content">
        <div class="edit_data">编辑资料</div>
        <van-cell-group :border="false">
            <van-cell title="头像" is-link>
                <template #value>
                    <van-image
                        round
                        width="36"
                        height="36"
                        :src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
                        fit="cover"
                    />
                    <van-uploader class="avatar" :after-read="afterRead" result-type="file" />
                </template>
            </van-cell>
            <van-divider class="edit_data_divider"/>
            <van-cell
                title="昵称"
                @click="$router.push('/changeText?type=nickname')"
                is-link
                :value="userInfo.nickname"
            />
            <van-divider class="edit_data_divider"/>
            <van-cell
                title="简介"
                :class="[userInfo.intro ? 'intro' : 'not']"
                @click="$router.push('/changeText?type=intro')"
                is-link
                :value="userInfo.intro || '介绍一下自己让大家认识你吧～'"
            />
            <van-divider class="edit_data_divider"/>
            <van-cell title="主页背景" class="not" is-link>
                <template #value>
                    <span> 更换背景</span>
                    <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
                </template>
            </van-cell>
            <van-divider class="edit_data_divider"/>
        </van-cell-group>
        <div class="user_id">
            <div class="user_id_title">用户ID</div>
            <div class="user_id_con">
                <div>{{userInfo.id}}</div>
                <img :src="require('@assets/copy_icon.png')" alt="" class="user_id_con_img" @click="copy">
            </div>
        </div>
    </div>
    <div class="edit_return">
        <div class="edit_return_con" @click="$router.go(-1)">返回</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ref } from 'vue';
import eruda from 'eruda';
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        copy() {
            this.$copyText(this.userInfo.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        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);
            }
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-cell--clickable:active{
    background: #0F0F27;
}
    .content{
        // margin-top: 44px;
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0F0F27;
        padding: 16px 12px 0px 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;
    }
    /deep/ .van-cell:after{
        border: none;
    }
    /deep/ .van-cell__title{
        width: 120px;
    }
    /deep/ .van-cell {
        align-items: center;
        height: 45px;
        position: relative;
        padding: 0;
        .van-cell__title {
            span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        .van-cell__value {
            span {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 24px;
            }
        }
        .van-uploader__input{
            position: absolute;
            top: 7px;
            left: 45px;
        }
        &.not {
            .van-cell__value {
                span {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #5F646F;
                    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;
        bottom: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        .edit_return_con{
            height: 40px;
            background: #29293F;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #939599;
            line-height: 40px;
            text-align: center;
        }
    }
</style>
