<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 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="/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">刘烨烨</text>
					<text class="li-text-24 li-text-#b1bbc7">辽宁中金物业集团有限公司</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">1120.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 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 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">
					<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">
					<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>
	</view>
</template>

<script setup lang="ts">
	import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
	import { onLoad, onReachBottom, Uni } from "@dcloudio/uni-app"
	import { ref } from "vue"
	declare const uni : Uni
	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: 12,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/chuku.png'
		}, {
			title: '待配送',
			number: 11,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/peisong.png'
		}, {
			title: '待报修',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/baoxiu.png'
		}, {
			title: '待催缴',
			number: 0,
			icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/cuijiao.png'
		}
	])
	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/shezhi.png'
		},

	])
</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>