<template>
	<view class="register">
		<view class="list">
			<view class="lisl">样品名称</view>
			<input placeholder="请输入样品名称" v-model="form.sampleName" class="lisr"/>
		</view>
		<view class="list">
			<view class="lisl">样品数量</view>
			<input placeholder="请输入样品数量，单位默认：个" type="number" v-model="form.sampleNum" class="lisr"/>
		</view>
		<view class="list">
			<view class="lisl">规格型号</view>
			<input placeholder="请输入规格型号" v-model="form.normsModel" class="lisr"/>
		</view>
		<view class="list">
			<view class="lisl">检验项目</view>
			<input placeholder="请选择检验项目" disabled @click="getSelect(0)" v-model="testItems" class="lisr"/>
			<image :src="rimg" class="lisrimg"></image>
		</view>
		<view class="list">
			<view class="lisl">提供方式</view>
			<input placeholder="请选择提供样品方式" disabled @click="getSelect(1)" v-model="provideType" class="lisr"/>
			<image :src="rimg" class="lisrimg"></image>
		</view>
		<view class="list">
			<view class="lisl">取报告方式</view>
			<input placeholder="请选择取报告方式" disabled @click="getSelect(2)" v-model="takeReportType" class="lisr"/>
			<image :src="rimg" class="lisrimg"></image>
		</view>
		<view class="list">
			<view class="lisl">样品处理方式</view>
			<input placeholder="请选择样品处理方式" disabled @click="getSelect(3)" v-model="handleType" class="lisr"/>
			<image :src="rimg" class="lisrimg"></image>
		</view>
		
		<!-- 收件人地址 -->
		<view v-if="adrflag">
			<view class="list">
				<view class="lisl">收件人姓名</view>
				<input placeholder="请输入收件人姓名" v-model="form.takeName" class="lisr"/>
			</view>
			<view class="list">
				<view class="lisl" @click="getCall(form.takePhone)">收件人手机号</view>
				<input placeholder="请输入收件人手机号" maxlength="11" @blur="getBlur(form.takePhone,0)" type="number" v-model="form.takePhone" class="lisr"/>
				<view class="listtit" v-if="takeflag">请输入正确的收件人手机号</view>
			</view>
			<view class="list">
				<view class="lisl">收件人地址</view>
				<input placeholder="请输入收件人地址" v-model="form.takeAddress" class="lisr"/>
			</view>
		</view>
		
		
		
		<view class="list">
			<view class="lisl">送检单位名称</view>
			<input placeholder="请输入送检单位名称" type="text" v-model="form.manufacturerName" class="lisr"/>
		</view>
		<view class="list">
			<view class="lisl" @click="getCall(form.manufacturerPhone)">联系电话</view>
			<input placeholder="请输入联系电话" maxlength="11" @blur="getBlur(form.manufacturerPhone,1)" type="number" v-model="form.manufacturerPhone" class="lisr"/>
			<view class="listtit" v-if="manflag">请输入正确的联系电话</view>
		</view>
		<view class="list">
			<view class="lisl">委托单位名称</view>
			<input placeholder="请输入委托单位名称" type="text" v-model="form.inspectedName" class="lisr"/>
		</view>
		<view class="list">
			<view class="lisl" @click="getCall(form.inspectedPhone)">联系电话</view>
			<input placeholder="请输入联系电话" maxlength="11" @blur="getBlur(form.inspectedPhone,2)" type="number" v-model="form.inspectedPhone" class="lisr"/>
			<view class="listtit" v-if="insflag">请输入正确的联系电话</view>
		</view>
		<view class="pd10">
			<view class="lisl ">备注信息</view>
			<textarea placeholder="请输入其他需要备注说明的信息…" v-model="form.remark" class="lisrtxt"></textarea>
			
		</view>
		<view class="reg_btn" @click="getSubmit">提交</view>
		<view class="reg_txt">* 本机构检验时间一般不超过10个工作日，特殊情况在收到送检样品时会 向客户说明。</view>
		<!-- 弹窗 -->
		<view class="bgshow" v-if="selectflag" @click="getClose"></view>
		<view class="select" v-if="selectflag">
			<view class="select_tit">
				<view class="select_del" @click="getClose">取消</view>
				<view class="select_sur" @click="getSure">确认</view>
			</view>
			<view class="select_txt">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				    <picker-view-column v-if="selectlist.length">
				        <view class="item" v-for="(item,index) in selectlist" :key="index">{{item.dictLabel}}</view>
				    </picker-view-column>
					<picker-view-column v-else>
					    <view class="item">暂无数据</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		<!-- <xl-slider-verify @success="verifySuccess" :reset="false"></xl-slider-verify> -->
		 </form>
	</view>
