<template>
	<view class="container">
		<!-- 老人基本信息 -->
		<uni-section title="老人基本信息" type="line" titleFontSize="large">
			<template v-slot:right>
				<u-button type="primary" class="view-health" @click="handle_elder_health">查看健康信息</u-button>
			</template>
		</uni-section>
		<view class="elderInfo">
			<view class="top-container">
				<view class="infoLeft">
					<view>姓名:<text>{{detailform.name}}</text></view>
					<u-line></u-line>
					<view>性别:<text>{{detailform.sex}}</text></view>
					<u-line></u-line>
					<view>年龄:<text>{{GetAgeByIdCard(detailform.idNumber)}}</text></view>
					<u-line></u-line>
					<view>联系电话:<text>{{detailform.phone}}</text></view>
					<u-line></u-line>
					<view>居住住址:<text>{{getPermanentAddress(detailform)}}</text>
					</view>
				</view>
				<view class="img">
					<image :src="elderAvatar" alt="" @click="handleToAvatar"></image>
				</view>
			</view>
		</view>
		<!-- 跳转按钮 -->
		<view class="fixed-buttons" v-if="staffHomePermission.length>0">
			<view class="button-wrapper" @click="handle_phonecall">
				<uni-icons type="phone-filled" size="36px" color="#1365bd"></uni-icons>
				<text>电话呼叫</text>
			</view>
			<view class="button-wrapper" @click="handle_videocall">
				<uni-icons type="eye-filled" size="36px" color="#1365bd"></uni-icons>
				<text>视频呼叫</text>
			</view>
			<view class="button-wrapper" @click="handle_monitor">
				<uni-icons type="videocam-filled" size="36px" color="#1365bd"></uni-icons>
				<text>监控视频</text>
			</view>
			<view class="button-wrapper" @click="handle_device_list">
				<uni-icons type="list" size="36px" color="#1365bd"></uni-icons>
				<text>设备列表</text>
			</view>
		</view>
		<!-- 老人详情信息 -->
		<uni-section title="老人详情信息" type="line" titleFontSize="large"></uni-section>
		<view class="infoBottom">
			<view class="infoBottomLeft">
				<view>身份证号码:<text>{{detailform.idNumber}}</text></view>
				<u-line></u-line>
				<view>身份证年份:<text v-if="detailform.idNumber">{{detailform.idNumber.substring(6,10)}}</text></view>
				<u-line></u-line>
				<view>证件类型:<text>身份证</text></view>
				<u-line></u-line>
				<view>户籍地址:<text>{{getHouseholdAddress(detailform)}}</text></view>
				<u-line></u-line>
				<view>居住状况:<text>{{detailform.livingStatus}}</text></view>
				<u-line></u-line>
				<view>经济来源:<text>{{detailform.econSources}}</text></view>
				<u-line></u-line>
				<!-- 				<view>血型:<text>A</text></view>
				<u-line></u-line>
				<view>药物过敏史:<text>xxxxxxxxxxxxx</text></view>
				<u-line></u-line> -->
			</view>
		</view>
		<!-- 紧急联系人信息 -->
		<uni-section title="紧急联系人信息" type="line" titleFontSize="large"></uni-section>
		<view class="infoBottom">
			<view class="infoBottomLeft">
				<view>紧急联系人姓名:<text>{{detailform.emergencyContactName}}</text></view>
				<u-line></u-line>
				<view>紧急联系人电话:<text>{{detailform.emergencyContactPhone}}</text></view>
				<u-line></u-line>
				<view>紧急联系人与老年人关系:<text>{{detailform.emergencyContactKinship}}</text></view>
				<u-line></u-line>
			</view>
		</view>
		<!-- 能力测评 -->
		<uni-section title="能力测评" type="line" titleFontSize="large"></uni-section>
		<view class="infoBottom">
			<view class="infoBottomLeft">
				<view>意识水平测评:<text>{{detailform.consciousnessLevel}}</text></view>
				<u-line></u-line>
				<view>沟通交流测评:<text>{{detailform.communicationLevel}}</text></view>
				<u-line></u-line>
				<view>视力测评:<text>{{detailform.eyesightLevel}}</text></view>
				<u-line></u-line>
				<view>听力测评:<text>{{detailform.hearingLevel}}</text></view>
				<u-line></u-line>
				<view>认知功能测评:<text>{{detailform.acknowledgeLevel}}</text></view>
				<u-line></u-line>
				<view>攻击行为测评:<text>{{detailform.attackLvel}}</text></view>
				<u-line></u-line>
				<view>抑郁症状测评:<text>{{detailform.depressionLevel}}</text></view>
				<u-line></u-line>
				<view>工作能力测评:<text>{{detailform.workcapabilityLevel}}</text></view>
				<u-line></u-line>
				<view>人物定向测评:<text>{{detailform.directionalLevel}}</text></view>
				<u-line></u-line>
				<view>社会交往能力测评:<text>{{detailform.relationshipLevel}}</text></view>
				<u-line></u-line>
			</view>
		</view>
		<u-row customStyle="margin:10px">
			<u-col span="12">
				<u-button class="custom-style" @click="handel_edit_click" type="success" size="small">编辑
				</u-button>
			</u-col>
		</u-row>
		<u-row customStyle="margin:10px;">
			<u-col span="12">
				<u-button class="custom-style" @click="handel_delete_click" :disabled="disabled_Delete" type="error"
					size="small">删除
				</u-button>
			</u-col>
		</u-row>
		<u-modal :show="show" :showCancelButton="true" :content='content' @confirm="handle_confirmDelete_click"
			@cancel="handle_confirmCancel_click"></u-modal>
	</view>
