<template>
	<view class="li-home-page">
		<wd-navbar :bordered="false" custom-style="background-color: #F6F7FB !important;padding-bottom:10rpx"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-25">
					<wd-search disabled placeholderStyle="color:#d9d9d9" v-model="keyword" hide-cancel placeholder-left
						placeholder="关键字搜索"></wd-search>
				</view>
			</template>
			<!-- #ifndef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-25">
					<text class="ri-qr-scan-2-line li-text-48"></text>
					<view class="li-ml-25 pt-10">
						<wd-badge :hidden="messageCount > 0 ? false:true" :modelValue="messageCount" top='15' right="-4"
							:max='99'>
							<text class="ri-notification-line li-text-48"></text>
						</wd-badge>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</wd-navbar>
		<!-- 轮播图 -->
		<view class="li-w-88% li-mx-auto li-mt-10">
			<wd-swiper :interval='8000' height='130' :list="swiperList" autoplay v-model:current="current"
				:indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
		</view>
		<!-- 瓷片 -->
		<view class="li-flex li-justify-around li-mt-30 li-px-40 ">
			<view v-for="(item,index) in porcelainList" :key="index" @click="toPages({type:item.type})"
				:style="{backgroundImage:`url(${item.image})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}"
				class="li-w-310 li-h-160 li-flex li-flex-col justify-center ">
				<text class="li-text-30 li-ml-22 li-text-#010B3E">{{item.title}}</text>
				<text class="li-text-22 li-text-#AFB2B8 li-mt-12 li-ml-22">{{item.desc}}</text>
			</view>
		</view>

		<!-- grid -->
		<view class="li-mt-15 ">
			<wd-grid class="li-px-30" bg-color="transparent" :column="4" :clickable="true">
				<wd-grid-item use-icon-slot use-text-slot v-for="(item,index) in gridList" :key="index"
					@itemclick="toPages({type:item.type})">
					<template #icon>
						<image class="li-w-58 li-h-58" :src="item.image" />
					</template>
					<template #text>
						<view class="li-mt-14">{{item.title}}</view>
					</template>
				</wd-grid-item>
			</wd-grid>
		</view>
		<!-- card -->
		<view
			:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}"
			class="li-w-88% li-h-220 li-mx-auto li-mt-20 li-pt-15">
			<text class="li-ml-35 li-text-30 li-text-#010B3E">代处理事项</text>
			<view class="li-flex justify-between items-center li-px-50 li-mt-20">
				<view class="li-flex li-flex-col items-center" v-for="(item,index) in toDoList" :key="index">
					<text :class="[index==2?'li-text-#F42429':'li-text-#010B3E']"
						class="li-text-43 li-font-bold">{{item.num}}</text>
					<text class="li-text-24 li-text-#AFB2B8">{{item.desc}}</text>
				</view>
			</view>
		</view>
		<!-- list -->
		<view class="li-w-88% li-mx-auto li-mt-30">
			<text class="li-ml-35 li-text-30">常见问题解答</text>
			<view class="li-bg-white li-rd-10 li-mt-20 li-px-25">
				<view v-for="(item,index) in problemList" :key="index"
					class="li-flex justify-between li-py-25 li-bottom-border">
					<view class="li-w-70%">
						<text class="li-text-28 li-text-#343333 li-two-line ">{{item.title}}</text>
						<view class="li-flex items-center justify-between li-text-26 li-text-#B1B0B0  li-mt-20">
							<text>{{item.time}}</text>
							<view class="li-flex-center">
								<text class="ri-eye-line li-text-26 li-mr-5"></text>
								<text>{{item.viewCount}}</text>
							</view>
						</view>
					</view>
					<view>
						<image class="li-w-130 li-h-130 li-rd-15" :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" @reload="loadmore" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		bannerList
	} from '@/api/banner';
	import {
		ref
	} from 'vue'
	import { onLoad, onReachBottom, Uni } from "@dcloudio/uni-app"
	// import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
	// import SafeAreaBottom from '@/components/SafeAreaBottom/index.vue'
	declare const uni : Uni
	const card_back = uni.$globalData?.RESOURCE_URL + 'home/card-back.png'
	const keyword = ref<string>('')
	const messageCount = ref<number>(10)
	const current = ref<number>(0)
	const state = ref<string>('loading')



	// 根据环境使用不同的图片路径
	const swiperList = ref([
		'/static/swiper/1.png',
	])
	const porcelainList = ref([
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/back1.png',
			title: '新建任务',
			desc: '新建巡检任务'
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/back2.png',
			title: '工单大厅',
			desc: '接任务获金币',
			type: 'task_hall'
		}
	])
	const gridList = ref([
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/gongdan.png',
			title: '我的工单',
			type: 'my_order'
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangke.png',
			title: '访客邀请',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/chewei.png',
			title: '车位管理',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/cuijiao.png',
			title: '物业催缴',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangyuan.png',
			title: '房源管理',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/tousu.png',
			title: '投诉管理',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/yaoqing.png',
			title: '邀请业主',
			type: ''
		},
		{
			image: uni.$globalData?.RESOURCE_URL + 'home/grid/wenjuan.png',
			title: '问卷管理',
			type: ''
		}
	])

	const toDoList = ref([
		{
			num: '30',
			desc: '今日任务'
		},
		{
			num: '12',
			desc: '未完成'
		},
		{
			num: '7',
			desc: '异常问题'
		}
	])

	const problemList = ref([
		{
			image: '/static/swiper/1.png',
			title: '如何创建工单任务',
			time: '2025-06',
			viewCount: '200'
		},
		{
			image: '/static/swiper/1.png',
			title: '巡检任务审核说明',
			time: '2025-06',
			viewCount: '200'
		},
		{
			image: '/static/swiper/1.png',
			title: '物业员工催缴流程',
			time: '2025-06',
			viewCount: '200'
		}
	])

	const handleClick = (e) => {
		console.log(e)
	}

	const onChange = (e) => {
		console.log(e)
	}
	const toPages = (item : any) => {
		switch (item.type) {
			case 'task_hall':
				// 工单大厅
				uni.navigateTo({
					url: '/pagesA/task_hall/list'
				});
				break;
			case 'my_order':
			console.log('00000');
				// 工单大厅
				uni.navigateTo({
					url: '/pagesA/my_order/list'
				});
				break;
			default:
				break;
		}
	}

	const getBannerList = () => {
		const res = bannerList({ position: 2 })

	}


	const loadmore = (e) => {
		console.log(e);
	}

	onReachBottom(() => {
		// state.value = 'error'
		state.value = 'finished'
	})

	onLoad(() => {
		getBannerList()
	})
</script>

<style lang="scss">
	page {
		min-height: 100vh;
	}

	.li-home-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg,
				rgba(246, 247, 251, 1) 0%,
				rgba(245, 246, 251, 0.99) 15%,
				rgba(244, 245, 250, 0.98) 30%,
				rgba(243, 244, 249, 0.97) 45%,
				rgba(242, 243, 248, 0.96) 60%,
				rgba(241, 242, 247, 0.95) 75%,
				rgba(240, 241, 246, 0.94) 90%,
				rgba(239, 240, 245, 0.93) 100%);
		background-attachment: fixed;
	}

	::v-deep .wd-search {
		background-color: #F6F7FB !important;
		padding: 0 !important;
	}

	::v-deep .wd-search__block {
		background-color: #FFFFFF !important;
		width: 480rpx !important;
		padding: 4rpx !important;
	}

	::v-deep .uni-input-placeholder,
	.uni-input-input {
		width: auto !important;
	}

	::v-deep .wd-badge__content {
		border: none !important;
	}

	::v-deep .wd-divider,
	.wd-divider::after,
	.wd-divider::before {
		border: none !important;
		margin: 0 !important;
	}
</style>