<template>
    <view class="personal-info">
        <u-cell-group :border="false">
            <u-cell
                v-for="(group, index) in groupList"
                :key="index"
                :title="group.label"
                :value="group.value"
                size="large"
                :border="group.border"
            >
                <template #value>
                    <view v-if="group.slot">
                        <button
                            class="update-avatar"
                            open-type="chooseAvatar"
                            plain
                            v-if="group.key === 'avatar'"
                            @chooseavatar="handleChooseAvatar"
                        >
                            <image
                                :src="userInfo.avatar"
                                @error="imageError"
                                class="image w-full h-full rounded-[50%]"
                            />
                            <TIcon name="icon-right" :size="24" color="#7c7e82" />
                        </button>
                        <view class="update-mobile" v-else-if="group.key === 'mobile'">
                            <text>{{ group.value }}</text>
                            <!-- <u-button
                                open-type="getPhoneNumber"
                                type="primary"
                                class="btn"
                                plain
                                size="mini"
                                text="更换手机号"
                                @getphonenumber="handleUpdateMobile"
                            /> -->
                        </view>
                    </view>
                    <view v-else class="flex-1">{{ group.value }}</view>
                </template>
            </u-cell>
        </u-cell-group>
    </view>
</template>

<script setup lang="ts">
import { uploadFile } from '@/utils/util'
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { technicalMap } from '@/enums/businessEnums'
import cache from '@/utils/cache'
import { ROLEINDEX } from '@/enums/cacheEnums'
import defaultAvatar from '@/static/images/avatar.jpg'

const userStore = useUserStore()
let { userInfo } = userStore

const roles = computed(() => {
    const roleArr = userInfo.roles
    return roleArr[cache.get(ROLEINDEX) || 0]?.name
})
const areaValue = computed(() => {
    return `${userInfo.province || ''}${userInfo.city || ''}${userInfo.district || ''}`
})

// const showBorder = computed(() => (userInfo.roles.find(i => i.id == 6 || i.id == 7) ? true : false))

const groupList = ref([
    { label: '头像', value: '', slot: true, key: 'avatar' },
    { label: '名称', value: userInfo.nickname },
    { label: '账号', value: userInfo.username },
    { label: '电话', value: userInfo.mobile, slot: true, key: 'mobile' },
    { label: '角色', value: roles.value, border: true }
])

// 维修员和检修员添加所属区域和技术等级字段
// 客户联系人需要添加客户名称，所属区域字段
// 维修主管需要添加管辖工厂字段
const addField = () => {
    // 维修员、检修员
    const staff = userInfo.roles.find(i => i.id == 6 || i.id == 7)
    if (staff) {
        groupList.value.push(
            { label: '所属区域', value: areaValue.value },
            { label: '技术等级', value: technicalMap[userInfo.technicalGrade], border: false }
        )
    }
    // 维修员
    const repairMan = userInfo.roles.find(i => i.id == 7)
    if (repairMan) {
        groupList.value[groupList.value.length - 1].border = true
        groupList.value.push({ label: '擅长技能', value: userInfo.goodSkill, border: false })
    }
    // 维修主管
    // const manager = userInfo.roles.find(i => i.id == 10)
    // if (manager) {
    //     groupList.value.push({ label: '管辖工厂', value: userInfo.plantName, border: false })
    // }

    // 客户客服、客户主管
    const client = userInfo.roles.find(i => i.id == 1 || i.id == 2)
    if (client) {
        groupList.value.push(
            { label: '所属区域', value: areaValue.value },
            { label: '客户名称', value: userInfo.clientName, border: false }
        )
    }
}
addField()

// 更换手机号
const handleUpdateMobile = e => {
    const { code } = e.detail
}
const handleChooseAvatar = e => {
    const { avatarUrl } = e.detail
    if (avatarUrl) {
        uploadAvatar(avatarUrl)
    }
}
const uploadAvatar = (path: string) => {
    uni.showLoading({
        title: '正在上传中...',
        mask: true
    })
    uploadFile(path)
        .then(res => {
            uni.hideLoading()
            setUserInfo(res.path)
        })
        .catch(() => {
            uni.hideLoading()
            uni.$u.toast('上传失败')
        })
}
// 修改用户信息
const setUserInfo = async (value: string): Promise<void> => {}
const imageError = () => {
    userInfo.avatar = defaultAvatar
}

onMounted(async () => {
    await userStore.getUser()
    userInfo = userStore.userInfo
})
</script>

<style lang="scss" scoped>
.update-avatar {
    @include flex-center;
    line-height: 64rpx;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    .image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 999px;
    }
    :deep(.u-button) {
        border: none;
        padding: 0;
    }
}
.update-mobile {
    @include flex-align;
    gap: 12rpx;
    .btn {
        color: $blue-1;
        font-size: 24rpx;
        border-radius: 8rpx;
    }
}
</style>
