<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>

		<!-- 会员证 -->
		<view style="margin: 30rpx 0 0;" v-if="form.certStage!=0&&form.idcType!=3&&form.certStage!=2&&form.certStage!=1">
			<view class="zhengBox">
				<image v-if="form.certStage == 4" style="width: 600rpx; height: 380rpx;position: relative" :src="config.baseUrl_api+'/fs/static/icon/memberCardU.png'" :fit="fit" />
				<image v-else style="width: 600rpx; height: 380rpx;position: relative" :src="config.baseUrl_api+'/fs/static/icon/memberCard.png'" :fit="fit" />
				<view class="zhengbody" @contextmenu.prevent="youji">
					<image mode="aspectFill" :src="(form.photo)" class="head"/>
					<view class="memberNumber">{{ form.perCode }}</view>
					<view class="birthday">{{ fileData(form.birth) }}</view>
					<view class="phone">010-87188971</view>
					<view class="service">https://www.taekwondo.org.cn/</view>
					<view class="validity">{{ fileData(form.beginTime) +'-'+fileData(form.validityDate) }}</view>
					<view class="nameC">
						<view ref="content" class="content">{{ form.name }} </view>
					</view>
				</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({})
	const urlHref = 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
						}
					}
				}
			}
		})
	}
	function fileData(time) {
	  if (!time) return
	  const data = new Date(time.replace(/-/g, '/'))
	  const year = data.getFullYear()
	  const month = data.getMonth() + 1
	  const dates = data.getDate()
	  return year + '年' + month + '月' + dates + '日'
	}

</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%;
	}
	.zhengBox{
		position: relative;width: 600rpx; height: 380rpx;margin:0 auto 30rpx;
		.zhengbody{
			.head{width: 114rpx;height: 114rpx;border-radius: 50%;position: absolute;left: 65rpx;top: 132rpx;}
			.birthday{
			  position: absolute; top: 158rpx;left: 434rpx;
			  font-size: 16rpx;
			  color: #9f6a44;
			}
			.memberNumber{
			  position: absolute;top: 182rpx;left: 290rpx;
			  font-size: 19rpx;
			  color: #9f6a44;
			  font-weight: 600;
			  letter-spacing: 1px;
			}
			.phone{
			  position: absolute;    top: 292rpx;left: 340rpx;
			  font-size: 16rpx;
			  color: #bc9060;
			}
			.service{
			  position: absolute;
			  top: 313rpx;
			  left:  340rpx;
			  font-size: 16rpx;
			  color: #bc9060;
			
			}
			.validity{
			  position: absolute;
			  top: 336rpx;
			  left:  340rpx;
			  font-size: 16rpx;
			  color: #bc9060;
			
			}
			.nameC{
			  position: absolute;
			  top: 146rpx;
			  left: 240rpx;
			  color: #9f6a44;
			  font-weight: 600;
			  line-height: 1;
			}
			.content{
			  width: 120rpx;
			  box-sizing: border-box;
			  display: flex;
			  align-items: center;
			  //white-space: nowrap;
			  overflow: hidden;
			  overflow-x: auto;
			  transform-origin: 0 55%;
			  white-space: nowrap;
			}
		}
	}
</style>