<template>
	<view class="px-44rpx">
		<view class="flex items-center pt-80rpx pl-16rpx" @click="handleLogin">
			<view class="overflow-hidden rounded-full w-20 h-20">
				<image
					:src="userInfo.avatar ? userInfo.avatar : defaultAvatar"
					alt=""
					class="w-full h-full"
				/>
			</view>

			<view class="ml-4">
				<block v-if="isLogin">
					<view class="text-34rpx"> {{ userInfo.nickName }}</view>
					<view class="text-24rpx text-primary-500 mt-20rpx flex items-center">
						<image
							class="w-28rpx mr-4rpx"
							:src="$assets('/personal/edit.jpg')"
							mode="widthFix"
						></image>
						<text>编辑资料</text></view
					>
				</block>
				<view v-else claas="text-34rpx text-primary">登录</view>
			</view>
		</view>
		<view class="flex items-center pl-16rpx my-40rpx">
			<view class="flex flex-1 flex-col">
				<text class="text-34rpx">10</text>
				<text class="text-28rpx text-#999">累计接单</text>
			</view>
			<view class="flex flex-1 flex-col">
				<text class="text-34rpx">10</text>
				<text class="text-28rpx text-#999">累计收入</text>
			</view>
			<view class="flex flex-1 flex-col">
				<text class="text-34rpx">10</text>
				<text class="text-28rpx text-#999">可提现</text>
			</view>
			<view
				@click="showWithdraw = true"
				class="w-120rpx text-primary-500 text-30rpx"
			>
				立即提现
			</view>
		</view>
		<view class="relative">
			<view
				v-for="(item, index) of menuList"
				:key="index"
				class="flex items-center py-4"
				@click="handleInfo(item)"
			>
				<!-- <view class="w-10 flex-none truncate text-primary-500 text-2xl">
					<via-icon :name="item.icon"></via-icon>
				</view> -->
				<view class="flex-1 flex items-center">
					<image :src="$assets(item.icon)" alt="" class="w-42rpx h-42rpx" />
					<text class="ml-40rpx">{{ item.text }}</text>
				</view>
				<view class="flex-none w-10 text-right text-gray-500">
					<via-icon name="arrow-right-bold"></via-icon>
				</view>
			</view>
			<button
				class="absolute bottom-224rpx bg-transparent border-transparent z-2 w-660rpx h-90rpx"
				open-type="contact"
			></button>
		</view>

		<u-modal
			v-model:show="showWithdraw"
			title="提现"
			@cancel="showWithdraw = false"
			@confirm="handleWithdraw"
			confirmText="立即提现"
			confirmColor="#FF8CA6"
			:show-cancel-button="true"
			:zoom="false"
			closeOnClickOverlay
		>
			<view class="w-full">
				<view class="flex items-center justify-between mb-36rpx">
					<view class="">可提现余额：999元</view>
					<view
						class="flex justify-center items-center border-primary-500 border-1px w-150rpx h-54rpx rounded-12rpx text-primary"
						>全部提现</view
					>
				</view>
				<view class="bg-#f2f2f2 rounded-15rpx h-80rpx">
					<u-input
						:customStyle="{ height: '80rpx' }"
						v-model="amount"
						type="number"
						placeholder="请输入金额"
						border="0"
						fontSize="28rpx"
						:focus="false"
					>
						<template #prefix>
							<u-text
								text="金额"
								margin="0 5px 0 0"
								type="tips"
								color="#000000"
							></u-text>
						</template>
					</u-input>
				</view>
				<view class="mt-12rpx text-24rpx text-#c1c1c1">
					提现手续费每笔X元
				</view>
			</view>
		</u-modal>
	</view>
	<tabbar />
</template>

<script setup>
import defaultAvatar from '@/static/avatar.png'
import { onShow } from '@dcloudio/uni-app'

const instance = getCurrentInstance()
const { $api, $store, $Router, $loading, $dialog, $toast } = instance.proxy

const userStore = $store.user
const isLogin = computed(() => !!$store.user.token)
const userInfo = computed(() => $store.user.userInfo)
const showWithdraw = ref(false)
const amount = ref('')
const list = {
	simple: [
		{
			icon: '/personal/shouru.png',
			text: '订单管理',
			path: '/order'
		},
		{
			icon: '/personal/qiehuan.png',
			text: '成为陪诊师',
			path: '/pages/other/switch'
		}
	],
	common: [
		{
			icon: '/personal/shouru.png',
			text: '收入详情',
			path: '/pages/other/income-details'
		},
		{
			icon: '/personal/qiehuan.png',
			text: '切换身份',
			path: ''
		}
	]
}
const listConst = [
	// {
	// 	icon: '/personal/person.png',
	// 	text: '就诊人管理',
	// 	path: ''
	// },
	{
		icon: '/personal/lianxi.png',
		text: '联系客服',
		path: '/pages/contact/index'
	},
	{
		icon: '/personal/guanyu.png',
		text: '关于我们',
		path: '/pages/contact/index'
	},
	{
		icon: '/personal/lianxi.png',
		text: '帮助中心',
		path: '/pages/contact/index'
	}
]
const menuList = ref([])
watchEffect(() => {
	const { roleName = 'simple', roleList = [] } = userInfo.value
	list.simple[1].text = roleList.includes('common') ? '切换身份' : '成为陪诊师'
	menuList.value = [...list[roleName], ...listConst]
})

const handleInfo = async (item) => {
	const { roleName, roleList = [] } = userInfo.value
	if (
		!item.path ||
		(item.path === '/pages/other/switch' && roleList.includes('common'))
	) {
		try {
			await $dialog(
				`确认切换回${roleName === 'simple' ? '陪诊师' : '普通用户'}?`,
				{
					showCancelButton: true,
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					confirmColor: '#FF8CA6'
				}
			)
			const { success, wxUser = {} } = await $api.checkRole({ roleName })
			if (success) {
				userStore.setUserInfo(wxUser)
				$toast('身份切换成功！')
			}
		} catch (error) {}
		return
	}
	$Router.push({
		path: item.path,
		query: item.query || {}
	})
}
// 提现
const handleWithdraw = () => {}

const handleLogin = async () => {
	if (!isLogin.value) {
		$loading(true)
		userStore.login().then((user) => {
			$loading(false)
			!user.id
				? $Router.push({
						path: '/pages/other/edit-userinfo'
				  })
				: userStore.setUserInfo(user)
		})
	} else
		$Router.push({
			path: '/pages/other/edit-userinfo'
		})
}

const getUserInfo = async () => {
	if (isLogin.value) {
		const res = await $api.getUser()
		if (res.success) {
			userStore.setUserInfo(res.wxUser || {})
		} else userStore.logout()
	} else userStore.logout()
}

onShow(() => {
	getUserInfo()
})
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.button-hover {
	background-color: transparent;
}
</style>