</template>

<script>
	// import xlSliderVerify from '@/components/slider-verify.vue'
	export default{
		// components:{
		// 			xlSliderVerify
		// 		},
		data(){
			return{
				visible:true,
				indicatorStyle: `height: 50px;`,
				selectlist:['d','a'],
				value:[0],
				selectflag:false,
				form:{
					"sampleName":"",//样品名称
					"sampleNum":"",//样品数量
					"normsModel":"",//规格型号
					"testItems":"",//检验项目
					"provideType":"",//提供方式
					 "manufacturerName":"",//送检单位名称
					"manufacturerPhone":"",//送检单位电话
					 "inspectedName":"",//委托单位名称
					"inspectedPhone":"",//委托单位电话
					"remark":"",
					"takeReportType":"",//取报告方式
					"handleType":"",//样品处理方式
					"takeName":'',//收件人姓名
					"takePhone":'',//收件人手机号
					"takeAddress":'',//收件人地址
				},
				adrflag:false,//地址
				inspectlist:[],//检验项目
				provisionList:[],//提供方式
				takeReportList:[],//取报告方式
				handleList:[],//样品处理方式
				phoenum:['',''],//编码
				selectval:0,//选择的
				sureidx:-1,
				selectidxs:[0, 0, 0, 0,0],
				testItems:'',
				provideType:'',
				takeReportType:'',
				handleType:'',
				rimg:require("@/static/index_r.png"),
				takeflag:false,
				manflag:false,
				insflag:false,
			}
		},
		onLoad() {
			this.getInspect()
			this.getprovision();
			this.gettakeReport();
			this.gethandle();
		},
		methods:{
			getCall(e){
				var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(e&&e.length==11&&myreg.test(e)){
					uni.makePhoneCall({
						phoneNumber:e,
						success:function(){
							
						}
					})
				}	
			},
			getBlur(e,idx){
				var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!e || e.length!=11 || !(myreg.test(e))){
					if(idx==0){
						this.takeflag=true
					}else if(idx==1){
						this.manflag=true
					}else if(idx==2){
						this.insflag=true
					}
				}else{
					if(idx==0){
						this.takeflag=false
					}else if(idx==1){
						this.manflag=false
					}else if(idx==2){
						this.insflag=false
					}
				}	
			},
			//获取字典值
			getInspect(){
				var that=this;
				this.$http.get('gateway/query/type/inspection_item').then(res => {
					if(res.code == '200') {
						that.inspectlist=res.data
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			getprovision(){
				var that=this;
				this.$http.get('gateway/query/type/provision_mode').then(res => {
					if(res.code == '200') {
						that.provisionList=res.data
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			gettakeReport(){
				var that=this;
				this.$http.get('gateway/query/type/takeReport_type').then(res => {
					if(res.code == '200') {
						that.takeReportList=res.data
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			gethandle(){
				var that=this;
				this.$http.get('gateway/query/type/handle_Type').then(res => {
					if(res.code == '200') {
						that.handleList=res.data
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			bindChange(e){
				const val = e.detail.value;
				this.selectval=val;
				var idx = val;
				if(this.selectlist.length){
					if (this.sureidx == 0) {
						this.selectidxs[0] = idx;
						this.testItems = this.inspectlist[idx].dictLabel;
						this.form.testItems = this.inspectlist[idx].dictValue;
					}else if(this.sureidx==1){
						this.selectidxs[1] = idx;
						this.provideType = this.provisionList[idx].dictLabel;
						this.form.provideType = this.provisionList[idx].dictValue;
					}else if(this.sureidx==2){
						this.selectidxs[2] = idx;
						this.takeReportType = this.takeReportList[idx].dictLabel;
						this.form.takeReportType = this.takeReportList[idx].dictValue;
						var takeidx=this.takeReportList[idx].dictValue
						// 判断是否是邮寄
						if(takeidx==1){
							this.adrflag=true
						}else{
							this.adrflag=false;
						}
					}else if(this.sureidx==3){
						this.selectidxs[3] = idx;
						this.handleType = this.handleList[idx].dictLabel;
						this.form.handleType = this.handleList[idx].dictValue;
					}
				}
				
			},
			getSelect(idx){
				this.selectval=0;
				this.value[0] = this.selectidxs[idx];
				if(idx==0){
					this.selectlist=this.inspectlist;
					if(!this.form.testItems&&this.selectlist.length){
						this.testItems = this.inspectlist[0].dictLabel;
						this.form.testItems = this.inspectlist[0].dictValue;
					}
				}else if(idx==1){
					this.selectlist=this.provisionList
					if(!this.form.provideType&&this.selectlist.length){
						this.provideType = this.provisionList[0].dictLabel;
						this.form.provideType = this.provisionList[0].dictValue;
					}
				}else if(idx==2){
					this.selectlist=this.takeReportList
					
					
					if(!this.form.takeReportType&&this.selectlist.length){
						
						this.takeReportType = this.takeReportList[0].dictLabel;
						this.form.takeReportType = this.takeReportList[0].dictValue;
						var takeidx=this.takeReportList[0].dictValue
						// 判断是否是邮寄
						if(takeidx==1){
							this.adrflag=true
						}else{
							this.adrflag=false;
						}	
					}
				}else if(idx==3){
					this.selectlist=this.handleList
					if(!this.form.handleType&&this.selectlist.length){
						this.handleType = this.handleList[0].dictLabel;
						this.form.handleType = this.handleList[0].dictValue;
					}
				}
				this.sureidx=idx;
				this.selectflag=true;	
			},
			getSure(){
				var idx = this.selectval;
				if(this.selectlist.length){
					if (this.sureidx == 0) {
						this.selectidxs[0] = idx;
						this.testItems = this.inspectlist[idx].dictLabel;
						this.form.testItems = this.inspectlist[idx].dictValue;
					}else if(this.sureidx==1){
						this.selectidxs[1] = idx;
						this.provideType = this.provisionList[idx].dictLabel;
						this.form.provideType = this.provisionList[idx].dictValue;
					}else if(this.sureidx==2){
						this.selectidxs[2] = idx;
						this.takeReportType = this.takeReportList[idx].dictLabel;
						this.form.takeReportType = this.takeReportList[idx].dictValue;
						var takeidx=this.takeReportList[idx].dictValue
						// 判断是否是邮寄
						if(takeidx==1){
							this.adrflag=true
						}else{
							this.adrflag=false;
						}
					}else if(this.sureidx==3){
						this.selectidxs[3] = idx;
						this.handleType = this.handleList[idx].dictLabel;
						this.form.handleType = this.handleList[idx].dictValue;
					}
				}
				this.selectflag=false;
				
			},
			tipsFn(tit,icon){
				icon=icon||'none'
				uni.showToast({
					title:tit,
					icon:icon,
					duration:1200
				})
			},
			verifySuccess(){
				console.log('验证成功')
			},
			// 提交
			getSubmit(){
				var that=this;
				var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!this.form.sampleName){
					this.tipsFn("请输入样品名称");
					return
				}
				if(!this.form.sampleNum){
					this.tipsFn("请输入样品数量");
					return
				}
				if(!this.form.normsModel){
					this.tipsFn("请输入规格型号");
					return
				}
				if(!this.form.testItems){
					this.tipsFn("请选择检验项目");
					return
				}
				if(!this.form.provideType){
					this.tipsFn("请选择提供方式");
					return
				}
				if(!this.form.takeReportType){
					this.tipsFn("请选择取报告方式");
					return
				}
				if(this.form.takeReportType==1){
					if(!this.form.takeName){
						this.tipsFn("请输入收件人姓名");
						return
					}
					if(!this.form.takePhone||this.form.takePhone.length!=11||!myreg.test(this.form.takePhone)){
						this.tipsFn("请输入正确的收件人手机号");
						return
					}
					if(!this.form.takeAddress){
						this.tipsFn("请输入收件人地址");
						return
					}
				}else{
					this.form.takeName=''
					this.form.takePhone=''
					this.form.takeAddress=''
				}
				if(!this.form.handleType){
					this.tipsFn("请选择样品处理方式");
					return
				}
				if(!this.form.manufacturerName){
					this.tipsFn("请输入送检单位名称");
					return
				}
				if(!this.form.manufacturerPhone||this.form.manufacturerPhone.length!=11||!myreg.test(this.form.manufacturerPhone)){
					this.tipsFn("请输入正确的送检单位电话");
					return
				}
				if(!this.form.inspectedName){
					this.tipsFn("请输入委托单位名称");
					return
				}
				if(!this.form.inspectedPhone||this.form.inspectedPhone.length!=11||!myreg.test(this.form.inspectedPhone)){
					this.tipsFn("请输入正确委托单位电话");
					return
				}
				this.$http.posta('gateway/query/sendInspectInFor',this.form).then(res => {
					if(res.code == '200') {
						// that.tipsFn('送检成功');
						wx.redirectTo({
							url:'/pages/home/registersuccess'
						})
						
					}else{
						that.tipsFn(res.msg);
					}
				})
			},
			getClose(){
				this.selectflag=false
			}
		}
	}
</script>

<style scoped>
.flexc{display: flex;align-items: center;}
.flex2{flex: 0 0 auto;}
.flex1{flex:1;}
.flexjr{justify-content: flex-end;}


.register{padding: 16rpx 32rpx;}
.list{padding: 20rpx 0rpx;display: flex;align-items: center;position: relative;}
.lisl{font-size: 28rpx;font-weight: 500;color: #1E1E1E;flex: 0 0 auto;min-width: 200rpx;}
.lisr{text-align: right;flex:1;font-size: 28rpx;color: #1E1E1E;}
.listr{font-size: 28rpx;color: #1E1E1E;}
.lisra{padding: 0 10rpx;border-bottom: 2rpx solid #B2B2B2;width: 78rpx;font-size: 28rpx;color: #1E1E1E;text-align: center;}
.reg_btn{width: 100%;height: 96rpx;background: #00B034;border-radius: 14rpx;font-size: 32rpx;font-weight: 500;
color: #FFFFFF;text-align: center;line-height: 96rpx;margin-bottom: 22rpx;margin-top: 48rpx;}
.reg_txt{font-size: 22rpx;color: #FF0000;line-height: 34rpx;}
.lisrtxt{width: 100%;height: 138rpx;
background: #ECECEC;
border-radius: 7px;padding: 26rpx 30rpx;font-size: 28rpx;color: #1E1E1E;margin-top: 24rpx;box-sizing: border-box;}
.lisrimg{width: 14rpx;height: 24rpx;flex: 0 0 auto;margin-left: 16rpx;}
.pd10{padding: 20rpx 0;}

 .picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
    }
    .item {
        height: 50px;
		line-height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
	
	
.bgshow{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 10;}
.select{position: fixed;left: 0;right: 0;bottom: 0;height: 680rpx;background: #FFFFFF;z-index: 15;}
.select_tit{height: 80rpx;display: flex;align-items: center;justify-content: space-between;}
.select_del{font-size: 28rpx;color: #333333;height: 80rpx;line-height: 80rpx;padding: 0 20rpx;}
.select_sur{font-size: 28rpx;color: #2C60F1;height: 80rpx;line-height: 80rpx;padding: 0 20rpx;}
.listtit{position: absolute;font-size: 20rpx;color: #FF0000;bottom: -2rpx;right: 0;}
</style>
