<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
                <ion-title>{{ $t('user.profile') }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="setting">
                <van-cell-group :border="false">
                    <van-cell title="头像" is-link>
                        <template #value>
                            <van-image
                                radius="4"
                                width="36"
                                height="36"
                                :src="(user || {}).avatar || defaultAvatar"
                                fit="cover"
                            />

                            <van-uploader class="avatar" :after-read="afterRead" result-type="file" />
                        </template>
                        <template #right-icon>
                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                        </template>
                    </van-cell>
                    <van-cell
                        title="昵称"
                        @click="$router.push({ name: 'changeText', query: { type: 'nickname' } })"
                        is-link
                        :value="(user || {}).nickname"
                    >
                        <template #right-icon>
                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                        </template>
                    </van-cell>

                    <van-cell
                        title="性别"
                        :class="{ not: !(user || {}).sex }"
                        is-link
                        :value="(user || {}).sex || '未设置'"
                        @click="show = true"
                    >
                        <template #right-icon>
                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                        </template>
                    </van-cell>
                </van-cell-group>
                <!-- <van-cell-group :border="false">
                    <van-cell title="出生日期" value="请选择出生日期" is-link></van-cell>
                    <van-cell
                        title="所在城市"
                        :class="[cityName ? '' : 'not']"
                        :value="cityName || '请选择城市'"
                        is-link
                    >
                        <template #right-icon>
                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                        </template>
                    </van-cell>
                </van-cell-group> -->
                <van-cell-group :border="false">
                    <van-cell title="绑定手机号" class="not" :value="(user || {}).phone"> </van-cell>
                    <!-- <van-cell title="修改密码" is-link></van-cell> -->
                    <van-cell class="not" title="用户ID" :value="(user || {}).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="取消" @select="chooseSex" />

                <!-- <van-area title="选择地址" :area-list="areaList" :columns-num="2" /> -->
                <van-button style="margin-top: 20px" type="primary" block @click="onLogout">退出登录</van-button>
            </div>
        </ion-content>
    </ion-page>
</template>

<script>
import { mapState } from 'pinia'
import { ref, computed } from 'vue'
import eruda from 'eruda'
import defaultAvatar from '../assets/png_moren.png'
import { useUserStore } from '@/stores/user'
export default {
    data() {
        return {
            showTest: false
        }
    },
    computed: {
        ...mapState(useUserStore, ['user', 'logout'])
    },
    setup() {
        //性别
        const show = ref(false)
        const showConsole = ref(false)
        const actions = [{ name: '男' }, { name: '女' }]
        const userStore = useUserStore()

        const cityName = computed(() => {
            return (userStore.user || {}).country + ' ' + (userStore.user || {}).city
        })

        return {
            show,
            actions,
            clickNum: 0,
            timeout: null,
            defaultAvatar,
            userStore,
            cityName,
            showConsole
        }
    },
    methods: {
        chooseSex(val) {
            this.updateUser({ sex: val.name }).then(() => {
                this.show = false
            })
        },
        afterRead(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            })
            this.updateFile(e, 'avatar', 300).then(img => {
                this.updateUser({ avatar: img }).then(res => {
                    this.$toast.dismiss()
                })
            })
        },
        afterRead2(e) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            })
            this.updateFile(e, 'bg', 1200).then(img => {
                this.updateUser({ bg: img }).then(res => {
                    this.$toast.dismiss()
                })
            })
        },
        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)
            }
        },
        updateUser(info, sucess = true) {
            console.log(info)
            if (info) {
                return this.$http
                    .post(
                        '/user/my/update',
                        {
                            ...this.user,
                            ...info
                        },
                        { body: 'json' }
                    )
                    .then(() => {
                        return this.userStore.get()
                    })
                    .then(() => {
                        if (sucess) {
                            this.$toast.success('更新成功')
                        }
                        return Promise.resolve()
                    })
                    .catch(e => {
                        if (e) {
                            this.$toast.error(e.error)
                        }
                        return Promise.reject()
                    })
            }
        },
        updateFile(e, type, size = 1000) {
            const formData = new FormData()
            formData.append('file', e.file, e.file.name)
            formData.append('type', type)
            formData.append('width', size)
            formData.append('height', size)
            formData.append('size', size)
            return this.$http
                .post('/upload/file', formData, {
                    headers: { 'Content-Type': 'multipart/form-data' }
                })
                .then(res => {
                    return Promise.resolve(res)
                })
        },
        goReview() {
            window.location.href = 'https://www.raex.vip/saas/home?review=true'
        },
        goTest() {
            window.location.href = 'https://test.raex.vip/saas/home'
        },
        onLogout() {
            this.logout()
            this.$router.back()
        }
    }
}
</script>

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

.van-cell-group {
    border-radius: 4px;
    overflow: hidden;
}
.van-cell-group + .van-cell-group {
    margin-top: 12px;
}
.tabs {
    font-size: 20px;
    font-weight: bold;
    color: var(--ion-color-light-contrast);
    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;
    &:active {
        background-color: #f2f4f5;
    }
    .van-cell__title {
        span {
            font-weight: bold;
            font-size: 14px;
        }
    }

    .van-cell__value {
        span {
            font-size: 16px;
            color: var(--ion-color-light-contrast);
            line-height: 24px;
        }
    }

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

    &.intro {
        overflow: hidden;
        .van-cell__value {
            span {
                font-size: 13px;
                color: var(--ion-color-light-contrast);
                line-height: 24px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}

.right-icon {
    width: 24px;
    height: 24px;
}
</style>
