<script setup lang="ts">
    import { reactive, toRefs } from 'vue'
    import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getCalculateAge } from '@/utils/date'
	import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong';
	import ConfirmDialog from '@/components/ConfirmDialog/index.vue'
	
	const pageData = reactive({
	    loading: false,
	    workersParam:[],
		contactMobile:"",
		contactName:"",
		showConfirmDialog:false,
	})
	// 字典值
	const DictData = reactive({
		sexArr:[],// 性别
		educationArr:[]// 学历
	})
    onLoad((options) => {
		let param = JSON.parse(decodeURIComponent(options.param));
		uni.setNavigationBarTitle({
		  title: param.villageName
		});
		getLaborAppDetail(param.id);
    })
	async function getLaborAppDetail(id: string) {
		await LinghuoyonggongAPI.gitListByCodeDict({ code : 'sex'}).then(res=>{
			DictData.sexArr = res;
		})
		await LinghuoyonggongAPI.gitListByCodeDict({ code : 'education'}).then(res=>{
			DictData.educationArr = res;
		})
	    await LinghuoyonggongAPI.getLaborAppDetail({ id }).then((res) => {
			pageData.workersParam = res.workers;
			pageData.contactMobile = res.contactMobile;
			pageData.contactName = res.contactName.substring(0,1) + new Array(res.contactName.length).join('*');
	    })
	}
	// 返回字典中的中文值
	function returnDictZhVel(type:any,val:any){
		let valText = "";
		if(type == 'gender'){
			let arr = DictData.sexArr;
			for(let i = 0; i < arr.length;i++){
				if(val == parseInt(arr[i].itemValue)){
					valText = arr[i].itemText;
					break;
				}
			}
		}
		if(type == 'edu'){
			let arr = DictData.educationArr;
			for(let i = 0; i < arr.length;i++){
				if(val == parseInt(arr[i].itemValue)){
					valText = arr[i].itemText;
					break;
				}
			}
		}
		return valText;
	}
	function makePhoneCall(){
		uni.makePhoneCall({
			phoneNumber: pageData.contactMobile
		});
	}
</script>

<template>
    <view class="details_page">
		<view class="details-content">
			<view v-if="!pageData.workersParam || pageData.workersParam.length == 0" style="height: 700rpx">
			    <fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
			</view>
			<view class="yr-person-item" v-for="(item,index) in pageData.workersParam" :key="index">
				<view class="yr-person-info">
					<view class="person_name_attr">{{item.name}}<text class="person_attr">{{item.attr}}</text></view>
					<view class="person-info">{{getCalculateAge(item.birthday)}}｜{{ returnDictZhVel('gender',item.gender) }}｜{{ returnDictZhVel('edu',item.edu)}}</view>
					<view class="person-info text_overflow_ellipsis">技能：{{item.skill}}</view>
				</view>
			</view>
		</view>
		<view v-if="pageData.workersParam.length" class="make-phone-view">
			<fui-button text="电话沟通" bold radius="96rpx" @click="pageData.showConfirmDialog = true" height="80rpx"/>
		</view>
		<!-- 确认对话框 -->
		<ConfirmDialog
		    v-model:show="pageData.showConfirmDialog"
		    title="温馨提示"
		    :content="`你将与${pageData.contactName}进行电话沟通，若继续，请点击确认按钮！`"
		    cancelText="取消"
		    confirmText="确认"
		    @confirm="makePhoneCall"
		/>
    </view>
	<fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style lang="scss" scoped>
.details_page{
	background: rgba(230, 245, 232, 1);
	min-height: 100vh;
	width: 750rpx;
	padding-top: 24rpx;
	position: relative;
	.details-content{
		width: 694rpx;
		background-color: #FFFFFF;
		margin-left: 28rpx;
		border-radius: 12rpx;
		padding: 24rpx;
		
		.yr-person-item{
			border-bottom: 2rpx solid #EEEEEE;
			margin-bottom: 24rpx;
			.yr-person-info{
				.person_name_attr{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					.person_attr{
						font-size: 24rpx;
						font-weight: 400;
						color: #5DB66F;
						margin-left: 12rpx;
					}
				}
				.person-info{
					font-size: 24rpx;
					color: #999999;
					vertical-align: middle;
					margin-bottom: 24rpx;
					margin-top: 24rpx;
				}
			}
		}
		.yr-person-item:last-child{
			border-bottom: none;
		}
	}
	
	.make-phone-view{
		width: 690rpx;
		height: 80rpx;
		position: fixed;
		left: 30rpx;
		bottom: 62rpx;
	}
}
</style>
