<template>
	<view class="li-mine-page">
		<SafeAreaTop />
		<view class="li-flex li-justify-between li-items-center li-w-94% li-mx-auto li-mt-60">
			<view @click="toPages({type:'userInfo'})" class="li-flex li-items-center">
				<view class="li-flex li-items-end li-mr-20">
					<image class="li-w-100 li-h-100 li-rd-50% border-4-white"
						:src="user_info?.avatar?user_info?.avatar:'/static/m_avatar.png'" mode="">
					</image>
				</view>
				<view class="li-flex li-flex-col">
					<text class="li-text-38 li-text-#000000 li-mb-2">{{user_info?.realname}}</text>
					<text class="li-text-24 li-text-#b1bbc7">{{user_info?.owner?.name}}</text>
				</view>
			</view>
			<image class="li-w-240 li-h-240" :src="mine_back" mode="aspectFill"></image>
		</view>
		<!-- <view class="li-w-70% li-ml-50 li-flex li-justify-between li-items-center">
			<view class="li-flex li-flex-col li-justify-center li-items-center" v-for="(item,index) in incomeList"
				:key="index">
				<text class="li-text-#b1bbc7 li-text-24">{{item.title}}</text>
				<text class="li-text-#010B3E li-text-34 li-mt-6 li-font-bold">{{item.number}}</text>
			</view>
		</view> -->
		<!-- card -->
		<view
			class="li-w-94% li-mx-auto li-flex li-justify-between li-items-center li-py-20 !li-rd-tl-30 !li-rd-tr-30 li-mt-20"
			:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}">
			<view class="li-text-#FFFFFF li-flex li-flex-col li-justify-start li-ml-50">
				<text class="li-text-#F8C883 li-text-24">账户余额</text>
				<view class="li-flex li-items-center li-pb-14">
					<text class="li-text-#F2F7FD li-font-bold li-text-32">0.00</text>
					<text class="li-text-#BBBDDA li-text-20 li-ml-4 li-pt-8">元</text>
				</view>
			</view>
			<view class="li-mr-50">
				<wd-button @click="withdrawal" custom-class="custom-shadow" size="small">&emsp;提现&emsp;</wd-button>
			</view>
		</view>
		<!-- 宫格 -->
		<view class="li-w-94% li-mx-auto li-grid-bg li-h-250 li-rd-20 li-mt-26">
			<view class="li-flex li-justify-between li-items-center li-pt-20 li-mx-20">
				<text class="li-text-#19171B li-text-32">待处理工单</text>
				<view @click="toPages({type:'all'})" class="li-text-#B2B2B2 li-flex li-items-center li-text-24">
					查看更多<text class="ri-arrow-right-s-line"></text></view>
			</view>
			<view class="li-flex li-justify-between li-items-center  li-mx-40 li-mt-30">
				<view class="li-flex li-flex-col li-justify-center li-items-center" v-for="(item,index) in workList"
					:key="index" @click="toPages({type:item.type})">
					<wd-badge :hidden="item.number > 0 ? false:true" :modelValue="item.number" top='5' right="-2"
						:max='99'>
						<image class="li-w-60 li-h-60" :src="item.icon" mode=""></image>
					</wd-badge>
					<text class="li-text-#706e70 li-text-26">{{item.title}}</text>
				</view>
			</view>
		</view>

		<view class="li-w-94% li-mx-auto li-mt-26 li-bg-white li-rd-20 li-pb-20">
			<view class="li-flex li-justify-between li-items-center li-pt-20 li-mx-20 li-pb-10">
				<text class="li-text-#19171B li-text-32">其他功能</text>
			</view>
			<wd-grid class="" :column="4" :clickable="true">
				<wd-grid-item use-icon-slot use-text-slot v-for="(item,index) in frequentlyList" :key="index"
					@itemclick="toPages({type:item.type})">
					<template #icon>
						<wd-badge :hidden="item.number > 0 ? false:true" :modelValue="item.number" top='5' right="-2"
							:max='99'>
							<image class="li-w-50 li-h-50" :src="item.icon" mode=""></image>
						</wd-badge>
					</template>
					<template #text>
						<text class="li-text-#706e70 li-text-24 li-mt-20">{{item.title}}</text>
					</template>
				</wd-grid-item>
			</wd-grid>
		</view>
		<!-- 顶部提示条（成功/失败消息提示） -->
		<wd-toast />
	</view>
</template>

