<template>
	<z-paging-swiper>
		<template #top>
			<view
				v-if="userInfo.roleName === 'common'"
				class="px-24rpx pt-20rpx relative"
			>
				<u--image
					width="100%"
					height="200rpx"
					:fade="false"
					:src="$assets('/order-bg.png')"
				/>
				<view
					class="text-white flex items-center justify-between px-130rpx pt-20rpx absolute top-0 left-0 w-full h-full"
				>
					<view class="flex flex-col items-center">
						<view class="text-64rpx">11</view>
						<view class="text-34rpx">今日接单</view>
					</view>
					<view class="flex flex-col items-center">
						<view class="text-64rpx">12323</view>
						<view class="text-34rpx">今日收入</view>
					</view>
				</view>
			</view>
			<u-tabs
				@change="handleTabChange"
				class="w-full"
				:list="list"
				lineWidth="30"
				lineColor="#FF8CA6"
				:scrollable="false"
				:current="current"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="width: 20%; height: 100rpx;"
			></u-tabs>
		</template>
		<swiper
			class="h-full"
			:current="current"
			@animationfinish="swiperAnimationfinish"
		>
			<swiper-item v-for="(_, index) in list" :key="index">
				<z-paging
					:ref="(el) => (paging[index] = el)"
					v-model="dataList[current]"
					@query="queryList"
					:min-delay="300"
				>
					<view
						v-for="(item, i) of dataList[current]"
						:key="i"
						class="min-h-410rpx bg-white rounded-16rpx mx-30rpx px-20rpx py-30rpx mb-20rpx shadow-current"
					>
						<view class="flex-row-between">
							<text class="text-#999 text-24rpx">订单号：22323232323</text>
							<view
								class="w-124rpx h-48rpx leading-48rpx text-center rounded-sm text-24rpx"
								:class="`${stateColorList[status].bg} ${stateColorList[status].color}`"
								>{{ stateColorList[status].text }}</view
							>
						</view>
						<view class="flex-row-between text-28rpx text-#999 mt-20rpx">
							<view>服务项目：<text class="text-#000">服务项目</text></view>
							<view class="text-#FF3939 font-bold">预计收入：￥100</view>
						</view>
						<view
							class="mt-10rpx mb-24rpx flex text-24rpx bg-#f2f2f2 w-full min-h-140rpx rounded-sm px-34rpx pt-20rpx pb-10rpx"
						>
							<view class="flex flex-col text-#666">
								<text>就诊人</text>
								<text class="text-#000 mt-8rpx">就诊人</text>
							</view>
							<view class="flex flex-col flex-1 pl-40rpx pr-20rpx text-#666">
								<text>医院</text>
								<text class="text-#000 mt-8rpx">医院医院医院医院医院</text>
							</view>
							<view class="flex flex-col text-#666">
								<text>预约时间：</text>
								<text class="text-#000 mt-8rpx">2023/02/02</text>
								<text class="text-#000">10:00</text>
							</view>
						</view>
						<view class="flex justify-end items-center">
							<view
								@click="handleClick(item)"
								class="btn text-30rpx px-30rpx py-14rpx ml-30rpx border-#40A0E4 text-#40A0E4"
								>开始服务</view
							>
							<view
								@click="handleClick(item)"
								class="btn text-30rpx px-30rpx py-14rpx ml-30rpx border-#FF8CA6 text-#FF8CA6"
								>查看详情</view
							>
							<view
								@click="handleClick(item)"
								class="btn text-30rpx px-30rpx py-14rpx ml-30rpx border-#5F5F5F text-#5F5F5F"
								>取消订单</view
							>
						</view>
					</view>
				</z-paging>
			</swiper-item>
		</swiper>
		<u-popup
			class="overflow-hidden"
			:show="popupShow"
			round="16rpx"
			@close="popupShow = false"
			closeable
		>
			<view class="pt-90rpx relative">
				<view class="text-#000 absolute left-50rpx top-30rpx"
					>请选择取消理由</view
				>
				<view
					class="h-full w-full overflow-y-auto py-10rpx px-40rpx rounded-16rpx overflow-hidden"
				>
					<u-radio-group v-model="value" placement="row" @change="groupChange">
						<u-radio
							labelSize="16"
							iconSize="20"
							v-for="(item, index) in list"
							:key="index"
							activeColor="#FF8CA6"
							:label="'思悠悠，恨悠悠，恨到归时方始休' + index"
							:name="index"
						></u-radio>
					</u-radio-group>
					<view class="mt-20rpx mb-20rpx text-28rpx">其他理由，请填写</view>
					<u--textarea
						v-model="remark"
						placeholder=""
						maxlength="300"
						count
						:autoHeight="false"
					/>
					<view
						class="text-white bg-#FF8CA6 rounded-24rpx w-full mx-auto mt-30rpx h-80rpx text-center leading-80rpx hover:shadow-md"
						>提交</view
					>
				</view>
			</view>
		</u-popup>
		<button-contact :class="`!bottom-16%`" />
		<template #bottom><tabbar :fixed="false" /></template>
	</z-paging-swiper>
