<template>
	<view class="px-24rpx bg-#fff" v-if="userRole === 'simple'">
		<u-search
			v-model="searchVal"
			shape="square"
			margin="20rpx 0rpx 30rpx 0rpx"
			height="80rpx"
			searchIconSize="48rpx"
			:showAction="false"
			:searchIcon="$assets('/sou.png')"
			placeholderColor="#666"
			placeholder="搜索您需要陪诊的医院"
			clearabled
		/>
		<u-swiper
			:list="swiperList"
			height="200"
			radius="24rpx"
			keyName="image"
			indicatorMode="dot"
			indicator
			circular
		/>
		<view class="relative mt-40rpx mb-10rpx">
			<u-grid :border="false" col="4">
				<u-grid-item
					@click="handleGridClick(listItem.path, listItem.query)"
					v-for="(listItem, listIndex) in gridList"
					:key="listIndex"
					:name="listItem.path"
				>
					<u--image
						width="100rpx"
						height="100rpx"
						:duration="100"
						:src="$assets(listItem.icon)"
					/>
					<text class="text-28rpx !font-normal mt-12rpx mb-34rpx text-#333">{{
						listItem.title
					}}</text>
				</u-grid-item>
			</u-grid>
			<button
				class="absolute right-30rpx bottom-40rpx bg-transparent border-transparent z-2 w-120rpx h-150rpx"
				open-type="contact"
				hoverClass="none"
			></button>
		</view>
		<view class="relative">
			<u--image
				width="702rpx"
				height="180rpx"
				mode="aspectFit"
				radius="16rpx"
				:src="$assets('/tongzhi.png')"
				:duration="300"
				lazy-load
			/>
			<button
				class="absolute left-0 top-0 w-full h-full bg-transparent border-transparent z-2"
				open-type="contact"
				hoverClass="none"
			></button>
		</view>
		<view class="mt-30rpx flex items-center h-180rpx mb-20rpx">
			<u--image
				:src="$assets('/tongzhi.png')"
				:duration="300"
				width="180rpx"
				height="180rpx"
				radius="24rpx"
				lazy-load
			/>
			<view class="flex flex-1 justify-between items-center h-full">
				<view class="flex flex-col justify-between h-full py-8rpx ml-20rpx">
					<view class="text-34rpx">电子医保常见问题</view>
					<view class="text-24rpx text-#333">全国通用，看病更省心</view>
				</view>
				<u-icon name="arrow-right" width="48rpx" height="48rpx" />
			</view>
		</view>
		<tabbar></tabbar>
	</view>
	<Order v-else />
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import Order from '../order/index.vue'

const { $Router, $api, $store } = getCurrentInstance().proxy
const userRole = computed(() => $store.user.userInfo.roleName ?? 'simple')
const searchVal = ref('')
const swiperList = ref([
	{
		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
		title: '昨夜西风凋碧树'
	},
	{
		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
		title: '行色匆匆'
	},
	{
		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
		title: '更上一层楼'
	}
])
// 半天陪诊 全天陪诊 遵享服务 代办约号 取送报告 代取送药 上门检测护理 在线咨询
const gridList = ref([
	{
		title: '半天陪诊',
		icon: '/home-icon/h-icon-1.png',
		path: '/pages/form/index',
		query: {
			cur: 1
		}
	},
	{
		title: '全天陪诊',
		icon: '/home-icon/h-icon-2.png',
		path: '/pages/form/index',
		query: {
			cur: 2
		}
	},
	{
		title: '遵享服务',
		icon: '/home-icon/h-icon-3.png',
		path: '/pages/form/index',
		query: {
			cur: ''
		}
	},
	{
		title: '代办约号',
		icon: '/home-icon/h-icon-4.png',
		path: '/pages/form/index',
		query: {
			cur: 3
		}
	},
	{
		title: '取送报告',
		icon: '/home-icon/h-icon-5.png',
		path: '/pages/form/index',
		query: {
			cur: 4
		}
	},
	{
		title: '代取送药',
		icon: '/home-icon/h-icon-6.png',
		path: '/pages/form/index',
		query: {
			cur: 5
		}
	},
	{
		title: '上门检测护理',
		icon: '/home-icon/h-icon-7.png',
		path: '/pages/form/index',
		query: {
			cur: 6
		}
	},
	{
		title: '在线咨询',
		icon: '/home-icon/h-icon-8.png',
		path: ''
	}
])

const handleGridClick = (path, query = {}) => {
	if (path) {
		$Router.push({
			path,
			query
		})
	}
}
</script>

<style lang="scss" scoped>
:deep {
	.u-search__content {
		border-radius: 16rpx !important;
	}
}
uni-page-wrapper > uni-page-body,
page {
	border-top-width: 0;
	background-color: #fff;
}
.button-hover {
	background-color: transparent;
}
</style>
