<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">{{ orderTodayIncome.count || 0 }}</text>
				<text class="text-28rpx text-#999">累计接单</text>
			</view>
			<view class="flex flex-1 flex-col">
				<text class="text-34rpx">{{ orderTodayIncome.doctorPrice || 0 }}</text>
				<text class="text-28rpx text-#999">累计收入</text>
			</view>
			<view class="flex flex-1 flex-col">
				<text class="text-34rpx">{{ orderTodayIncome.cashPrice || 0 }}</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=""
						>可提现余额：{{ orderTodayIncome.cashPrice || 0 }}元</view
					>
					<view
						@click="cashModel.price = orderTodayIncome.cashPrice || 0"
						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">
					<view
						v-for="item in cashItemList"
						:key="item.key"
						class="bg-#f2f2f2 rounded-15rpx h-80rpx overflow-hidden"
					>
						<u-input
							:customStyle="{ height: '80rpx' }"
							v-model="cashModel[item.key]"
							:type="item.key === 'price' ? 'number' : 'text'"
							:placeholder="`请输入${item.key ==='wxNumber' ? '收款账户' : item.text}`"
							fontSize="28rpx"
              border="bottom"
							:focus="false"
						>
							<!-- :border="item.key !== 'price' ? 'bottom' : 'none'" -->
							<template #prefix>
								<u-text
									:text="item.text"
									:margin="item.key ==='price' ? '0 5px':'0 5px 0 0'"
									type="tips"
									color="#000000"
								></u-text>
							</template>
						</u-input>
					</view>
				</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, $u } = instance.proxy

const userStore = $store.user
const isLogin = computed(() => !!$store.user.token)
const userInfo = computed(() => $store.user.userInfo)
const showWithdraw = ref(false)
const orderTodayIncome = 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([])
const cashModel = ref({
	name: userInfo.value.nickName,
	wxNumber: '',
	aliNumber: '',
	price: ''
})
// 姓名 微信号 支付宝号 金额
const cashItemList = [
	{
		text: '姓名',
		key: 'name',
		val: ''
	},
	{
		text: '收款账户',
		key: 'wxNumber',
		val: ''
	},
	// {
	// 	text: '支付宝号',
	// 	key: 'aliNumber',
	// 	val: ''
	// },
	{
		text: '金额',
		key: 'price',
		val: ''
	}
]

watchEffect(() => {
	const { roleName, roleList = [] } = userInfo.value
	list.simple[1].text = roleList.includes('common') ? '切换身份' : '成为陪诊师'
	menuList.value = [...list[roleName || 'simple'], ...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 getOrderTodayIncome = () => {
	$api.orderTodayIncome({ isToday: 1 }).then(({ data = {} }) => {
		orderTodayIncome.value = data
	})
}
// 提现
const handleWithdraw = async () => {
	console.log(cashModel.value)
	// return
	if (!cashModel.value.price) {
		return $toast('请输入提现金额!')
	}
	if (!cashModel.value.name.trim()) {
		return $toast('请输入姓名!')
	}
	if (cashModel.value.price > orderTodayIncome.value.cashPrice) {
		return $toast('提现金额不能大于可提现余额!', { type: 'error' })
	}
	if (cashModel.value.aliNumber?.trim() || cashModel.value.wxNumber?.trim()) {
		const res = await $api.cashSubmit(cashModel.value)
		if (res.success) {
			$toast('申请提现成功！', {
				icon: 'success',
				duration: 2000
			}).then(() => {
				showWithdraw.value = false
				getOrderTodayIncome()
			})
		}
	} else {
		return $toast('请输入收款账号!')
	}
}

const handleLogin = async () => {
	if (!isLogin.value) {
		$loading(true)
		userStore.login().then((user) => {
			$loading(false)
			!user.nickName
				? $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 || {})
			if (res.wxUser?.roleName === 'common') {
				getOrderTodayIncome()
			}
		}
	} else userStore.logout()
}

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

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