</template>

<script setup>
const instance = getCurrentInstance()
const { $api, $store, $Router, $loading } = instance.proxy
const userInfo = computed(() => $store.user.userInfo)
// 全部 待服务 进行中 已完成 已取消
const list = ref([
	{ name: '全部', id: 0 },
	{ name: '待服务', id: 1 },
	{ name: '进行中', id: 2 },
	{ name: '已完成', id: 3 },
	{ name: '已取消', id: 4 }
])
const paging = ref([])
const dataList = ref([[], [], [], [], []])
const popupShow = ref(false)
const value = ref(0)
const remark = ref('')
const status = ref(Math.floor(Math.random() * 4))
const current = ref(0)
const stateColorList = [
	{
		text: '待服务',
		color: 'text-#01BB88',
		bg: 'bg-#d4f0e7'
	},
	{
		text: '进行中',
		color: 'text-#FEA60A',
		bg: 'bg-#fceed1'
	},
	{
		text: '已完成',
		color: 'text-#40A0E4',
		bg: 'bg-#dceaf8'
	},
	{
		text: '已取消',
		color: 'text-#666',
		bg: 'bg-#ccc'
	}
]

const handleTabChange = (item) => {
	status.value = item.id - 1 < 0 ? 0 : item.id - 1
	paging.value[current.value]?.reload()
}
//swiper滑动结束
const swiperAnimationfinish = (e) => {
	current.value = e.detail.current
}

const queryList = (pageNo, pageSize) => {
	const params = {
		pageNo: pageNo,
		pageSize: pageSize,
		type: current.value
	}
	setTimeout(() => {
		paging.value[current.value].complete(
			new Array(Math.floor(Math.random() * 20)).fill({})
		)
	}, 300)
	return
	$loading(true)
	$api
		.queryList(params)
		.then((res) => {
			paging.value[current.value].complete(res.data.list)
			dataList.value[current.value] = res.data.list
			$loading(false)
		})
		.catch((res) => {
			paging.value.complete(false)
			$loading(false)
		})
}

const handleClick = (item) => {
	console.log('🚀 ~ file: index.vue:133 ~ item:', item)
	popupShow.value = true
}
const groupChange = (value) => {
	console.log('🚀 ~ file: index.vue:133 ~ value:', value)
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f2f2;
}
.flex-row-center {
	@apply flex flex-row justify-center items-center;
}
.flex-row-between {
	@apply flex flex-row justify-between items-center;
}
.btn {
	@apply rounded-md border-solid border-1;
}
:deep {
	.u-popup__content {
		border-radius: 16rpx 16rpx 0 0;
	}
	.u-textarea,
	.u-textarea__count {
		background-color: #f2f2f2 !important;
	}
	.u-popup__content {
		overflow: hidden;
	}
	.u-radio {
		padding-bottom: 20rpx !important;
		width: 100% !important;
		.u-radio__text {
			width: 100%;
		}
	}
}
</style>
