<template>
	<view class="applyTrial-container container">
		<view class="tip">请上传您的名片信息，以便工作人员更好地为您服务</view>
		<view class="apply-top">
			<view class="add_icon upload-ico" v-if="!fileList.length" @click="ChooseFile">
				<u-icon name="plus" color="#9C9C9C" size="48"></u-icon>
				<text class="add-tip">上传图片</text>
			</view>
			<view class="add_icon" v-for="(item,index) in fileList" :key="item" v-else>
				<image class="img" :src="item" @click="viewImage(item, fileList)">
				</image>
				<icon type="clear" size="16" class="del-ico" color="#f00" @click.stop="delImg(index)"/>
			</view>	
			<view class="card_default_cont">
				<image :src="img" mode="" class="card_default" @click="viewImage(img,img.split())"></image>
				<text class="tip">名片示例</text>
			</view>
		</view>
		<view class="apply-info-cont">
			<view class="ipt-item">
				<label class="item-label">姓名</label>
				<input type="text" v-model="name" class="ipt" placeholder="请输入姓名">
			</view>
			<view class="ipt-item">
				<label class="item-label">公司名</label>
				<input type="text" v-model="company" class="ipt" placeholder="请输入公司名">
			</view>
			<view class="ipt-item">
				<label class="item-label">手机号</label>
				<input type="number" v-model="mobile" class="ipt" maxlength="11" disabled>
			</view>
			<view class="btn-cont" @click="applyHandle">
        提交
				<!-- <image src="@/static/img/btn_bg.png" class="btn_bg"></image>
				<text class="btn-txt">提交</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { uploadurl,Mine,User } from '@/config/api.js'
	export default {
		data() {
			return {
				action:'',
				name:'',
				mobile:'',
				company:'',
				img:'https://hongze.oss-accelerate.aliyuncs.com/static/images/202102/20210219/gYD8azAtSeVzL8ZMbAu9mCyCxcTF.png',
				fileList:[],//名片列表
			};
		},
		onLoad() {
			if(this.$db.get('mobile')) {
				this.mobile = this.$db.get('mobile');
			}else {
				this.getPhone();
			}
		},
		methods:{
			/* 获取手机号 */
			getPhone() {
				Mine.getInfo().then(res => {
					if(res.Ret === 200) {
						this.mobile = res.Data.Mobile;
						res.Data.Mobile && this.$db.set('mobile',res.Data.Mobile);
					}
				})
			},
			/* 上传图片 */
			ChooseFile() {
				this.$util.upload.Single(uploadurl,res=>{
					//console.log(res)
					let data = JSON.parse(res.data)
					if(data.Ret === 200) {
						this.fileList = data.Data.ResourceUrl.split();
					}
				})
			},
			/* 提交 */
			applyHandle() {
				if(this.name && this.company && this.fileList.length) {
					User.applyTry({
						ApplyMethod:2,
						BusinessCardUrl: this.fileList.join(','),
						CompanyName: this.company,
						RealName: this.name
					}).then(res => {
						if(res.Ret === 200) {								
							uni.redirectTo({
								url:"/pages/applyResult/applyResult"
							})
						}
					})
				}else {
					this.$util.toast(`请${!this.fileList.length ? '上传名片' : !this.name ? '输入姓名' : !this.company ? '输入公司名' : ''}`);
				}
			},
			//预览图片
			viewImage(path, imgList) {
				uni.previewImage({
					current: path, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				});
			},
			 // 删除图片
			delImg(index) {
				uni.showModal({
					 title: '',
					 content: '确定要删除图片吗 ?',
					 success: (res)=> {
						  if (res.confirm) {
								this.fileList.splice(index, 1);
						  }
					 }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.applyTrial-container {
	background-color: #fff;
	.tip {
		padding: 11rpx 32rpx;
		background: #F7F7F7;
		color: #B2B2B2;
		font-size: 24rpx;
	}
	.apply-top {
		padding: 30rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.add_icon {
			width: 330rpx;
			height: 200rpx;
			position: relative;
			.del-ico {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
			.img {
				width: 330rpx;
				height: 200rpx;
			}
			&.upload-ico {
				padding-top: 50rpx;
				text-align: center;
				background-color: #F7F7F7;
				color: #4A4A4A;
				.add-tip {
					margin-top: 10rpx;
				}
			}
		}
		.card_default_cont {
			position: relative;
			.card_default {
				width: 330rpx;
				height: 200rpx;
				display: block;
			}
			.tip {
				background-color: rgba($color: #000000, $alpha: 0.5);
				border-radius: 8rpx;
				padding: 12rpx 22rpx;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 1;
			}
		}
	}
	.apply-info-cont {
		border-top: 10rpx solid #F7F7F7;
		.ipt-item {
			padding: 33rpx 32rpx;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			.item-label {
				text-align: justify;
				text-align-last: justify;
				display: inline-block;
				width: 106rpx;
				margin-right: 40rpx;
			}
			.ipt {
				width: 500rpx;
				font-size: 32rpx;
				color: #666;
			}
		}
		.btn-cont {
			width: 368rpx;
			height: 80rpx;
			// position: relative;
			background:linear-gradient(268deg, #2DDBFF 0%, #1599FF 49%, #005EFF 100%);
			color: #fff;
			font-size: 34rpx;
			margin: 120rpx auto 0;
			text-align: center;
			line-height: 80rpx;
			.btn_bg {
				width: 100%;
				height: 80rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn-txt {
				width: 100%;
				position: absolute;
				z-index: 1;
			}
		}
	}
		
}
</style>
