<template>
	<view class="page1-warp">
		<up-form labelPosition="top" :model="formData" ref="formRef">
			<!-- 'wait_assign_company,wait_assign_nurse'.includes(item.status) -->
			<up-form-item label="指派任务" labelWidth="auto" v-if="item.status && item.status.includes('wait_assign')"
				required>
				<view class="flex-row justify-between align-center" style="width: 100%;">
					<view v-if="item.status === 'wait_assign_company'">
						<view class="">护理公司</view>
						<view class="flow-tips-content" :class="{'theme-color': chooseInfo.name}">
							{{chooseInfo.name??'请选择护理公司'}}
						</view>
					</view>
					<view v-if="item.status === 'wait_assign_nurse'">
						<view class="flow-tips">护理人员</view>
						<view class="flow-tips-content" :class="{'theme-color': chooseInfo.name}">
							{{chooseInfo.name??'请选择护理人员'}}
						</view>
					</view>
					<view class="icon-box" @tap="goToChoosePage">
						<up-icon v-if="!chooseInfo.name" size="28" class="up-icon" name="plus" />
						<up-avatar v-else size="80rpx" :text="nameText(chooseInfo.name)" shape="square"
							bgColor="#305BFF" />
					</view>

				</view>
			</up-form-item>
			<!-- <up-form-item label="护理打卡(0/6)" labelWidth="auto" required>
				<view class="flex-row justify-between align-center" style="width: 100%;">
					<u-upload :sizeType="['compressed']" :capture="['camera']" />
				</view>
			</up-form-item>
			<up-form-item label="护理评分" labelWidth="auto" required>
				<view class="flex-row justify-between align-center" style="width: 100%;">
					<up-rate v-model="formData.score" activeIcon="heart-fill" inactiveIcon="heart" count="10"
						:size="25" />
					<view>{{formData.score*10}}</view>
				</view>
			</up-form-item> -->
			<up-form-item label="审批意见" labelWidth="auto" required>
				<up-textarea v-model="formData.remark" placeholder="请输入您的审批意见" count />
			</up-form-item>
		</up-form>
		<view class="btn-box">
			<view class="flex-row ">
				<up-button class="up-button" v-if="isShowBack" type="error" style="width: 250rpx;"
					@tap="checkTap(2)">‌退回</up-button>
				<view v-if="isShowBack" class="btn-place"></view>
				<up-button v-if='item.status && item.status.includes("wait_assign")' class="up-button" type="primary"
					@tap="assignTap">指派</up-button>
				<up-button v-else class="up-button" type="primary" @tap="checkTap(1)">通过</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	import {
		postCareAssign,
		postCareCheck,
		postStreetCheck,
		postCareComplete
	} from '@/common/config/application-api.js'

	const {
		proxy
	} = getCurrentInstance()


	const store = useStore();
	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	// 使用 ref 创建响应式引用  
	const formRef = ref(null);
	const formData = reactive({
		remark: '', //审核意见
		careCompany: '', //护理公司
		careStaff: '', //护理人员
		score: 1, //评分
	})
	const formRule = reactive({
		remark: ''
	})
	const chooseInfo = ref({}); //选择的数据

	//名字取值
	const nameText = computed(() => {
		return (name) => {
			name = name.replaceAll('南充', '').replaceAll('服务', '').replaceAll('养老', '').replaceAll('有限公司', '');
			let index = name.length - 2;
			index = index >= 0 ? index : 0;
			return name.substring(index);
		};
	})

	//跳转选择的页面
	function goToChoosePage() {
		let params = {
			maxCount: 1
		}
		if (chooseInfo.value.name) {
			params.dufaultIds = chooseInfo.value.id + "";
		}

		if (props.item.status === 'wait_assign_company') {
			params.pageType = 'company';
		} else if (props.item.status === 'wait_assign_nurse') {
			params.pageType = 'user';
		}
		uni.$u.route('/pages/subpack/pages/application/choose', params)
	}

	//是否显示退回按钮
	function isShowBack() {
		let user = store.state.vuex_user;
		return user.roles.includes('area') && props.item.status == 'wait_check';
	}

	//点击处理指派
	function assignTap() {
		if (!chooseInfo.value.id) {
			uni.$u.toast('请选择指派的公司');
			return false;
		}
		let checkParams = {
			...props.item
		};

		if (props.item.status === 'wait_assign_nurse') {
			checkParams.status = 'assigned';
			checkParams.nurseId = chooseInfo.value.id;
		} else {
			checkParams.status = 'wait_assign_nurse';
			checkParams.companyId = chooseInfo.value.id;
		}
		checkParams.assignNurseRemark = formData.remark;
		postCareAssign(checkParams).then(res => {
			uni.$u.toast('指派成功');
			uni.$emit('renderApplyList');
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		})
	}
	//点击处理审核 1 审核  2 退回
	function checkTap(type = 2) {
		if (!formData.remark) {
			uni.$u.toast('审核理由不能为空');
			return false;
		}
		let checkParams = {
			...props.item
		};
		if (proxy.vuex_user.roles.includes('village')) {
			checkParams.status = 'wait_check';
		} else {
			checkParams.status = 'wait_assign_company';
		}

		if (type == 2) {
			checkParams.status = 'disagree';
		}
		checkParams.auditReason = formData.remark;

		if (proxy.vuex_user.roles.includes('village')) {
			postStreetCheck(checkParams).then(res => {
				uni.$u.toast('初审成功');
				uni.$emit('renderApplyList');
				setTimeout(() => {
					uni.$u.route({
						type: 'back'
					})
				}, 1000)
			})
		} else {
			postCareCheck(checkParams).then(res => {
				uni.$u.toast('审核成功');
				uni.$emit('renderApplyList');
				setTimeout(() => {
					uni.$u.route({
						type: 'back'
					})
				}, 1000)
			})
		}

	}

	onMounted(() => {
		uni.$on('choose', ({
			checkList
		}) => {
			if (checkList && checkList.length > 0) chooseInfo.value = checkList[0];
		})
	})
	onUnmounted(() => {
		uni.$off('choose')
	})
</script>

<style lang="scss" scoped>
	.page1-warp {
		padding: 24rpx 0;
	}

	.flow-tips {
		font-size: 30rpx;
		color: #222222;
	}

	.flow-tips-content {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: rgba(34, 34, 34, .3);
	}

	.btn-box {
		padding: 20rpx 36rpx;
		background-color: #fff;
		position: fixed;
		bottom: calc(50px + var(--status-bar-height));
		/* bottom: 50px; */
		width: 690rpx;

		.btn-place {
			width: 100rpx;
		}
	}

	.theme-color {
		color: #305BFF !important;
	}

	.icon-box {
		overflow: hidden;
		width: 80rpx;
		height: 80rpx;

	}
</style>