</template>

<script setup>
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";
	import {
		QueryRTInfoList,
		addRTInfo,
		updateRTInfo,
		getRTInfo,
		delRTInfo
	} from "@/api/elder/RTInfo.js";

	import {
		GetAgeByIdCard
	} from "@/utils/stringFormat.js";
	import { useStore } from 'vuex';
	import {
		onLoad,

		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';
	const store = useStore();
	onShow(() => {
		console.log(888888,store.state.user)
	})
	onLoad((options) => {
		console.log('onLoad--setup中的onLoad', options);

		id.value = options.id //将老人id保存
		getList()
	})
	onReady(() => {
		console.log('setup中的onReady');
	})
	let detailform = reactive({})
	let id = ref(null)
	let loading = ref(false)
	let show = ref(false)
	let content = ref('确认删除此条老人信息')
	let rules = reactive({})
// 计算属性
	let status = computed(() => {
		if (DataList.value.length < total.value) {
			return "more";
		} else {
			finished.value = true;
			return "nomore";
		}
	});
	let disabled_Delete= computed(() => {
		// return !this.$auth.hasRole("admin")
		return false
	})
	//获取居住地址
	// "permanentProvince": "山西省",
	//     "permanentCity": "威海文登市",
	//     "permanentDistrict": "离石区",
	//     "permanentTown": "",
	//     "permanentVillage": "城东社区",
	//     "permanentStreet": "滨河街道",
	//     "permanentResidenceAdd": "滨河佳苑后散户5排4院",
	let getPermanentAddress= computed(() => {
		return function(item) {
			let result = "";
			if (item.permanentCity) result += item.permanentCity
			if (item.permanentDistrict) result += item.permanentDistrict
			// if (item.permanentTown) result += item.permanentTown
			if (item.permanentStreet) result += item.permanentStreet
			if (item.permanentVillage) result += item.permanentVillage
			if (item.permanentResidenceAdd) result += item.permanentResidenceAdd
			return result
		}
	})
	//获取户籍地址
	// "householdProvince": "山西省",
	//     "householdCity": "威海文登市",
	//     "householdDistrict": "离石区",
	//     "householdTown": "",
	//     "householdVillage": "",
	//     "householdStreet": "",
	//     "householdRegisterAdd": "",
	let getHouseholdAddress= computed(() => {
		return function(item) {
			let result = "";
			if (item.householdCity) result += item.householdCity
			if (item.householdDistrict) result += item.householdDistrict
			if (item.householdTown) result += item.householdTown
			if (item.householdVillage) result += item.householdVillage
			if (item.householdStreet) result += item.householdStreet
			if (item.householdRegisterAdd) result += item.householdRegisterAdd
			return result
		}
	})
	//头像
	let elderAvatar= computed(() => {
		console.log(99999,store.state.user)
		return store.state.user.elderAvatar
	})
	let staffHomePermission= computed(() => {
		// let result = store.state.user.addRoutes?.children.find(item => item.name == 'Staff')?.children
		// if (result) {
		// 	return result
		// } else {
		// 	return []
		// }
		return []
	})
	function getList() {
		loading.value = true;
		getRTInfo(id.value).then((response) => {
			loading.value = false;
			console.log("getRTInfo", response);
			detailform = Object.assign({}, detailform, response.data)
		});
	}

	//跳转编辑页面
	function handel_edit_click() {
		uni.navigateTo({
			url:'/pages_RTInfo/pages/edit?id=' + id.value
		})
		// this.$tab.navigateTo('/pages/RTInfo/edit?id=' + this.id)
	}

	//删除设备信息
	function handel_delete_click() {
		show.value = true;
	}
	//确认删除
	function handle_confirmDelete_click() {
		loading.value = true;
		delRTInfo([id.value]).then((response) => {
			console.log("delRTInfo", response);
			if (response.code != 200) {
				uni.$u.toast(response.msg)
				loading.value = false;
				show.value = false;
			} else {
				uni.$u.toast('删除成功')
				loading.value = false;
				show.value = false;
				uni.navigateBack()
				// this.$tab.navigateBack();
			}
		}).catch(errors => {
			console.log("errors", errors, this.id);
			// uni.$u.toast('删除失败')
		});
	}
	//取消删除
	function handle_confirmCancel_click() {
		show.value = false;
	}
	//头像
	function handleToAvatar() {
		// this.$tab.navigateTo('/pages/elderAvatar/index')
	}
	// 跳转至老人健康信息
	function handle_elder_health() {
		uni.navigateTo({
			url:'/pages_RTInfo/pages/HealthInfo/index'
		})
		// this.$tab.navigateTo()
	}
	// 跳转至电话呼叫
	function handle_phonecall() {
		// this.$tab.navigateTo('/pages/JinJiBaoJing/voiceCall/index')
	}
	// 跳转至视频呼叫
	function handle_videocall() {
		// this.$tab.navigateTo('/pages/JinJiBaoJing/videoCall/index')
	}
	// 跳转至视频监控
	function handle_monitor() {
		// this.$tab.navigateTo('/pages/JianKongShiPin/index')
	}
	// 跳转至设备列表
	function handle_device_list() {
		// this.$tab.navigateTo('/pages/DeviceInstall/index')
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.container {
		height: 100vh;
		padding: 1%;
		// overflow: hidden;

		.elderInfo {
			display: flex;
			flex-direction: column;
			height: 100;
			box-shadow: 0px 0px 1px 2px #ccc;
			border-radius: 5%;
			overflow: hidden;
			margin-bottom: 1%;

			.top-container {
				display: flex;
				flex: 1;
				padding: 3%;
				background-color: #fff;

				.infoLeft {
					flex: 2;

					view {
						// 信息标注
						margin: 5% 0;
						font-size: large;
						font-weight: 500;

						text {
							// 信息内容
							margin-left: 5%;

						}
					}
				}

				.img {
					flex: 1;
					height: 160px;
					width: 100%;
					border: #ccc solid 3px;
					margin-top: 2%;
					border-radius: 7%;

					image {
						width: 100%;
						height: 100%;
						// padding: 10% 0 0 0;
						border-radius: 5%;
					}
				}

			}
		}

		.infoBottom {
			// background-color: #c0c0c0;
			padding: 3%;
			background-color: #fff;

			view {
				// 信息标注
				margin: 5% 0;
				font-size: large;
				font-weight: 500;

				text {
					// 信息内容
					margin-left: 5%;

				}
			}
		}
	}

	.custom-style {
		width: 50%;
		font-weight: bolder;
		font-size: 17px;
	}

	.view-health {
		height: 36px;
	}

	// 固定按钮
	.fixed-buttons {
		position: fixed;
		bottom: 5px;
		right: 0px;
		z-index: 99;
		display: flex;
		flex-direction: column;
	}

	// 非固定按钮
	.wrapper-buttons {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottomw: 5px;
	}

	.button-wrapper {
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		margin-top: 5px;
		font-size: 14px;
		padding: 0 4px 2px;
		color: #0d4784;
		background-color: #dce8f5;
	}
</style>