<template>
    <div class="setting">
        <div class="tabs">编辑资料</div>

        <van-cell-group>
            <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-cell
                title="昵称"
                @click="$router.push('/changeText?type=nickname')"
                is-link
                :value="userInfo.nickname"
            />
            <van-cell
                title="性别"
                :class="{ not: !userInfo.sex }"
                is-link
                :value="userInfo.sex || '未设置'"
                @click="show = true"
            />
            <van-cell
                title="简介"
                :class="[userInfo.intro ? 'intro' : 'not']"
                @click="$router.push('/changeText?type=intro')"
                is-link
                :value="userInfo.intro || '请添加介绍'"
            />
            <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-cell class="not" title="编码" :value="userInfo.id" />
        </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';
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    setup() {
        //性别
        const show = ref(false);
        const actions = [{ name: '男' }, { name: '女' }];

        return {
            show,
            actions
        };
    },
    methods: {
        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 }).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();
                });
            });
        }
    }
};
</script>

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

.tabs {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    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: #fff;
                line-height: 24px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>
