<template>
	<view>
		<view class="infor-box" v-for="(item,index) in list" :key="index">
				<view class="infor-title">{{ item.title }}<text v-if="item.type !== 21" class="fbt">*</text></view>
				<input v-if="item.type === 0" placeholder="请输入" name="input" v-model.trim="item.content"></input>
				<radio-group v-if="item.type === 1" name="" @change="radioChange">
					<label class="w100">
						<radio value="0" :checked="che===0?true:false" /></radio><text>女</text>
						<radio value="1" :checked="che===1?true:false" /></radio><text>男</text>
					</label>
				</radio-group>

				<view v-if="item.type === 20" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="idPhotoUrl"></image>
						</view>
					</view>
				</view>
				
				<view v-if="item.type === 21" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="coachCertificateUrl"></image>
						</view>
					</view>
				</view>
				
				<text v-if="item.type === 20" class="tips">用于生成参赛证及比赛证书</text>
		</view>
		<button v-show="isId-0===0" class="btn cu-btn bg-green margin-tb-sm lg" @tap="submit">提交</button>
		<button v-show="isId-0===1" class="btn cu-btn bg-blue margin-tb-sm lg" @click="change">修改</button>
	</view>
</template>

<script>
	import { savecoach } from 'api/savecoach'
	import { coachInfo } from 'api/coachInfo'
	import { photoBase64 } from 'api/photoBase64'
	export default {
		async onLoad(option) {
			const that = this
			if(option.id) {
				console.log(option)
				try{
					const params = {
						param: {
							coachId: option.id
						}
					}
					const data = await coachInfo(params)
					console.log(data)
					that.list[0].content = data.name
					that.che = data.gender
					that.list[2].content = data.phone
					that.list[3].content = data.idCard
					that.isId = 1
					that.guideId = data.coachId
					that.idPhoto = data.idPhotoId
					that.idPhotoUrl = data.idPhoto
					that.coachCertificate = data.coachCertificateId
					that.coachCertificateUrl = data.coachCertificate
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		data() {
			return {
				list: [{
					title:'姓名',
					type: 0,// 0是输入框，1是单选框，2是图片选择
					content: ''
					}, {
					title:'性别',
					type: 1,
					content: ''
					}, {
					title:'联系方式',
					type: 0,
					content: ''
					}, {
					title:'身份证号',
					type: 0,
					content: ''
					}, {
					title:'一寸证件照（图片大小不得大于2M）',
					type: 20,
					content: 'idPhoto'
					}, {
					title:'教练证（图片大小不得大于2M）',
					type: 21,
					content: 'coachCertificate'
				}],
				che: 0,
				isId: 0,
				idPhoto: 0,
				idPhotoUrl: '',
				coachCertificate: '',
				coachCertificateUrl: '',
				guideId: 0
			}
		},
		methods: {
			radioChange(e) {
				const that = this
				that.che = e.detail.value - 0
				console.log(that.che)
			},
			jump(type) {
				const that = this
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function (res) {
						if (res.tempFiles[0].size > 2*1024*1024) {
							uni.showToast({
								title: '图片超过2M，请重新选择',
								icon: 'none',
								duration: 1500
							})
						} else {
							const tempFilePaths = res.tempFilePaths[0]
							that[`${type}`] = tempFilePaths
							uni.uploadFile({
									url: '//www.tall.wiki/gateway/mt/file/upload/photo',
									filePath: tempFilePaths,
									header:{
										"Authorization" : "Bearer " + that.$store.state.user.user.token
									},
									name: 'file',
									success: (res) => {
											// console.log(JSON.stringify());
											const jsondata = JSON.parse(res.data)
											console.log(jsondata)
											that[`${type}Url`] = jsondata.data.visitUrl
											that[`${type}`] = jsondata.data.id
									}
							});
						}
						// that.urlTobase64(res.tempFilePaths[0],type);
					}
				})
			},
			// urlTobase64(url,type){
			// 	const that = this
			// 	uni.request({
			// 		url: url,
			// 		method: 'GET',
			// 		responseType: 'arraybuffer',
			// 		success: async res => {
			// 			let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
			// 			base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
			// 			// console.log(base64);
						
			// 			try{
			// 				const params = {
			// 						fileBase64: base64
			// 				}
			// 				const data = await photoBase64(params)
			// 				that[`${type}Url`] = data.visitUrl
			// 				that[`${type}`] = data.id
			// 			}catch(e){
			// 			}
			// 		}
			// 	});
			// },
			async submit() {
				const that = this
				// console.log('提交事件')
				if (that.list[0].content === '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.list[2].content === '') {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none',
						duration: 1500
					})
				}  else if (!/^1([3-9])[0-9]{9}$/.test(that.list[2].content)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}else if (that.list[3].content === '') {
					uni.showToast({
						title: '身份证号不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.idPhoto - 0 === 0) {
					uni.showToast({
						title: '请上传一寸证件照',
						icon: 'none',
						duration: 1500
					})
				} else {
					try{
						const params = {
							param: {
								companyId: that.$store.state.project.companyId,
								identity: 1,
								name: that.list[0].content,
								gender: that.che,
								phone: that.list[2].content,
								idCard: that.list[3].content,
								idPhoto: that.idPhoto,
								coachCertificate: that.coachCertificate
							}
						}
						const data = await savecoach(params)
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 1500
						})
						that.$store.state.project.num++
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}catch(e){
						//TODO handle the exception
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			async change() {
				const that = this
				if (that.list[0].content === '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.list[2].content === '') {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none',
						duration: 1500
					})
				}  else if (!/^1([3-9])[0-9]{9}$/.test(that.list[2].content)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}else if (that.list[3].content === '') {
					uni.showToast({
						title: '身份证号不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.idPhoto - 0 === 0) {
					uni.showToast({
						title: '请上传一寸证件照',
						icon: 'none',
						duration: 1500
					})
				} else {
					try{
						const params = {
							param: {
								coachId: that.guideId,
								companyId: that.$store.state.project.companyId,
								identity: 1,
								name: that.list[0].content,
								gender: that.che,
								phone: that.list[2].content,
								idCard: that.list[3].content,
								idPhoto: that.idPhoto,
								coachCertificate: that.coachCertificate
							}
						}
						const data = await savecoach(params)
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 1500
						})
						that.$store.state.project.num++
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}catch(e){
						//TODO handle the exception
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 1500
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infor-box {
		width: 680rpx;
		margin-left: 35rpx;
		margin-top: 25px;
		border-bottom: 1px solid #eee;
	}
	.infor-title {
 		font-size: 16px;
		color: #505050;
		margin-bottom: 10px;
	}
	.w100 {
		width: 680rpx;
		display: flex;
		radio {
			margin-right: 50rpx;
		}
		text {
			flex: 1;
		}
	}
	.btn {
		width: 600rpx;
		margin: 50px 0 0 75rpx;
	}
	.tips {
		color: $gray;
		font-size: 14px;
	}
	.fbt {
		color: $red;
	}
	.img-box {
		width: 150rpx;
		height: 150rpx;
	}
</style>