<script setup lang="ts">
	import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
	import { onShow, onReachBottom, Uni } from "@dcloudio/uni-app"
	import { ref } from "vue"
	import { useToast } from '@/uni_modules/wot-design-uni'
	import { userInfo } from '@/api/login'
	const Toast = useToast()
	declare const uni : Uni

	const user_info = ref({})

	const mine_back = uni.$globalData?.RESOURCE_URL + 'mine/mine-back1.png'
	const card_back = uni.$globalData?.RESOURCE_URL + 'mine/card-back.png'

	const incomeList = ref([
		{
			title: '今日收益',
			number: '60.00'
		}, {
			title: '本月收益',
			number: '300.00'
		}, {
			title: '累计收益',
			number: '6890.00'
		}
	])
	const workList = ref([
		{
			title: '待入库',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/chuku.png',
			type: 'warehousing',
		}, {
			title: '待配送',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/peisong.png',
			type: 'my_order_F2',
		}, {
			title: '待报修',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/baoxiu.png',
			type: 'my_order_F6',
		}, {
			title: '待催缴',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/cuijiao.png',
			type: 'call'
		}
	])
	const frequentlyList = ref([
		// {
		// 	title: '投诉管理',
		// 	number: 0,
		// 	icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/tousu.png'
		// }, {
		// 	title: '巡检任务',
		// 	number: 11,
		// 	icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/xunjian.png'
		// }, {
		// 	title: '资产盘点',
		// 	number: 0,
		// 	icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/pandian.png'
		// }, {
		// 	title: '门禁申请',
		// 	number: 0,
		// 	icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/menjin.png'
		// },
		// {
		// 	title: '用户协议',
		// 	number: 0,
		// 	icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/pandian.png',
		// 	type: 'protocol'
		// },
		{
			title: '隐私政策',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/menjin.png',
			type: 'privacy'
		},
		{
			title: '设置',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/shezhi.png',
			type: 'setting'
		}
	])

	const withdrawal = () => {
		Toast.info('暂无余额')

	}



	const toPages = (item) => {
		switch (item.type) {
			case 'all':
				// 查看更多工单
				uni.navigateTo({
					url: '/pagesA/my_order/list'
				});
				break;
			case 'warehousing':
				// 入库
				uni.navigateTo({
					url: '/pagesA/warehousing/index'
				});
				break;
			case 'my_order_F2':
				// 待配送
				uni.navigateTo({
					url: '/pagesA/my_order/list?type=1&status=1'
				});
				break;
			case 'my_order_F6':
				// 待维修
				uni.navigateTo({
					url: '/pagesA/my_order/list?type=2&status=1'
				});
				break;
			case 'call':
				// 入库
				// uni.navigateTo({
				// 	url: '/pagesB/call/index'
				// });
				Toast.info('暂无缴费记录')
				break;
			case 'protocol':
				// 用户协议
				uni.navigateTo({
					url: '/pagesB/agreement/index?type=1'
				});
				break;
			case 'privacy':
				// 隐私政策
				uni.navigateTo({
					url: '/pagesB/agreement/index?type=2'
				});
				break;
			case 'setting':
				// 隐私政策
				uni.navigateTo({
					url: '/pagesB/setting/index'
				});
				break;
			case 'userInfo':
				// 隐私政策
				uni.navigateTo({
					url: '/pagesB/setting/editInfo'
				});
				break;
			default:
				break;
		}
	}

	const getUserInfo = async () => {
		const res = await userInfo()
		user_info.value = res.data
	}


	onShow(async () => {
		// const userInfo = await uni.$store.state.userInfos
		// userInfo.realname && (user_info.value.realname = userInfo.realname)
		// userInfo.avatar && (user_info.value.avatar = userInfo.avatar)
		// userInfo.owner.name && (user_info.value.owner.name = userInfo.owner.name)

		getUserInfo()
	})
</script>

<style lang="scss">
	.li-mine-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 1.0) 0%,
				rgba(197, 224, 253, 0.8) 20%,
				rgba(248, 248, 248, 1.0) 40%,
				rgba(248, 248, 248, 1.0) 60%,
				rgba(242, 243, 247, 1.0) 80%,
				rgba(242, 243, 247, 1.0) 100%);
		background-attachment: fixed;
	}

	.li-grid-bg {
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 0.2) 0%,
				rgba(197, 224, 253, 0.1) 10%,
				rgba(255, 255, 255, 1.0) 40%,
				rgba(255, 255, 255, 1.0) 60%,
				rgba(255, 255, 255, 1.0) 80%,
				rgba(255, 255, 255, 1.0) 100%);
	}

	.custom-shadow {
		color: #764914 !important;
		background: linear-gradient(to right, #f9dbb7, #f9c580) !important;
		box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	}

	::v-deep .wd-badge__content {
		border: none !important;
	}
</style>