<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" empty-view-text="~ 暂无数据 ~">
			<template #top>
				<u-navbar class="u-navbar-box" :title="handleTitle" placeholder bgColor="transparent" autoBack />
				<view class="bg-white">
					<u-tabs :list="tabList" :current="tabIndex" lineWidth="80rpx" :itemStyle="itemStyle"
						:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="handleTabs" />
				</view>
			</template>
			<template #default>
				<view class="apply-list">
					<applyItem v-for="(item, index) in dataList" :item="item" :key="index" @tapItem="tapItemHandle" />
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		onMounted
	} from 'vue';
	//import { onLoad } from '@dcloudio/uni-app'
	import applyItem from '../../components/apply/apply-item.vue';

	import {
		useStore
	} from 'vuex';
	import {
		getCareList,
		getAppClockList,
		getAssignList,
		getStreetListUrl
	} from '@/common/config/application-api.js'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	const store = useStore();
	const user = store.state.vuex_user;

	const {
		proxy
	} = getCurrentInstance();
	//当前是tabs样式
	const itemStyle = reactive({
		width: '187.5rpx',
		padding: '20rpx 0'
	})
	const activeStyle = reactive({
		color: '#39A1FF',
		fontSize: '32rpx',
		fontWeight: 'bold'
	})
	const inactiveStyle = reactive({
		color: '#888888',
		fontSize: '32rpx',
		fontWeight: 'bold'
	})

	const props = defineProps({
		// 是否是工作 - 判断当前tab是否显示
		isWork: {
			type: Boolean,
			default: false
		}
	})

	const tabData = {
		common: [{
			name: '进行中',
			query: {
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		admin: [{
			name: '进行中',
			query: {
				dealStatus: 'in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		village: [{
			name: '待处理',
			query: {
				status: 'one_check'
			}
		}, {
			name: '进行中',
			query: {
				status: 'wait_check,wait_assign_company,wait_assign_nurse,agree,wait_assign_company,assigned',
				dealStatus: 'no_start,in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}, {
			name: '已拒绝',
			query: {
				status: 'disagree'
			}
		}],
		area: [{
			name: '待处理',
			query: {
				status: 'wait_check,wait_assign_company'
			}
		}, {
			name: '进行中',
			query: {
				status: 'wait_assign_nurse,agree,wait_assign_company,assigned',
				dealStatus: 'no_start,in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}, {
			name: '已拒绝',
			query: {
				status: 'disagree'
			}
		}],
		company0: [{
			name: '未送审',
			query: {
				status: 'no_check,disagree'
			}
		}, {
			name: '进行中',
			query: {
				status: 'one_check,wait_assign_nurse,wait_check,agree,wait_assign_company,assigned',
				dealStatus: 'no_start,in_progress',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		company: [{
			name: '待分配',
			query: {
				status: 'wait_assign_nurse'
			}
		}, {
			name: '进行中',
			query: {
				status: 'assigned,care_apply_status',
				dealStatus: 'no_start,in_progress',
			}
		}, {
			name: '出院审核',
			query: {
				dealStatus: 'wait_complete',
			}
		}, {
			name: '已完成',
			query: {
				dealStatus: 'complete'
			}
		}],
		nurse: [{
			name: '护理任务',
			query: {
				status: 'assigned',
				dealStatus: 'no_start,in_progress',
			}
		}, {
			name: '出院审核',
			query: {
				status: 'assigned',
				dealStatus: 'wait_complete',
			}
		}, {
			name: '已完成',
			query: {
				status: 'assigned',
				dealStatus: 'complete'
			}
		}],
	}
	const tabList = ref([]);

	let roles = user.roles ?? [];


	//根据tab计算有多少宽度
	itemStyle.width = 750 / tabList.value.length < 150 ? '150rpx' : `${750 / tabList.value.length}rpx`;
	const tabIndex = ref(0)

	function handleTabs({
		index,
		name
	}) {
		if (index === tabIndex.value) return;
		tabIndex.value = index;
		proxy.$refs.paging.reload();
	}

	const flag = ref('0')

	const handleTitle = computed(() => {
		if (roles.includes('area')) return '护理审核';
		if (roles.includes('village')) return '护理初审';
		if (roles.includes('company')) {
			if (flag.value === '0') {
				return '我的申请'
			} else {
				return '护理指派'
			}
		}
		return '护理打卡';
	})


	const dataList = ref([])
	const paging = ref(null)

	function queryList(pageNo, pageSize) {
		let params = {
			pageNum: pageNo,
			pageSize
		}
		if (tabList.value.length > tabIndex.value) {
			let query = tabList.value[tabIndex.value].query;
			params = {
				...params,
				...query
			}
		}
		if (roles.includes('company')) {
			if (flag.value === '0') {
				getList(params);
			} else {
				getListIsCompany(params);
			}
		} else if (roles.includes('nurse')) {
			getListIsNurse(params);
		} else if (roles.includes('village') && tabIndex.value === 0) {
			getStreetList(params);
		} else {
			getList(params);
		}

	}

	function getStreetList(params) {
		getStreetListUrl({
				params
			})
			.then(data => {
				paging.value.complete(data);
			})
	}

	function getList(params) {
		getCareList({
			params
		}).then(data => {
			paging.value.complete(data);
		})
	}

	// -护理公司护理列表查询
	function getListIsCompany(query) {
		let params = {
			...query,
			pageNumAssign: query.pageNum ?? 1,
			pageSizeAssign: query.pageSize ?? 10
		}
		getAssignList({
			params
		}).then(data => {
			paging.value.complete(data);
		})
	}

	// -护理人员护理列表查询
	function getListIsNurse(query) {
		let params = {
			...query
		}
		getAppClockList({
			params
		}).then(data => {
			paging.value.complete(data);
		})
	}


	function tapItemHandle(item) {
		// console.log('tapItemHandle=>', item);
		if (!item.applyId) return false;
		uni.$u.route('/pages/subpack/pages/application/info', {
			id: item.applyId
		})
	}
	onLoad((options) => {
		console.log('options', options);
		flag.value = options.flag;

		roles.forEach(r => {
			if (tabData.hasOwnProperty(r) && tabList.value.length === 0) {
				if (flag.value === '0') {
					tabList.value = tabData['company0']
				} else {
					tabList.value = tabData[r];
				}
			}
		})
		if (tabList.value.length === 0) tabList.value = tabData.common;


		//根据tab计算有多少宽度
		itemStyle.width = 750 / tabList.value.length < 150 ? '150rpx' : `${750 / tabList.value.length}rpx`;

		uni.$on('renderApplyList', () => {
			proxy.$refs.paging.reload();
		})
	})

	onUnload(() => {
		uni.$off('renderApplyList')
	})
</script>
<style>
	page {
		background-color: #F6F8FD;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>