<template>
	<view>
		<view class="info-dot">护理申请</view>
		<view class="info-list">
			<!-- <view class="info-item" v-for="(item, index) in itemHandle" :key="index">
				<text class="info-item-label">{{item.name}}</text>
				<text class="info-item-content text-overflow">{{item.value??'-'}}</text>
			</view> -->
			<up-cell-group>
				<up-cell v-for="(item, index) in itemHandle" :key="index" :title="item.name"
					:value="item.value??'-'"></up-cell>
				<up-cell title="申请单">
					<template #right-icon>
						<image :src="getImgPath(item.imgPath)" style="width: 80rpx;height:80rpx" mode="aspectFit"
							@click="previewImg(item.imgPath)"></image>
					</template>
				</up-cell>
				<up-cell v-if="item.dealStatus === 'wait_complete' || item.dealStatus === 'complete'" title="出院时间"
					:value="item.leaveTime"></up-cell>
				<up-cell v-if="item.dealStatus === 'wait_complete' || item.dealStatus === 'complete'" title="出院证明">
					<template #right-icon>
						<image :src="getImgPath(item.leaveImg)" style="width: 80rpx;height:80rpx" mode="aspectFit"
							@click="previewImg(item.leaveImg)"></image>
					</template>
				</up-cell>
			</up-cell-group>

			<!-- <view class="info-item">
				<text class="info-item-label">申请单</text>
				<image :src="getImgPath(item.imgPath)" style="width: 100rpx;" mode="aspectFit"
					@click="previewImg(item.imgPath)"></image>
			</view> -->
		</view>

		<view v-if="item.dieTime" class="info-dot">死亡信息</view>
		<view v-if="item.dieTime" class="info-list">
			<view class="info-item">
				<text class="info-item-label">死亡日期</text>
				<text class="info-item-content text-overflow">{{item.dieTime && item.dieTime.substring(0,10)}}</text>
			</view>
			<view class="info-item" @click="previewDie(item.dieImg)">
				<text class="info-item-label">死亡证明</text>
				<text class="info-item-content text-overflow">点击查看</text>
			</view>
		</view>

		<view v-if="item.dealStatus === 'complete'" class="info-dot">评价信息</view>
		<view v-if="item.dealStatus === 'complete'" class="info-list">
			<view class="info-item">
				<text class="info-item-label">评价得分</text>
				<view v-if="showRate" class="flex-row align-center">
					<u-rate :count="5" :minCount='0' v-model="rateCount" :readonly="!showRateBtn"></u-rate>
					<text v-if="showRateBtn" class="font text-main-color ml-12" @click="submitRate">确定</text>
				</view>
			</view>
		</view>

		<view class="info-dot">护理需求</view>
		<view class="info-list">
			<view class="info-item flex-column" style="align-items: flex-start;">
				<view class="info-item-label">护理需求</view>
				<view class="info-item-content info-item-content2">
					<up-textarea v-model="item.careNeeds" disabled placeholder="-" count />
				</view>
			</view>
			<view class="info-item flex-column" style="align-items: flex-start;">
				<view class="info-item-label">备注</view>
				<view class="info-item-content info-item-content2">
					<up-textarea v-model="item.remark" disabled placeholder="-" count />
				</view>
			</view>
		</view>
		<template v-if="showLeaveCheck">
			<view class="info-dot">出院审核</view>
			<view class="info-list">
				<view class="info-item flex-column" style="align-items: flex-start;">
					<view class="info-item-label">是否通过</view>
					<view class="info-item-content info-item-content2">
						<u-radio-group v-model="isPass" placement="row">
							<u-radio name="1" label="同意"></u-radio>
							<u-radio name="0" label="不同意"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="info-item flex-column" style="align-items: flex-start;">
					<view class="info-item-label">审核说明</view>
					<view class="info-item-content info-item-content2">
						<up-textarea v-model.trim="leaveCheckReason" placeholder="请输入审核说明" count />
					</view>
				</view>
			</view>
		</template>
		<view v-if="computeShowEdit">
			<view class="btn-box-place"></view>
			<view class="btn-box flex-row" :class="{'btn-box-disagree': item.status == 'disagree'}">
				<view class="u-flex flex-column align-center justify-center" style="width: 120rpx;" @tap="editTap">
					<u-icon name="file-text-fill" color="#909399" size="24" />
					<view style="font-size: 28rpx;color: 909399;">编辑</view>
				</view>
				<view class="u-flex flex-column align-center justify-center" style="width: 120rpx;margin-left: 20rpx;"
					@tap="delTap">
					<u-icon name="trash-fill" color="#909399" size="24" />
					<view style="font-size: 28rpx;color: 909399;">删除</view>
				</view>
				<view style="width: 20rpx;"></view>
				<up-button class="up-button" type="primary" @tap="applyTap">提交审核</up-button>
			</view>
		</view>
		<view v-if="showLeaveCheckBtn" class="btn-box flex-row"
			:class="{'btn-box-disagree': item.status == 'disagree'}">
			<up-button class="up-button" type="primary" @tap="submitLeaveCheck">提交</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		watch
	} from 'vue';
	import {
		getDict
	} from '@/common/status/index.js'
	import {
		delCareApp,
		postCareStart,
		rateRequest
	} from '@/common/config/application-api.js'
	import {
		leaveCheckUrl
	} from '@/common/config/api.js'

	const {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})

	const isPass = ref('1');
	const leaveCheckReason = ref('');

	const rateCount = ref(0)

	const objKeyValue = reactive([{
			name: '姓名',
			key: 'personName'
		},
		{
			name: '性别',
			key: 'gender'
		},
		{
			name: '身份证号',
			key: 'idNumber'
		},
		{
			name: '护工性别',
			key: 'nurseGender'
		},
		{
			name: '所在医院',
			key: 'hospital'
		},
		{
			name: '详细地址',
			key: 'address'
		},
		{
			name: '是否残疾',
			key: 'disability'
		},
		{
			name: '申请日期',
			key: 'applyDate'
		},
	])

	// onMounted(() => {
	// 	console.log('onMounted', props.item.scoreAssess);
	// 	if (props.item.scoreAssess) {

	// 	} else {
	// 		rateCount.value = 0;
	// 	}
	// })

	watch(() => props.item, (newVal) => {
		console.log('newVal', newVal);
		if (newVal.scoreAssess) {
			console.log(newVal.scoreAssess);
			rateCount.value = parseInt(newVal.scoreAssess);
		} else {
			rateCount.value = 0;
		}
	})

	const showLeaveCheckBtn = computed(() => {
		console.log(props.item.dealStatus,'？？？？？');
		console.log('wait_complete'.includes(props.item.dealStatus),'？？？？？');
		return props.item.dealStatus.includes('wait_complete') && proxy.vuex_user.roles.includes('company')
	})

	const showLeaveCheck = computed(() => {
		return props.item.dealStatus.includes('wait_complete') && proxy.vuex_user.roles.includes('company')
	})

	const computeShowEdit = computed(() => {
		return 'no_check,disagree'.includes(props.item.status) && proxy.vuex_user.roles.includes('company')
	})

	//中间层 - item和objKeyValue
	const itemHandle = computed(() => {
		let itemArray = uni.$u.deepClone(objKeyValue);
		itemArray.map(keyObj => {
			if (props.item.hasOwnProperty(keyObj.key)) {
				let value = props.item[keyObj.key];
				if (keyObj.key === 'nurseGender') {
					value = getDict({
						dictValue: value,
						dictType: 'sys_user_sex'
					}).dictLabel ?? '-';
				}
				if (keyObj.key === 'disability') {
					if (value === 'Y') {
						value = '是'
					} else {
						value = '否'
					}
				}
				if (keyObj.key === 'gender') {
					if (value === '0') {
						value = '男'
					} else {
						value = '女'
					}
				}
				keyObj.value = value;
			}
		})
		return itemArray;
	})

	const submitLeaveCheck = () => {
		uni.showModal({
			title: '出院审核',
			content: '确定提交审核吗？',
			showCancel: true,
			success: (e) => {
				if (e.confirm) {
					let params = {
						applyId: props.item.applyId,
						dealStatus: isPass.value === '1' ? 'complete' : 'in_progress'
					};
					if (isPass.value !== '1') {
						params.auditReason = leaveCheckReason.value
					}
					// console.log('params',params);
					leaveCheckUrl(params)
						.then(res => {
							uni.$emit('renderApplyList')
							uni.navigateBack();
						})
						.catch(err => {
							console.log(err);
						})
				}
			}
		})
	}

	const showRateBtn = computed(() => {
		if (rateCount.value > 0 && !props.item.scoreAssess) {
			return true
		} else {
			return false
		}
	})

	const showRate = computed(() => {
		return proxy.vuex_user.roles.includes('village')
	})

	const previewImg = (filename) => {
		if (filename) {
			if (filename.indexOf('prod-api') !== -1) {
				return uni.previewImage({
					urls: [uni.$u.http.config.baseURL + filename]
				})
			}
			return uni.previewImage({
				urls: [uni.$u.http.config.baseURL + '/prod-api/' + filename]
			})
		}
		return;


	}

	const getImgPath = (filename) => {
		if (filename) {
			if (filename.indexOf('prod-api') !== -1) {
				return uni.$u.http.config.baseURL + filename;
			}
			return uni.$u.http.config.baseURL + 'prod-api' + filename;
		}
		return '';

	}


	// 提交评分
	const submitRate = () => {
		console.log(rateCount.value);
		rateRequest({
				applyId: props.item.applyId,
				userId: proxy.vuex_user.id,
				assess: rateCount.value,
				reason: ''
			})
			.then(res => {
				console.log('评分', res);
			})
			.catch(err => {
				console.log('评分err', err);
			})
	}

	const previewDie = (img) => {
		uni.previewImage({
			urls: [img],
			current: 0
		})
	}

	//编辑按钮
	function editTap() {
		uni.$u.route('/pages/subpack/pages/apply/apply', {
			id: props.item.applyId
		})
	}
	//删除按钮
	function delTap() {
		uni.showModal({
			title: '提示',
			content: '您确定删除吗？',
			success(res) {
				if (res.confirm) {
					delCareApp({
						id: props.item.applyId
					}).then(res => {
						uni.$u.toast('删除成功');
						uni.$emit('renderApplyList');
						setTimeout(() => {
							uni.$u.route({
								type: 'back'
							})
						}, 1000)

					})
				}
			}
		})
	}
	//审核按钮
	function applyTap() {
		uni.showModal({
			title: '提示',
			content: '您确定提交审核吗？',
			success(res) {
				if (res.confirm) {
					postCareStart({
						...props.item
					}).then(res => {
						uni.$u.toast('送审成功');
						uni.$emit('renderApplyList');
						setTimeout(() => {
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-button--normal) {
		font-size: 28rpx !important;
	}

	.info-dot {
		position: relative;
		margin: 20rpx;
		padding-left: 20rpx;
		font-size: 36rpx;
		color: #0B0B0B;
	}

	.info-dot::before {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		top: calc(50% - 6rpx);
		left: 0;
		background: #4794FF;
	}

	.info-list {
		margin: 24rpx !important;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.info-item {
		display: flex;
		align-items: center;

		&-label {
			font-size: 28rpx;
			color: #716D89;
			width: 160rpx;
			padding: 20rpx 0;
		}

		&-content {
			width: 590rpx;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1px solid rgba(136, 136, 136, 0.10);
			padding: 20rpx 0;
		}

		&-content2 {
			padding-top: 0 !important;
			width: 650rpx;
			border: none;
		}
	}

	.info-item:last-child {
		&-content {
			border-bottom: none;
		}
	}

	.btn-box-place {
		height: 130rpx;
	}

	.btn-box {
		padding: 20rpx 36rpx;
		background-color: #fff;
		position: fixed;
		height: 120rpx;
		display: flex;
		align-items: center;
		bottom: 0;
		width: 690rpx;
		z-index: 999999;
	}

	.btn-box-disagree {
		bottom: calc(50px + var(--status-bar-height));
	}
</style>