<template>
	<view class="mainbox">
		<view class="topBg">		
			<view class="photobox">
				<image class="photo" v-if="form.photo" :src="form.photo" mode='aspectFit'></image>
				<view class="colorful" v-else>{{form.name?.slice(0,1)}}</view>
			</view>
			<view class="infoBox">
				<view class="name">
					{{form.name}}
				</view>
				<view class="flexbox">
					<label>证件号：</label>
					<text>{{ form.idcCode}}</text>
				</view>
				<view class="flexbox">
					<label>会员编号：</label>
					<text>{{ form.perCode}}</text>
				</view>
				<view class="flexbox">
				<label>有效期：</label>
				<text>{{ form.idcType==3?'--': form.validityDate?.slice(0,10)||'--' }}</text>
			</view>
			</view>
		</view>
		<uni-list>
			<uni-list-item title="姓名" :rightText="form.name" />
			<uni-list-item title="证件类型" :rightText="cardType?.[form?.idcType]?.label" />
			<uni-list-item title="证件号" :rightText="form.idcCode" />
			<uni-list-item title="性别" :rightText="form.sex==0?'男':'女'" />
			<uni-list-item title="会员编号" :rightText="form.perCode" />
			<uni-list-item title="所属一级协会" :rightText="form.topAssName" />
			<uni-list-item title="所属地区协会" :rightText="form.areaAssName" />
			<uni-list-item title="注册团体会员" :rightText="form.memName" />
			<uni-list-item title="缴费日期" :rightText="form.payDate||'--'" />
			<uni-list-item title="出生日期" :rightText="form.birth?.slice(0,10)" />
			<uni-list-item title="手机号码" :rightText="form.phone" />
			<uni-list-item title="所在地区" :rightText="form.cityStr" />
			<uni-list-item title="详细地址" :rightText="form.address||'--'" />
		</uni-list>
	</view>
	<view class="height1"></view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue'
	const cardType = ref([{
			label: '身份证',
			value: '0'
		},
		{
			label: '来往大陆(内地)通行证',
			value: '1'
		},
		{
			label: '中国护照',
			value: '2'
		},
		{
			label: '护照',
			value: '3'
		},
		{
			label: '其它',
			value: '4'
		}, {
			label: '香港身份证',
			value: '5'
		}, {
			label: '往来港澳台通行证',
			value: '6'
		}
	])
	const form = ref({})
	onLoad((option) => {
		console.log(option)
		api.getInfo(option.perId).then(res => {
			form.value = res.data
			form.value.topAssName = form.value?.ancestorNameList?.[0]
			form.value.areaAssName = form.value?.ancestorNameList?.[1]
			form.value.memName = res.data.memName
			if (form.value.cityId) {
				getRegionsList(form.value.cityId)
			}
			if (form.value.photo && form.value.photo.indexOf('http') == -1) {
				form.value.photo = config.baseUrl_api + form.value.photo
			}
		})
	})

	function getRegionsList(cityId) {
		api.regionsList().then(res => {
			for (var m of res.data) {
				for (var n of m.children) {
					for (var o of n.children) {
						if (o.value == cityId) {
							form.value.cityStr = m.text + n.text + o.text
						}
					}
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.flexbox{width: 60%;margin:10rpx auto;font-size: 28rpx;align-items: center;
		label{color: #7b7f83;width: 5em;font-size: 24rpx;}
	}
	.topBg{background: #f5f5f5;}
	.infoBox{padding: 1rpx 1rpx 30rpx;
		.name{font-size: 34rpx;text-align: center;}
	}
	.photobox {
		position: relative;
		padding: 30rpx 0 30rpx;
	
		.photo {
			width: 255rpx;
			height: 318rpx;
			background-color: #f4f4f4;
			display: block;
			margin: auto;
		}
	}
	.height1 {
		height: 1rpx
	}
	.mainbox {
		margin: 30rpx 25rpx 60rpx;box-shadow:0 0 8rpx #ddd;
		background: #FFFFFF;
		border-radius: 15rpx;

		:deep(.uni-list-item__content-title) {
			color: #4C5359;
			font-size: 30rpx;
			font-weight: 300;
		}

		:deep(.uni-list-item__extra-text) {
			color: #000;
			font-size: 30rpx;
		}
	}



	.colorful {
		background-color: #007BDA;
		width: 200rpx;
		margin: auto;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}
</style>