<template>
	<view class="content">
		<view class="info">
			<view class="cro">
				<view class="cro_left_bottom"></view>
				<view class="cro_right_bottom"></view>
				<view class="img">
					<u-image
						width="100%"
						mode="widthFix"
						:src="item"
						v-for="item in info.pic"
					></u-image>
					<view class="info_name">{{ info.name }}</view>
				</view>
			</view>
			<view class="cro cro2">
				<view class="cro_left_top"></view>
				<view class="cro_right_top"></view>
				<view class="u-content ql-editor img">
					<u-parse :html="info.note"></u-parse>
				</view>
			</view>
			<view class="" style="margin-top: 15px; border-radius: 10px; overflow: hidden">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
			</view>
			<view class="cro3" v-show="current == 0">
				<!-- :error-type="['border-bottom']" -->
				<u-form
					:model="form"
					ref="uForm"
					label-width="200"
					:label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }"
				>
					<view style="text-align: center; color: #333; font-size: 36rpx; font-weight: bold">身份验证</view>

					<u-form-item label="手机号" prop="phone">
						<u-input placeholder="请填写手机号" v-model="form.phone" type="number" maxlength="11"></u-input>
					</u-form-item>
					<u-form-item label="验证码" prop="code">
						<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
						<view slot="right" @click="getCode" style="color: #f09b38">{{ codeTips }}</view>
					</u-form-item>
					<view style="text-align: center; margin: 15px; color: #333; font-size: 36rpx; font-weight: bold"
						>收货地址</view
					>
					<u-alert-tips
						type="warning"
						title=""
						description="默认收货手机号和领取手机号相同，如要用另外手机号提货，请修改下面收货手机号"
					></u-alert-tips>
					<u-form-item label="收货姓名" prop="otherName">
						<u-input v-model="form.otherName" placeholder="请填写收货人姓名" />
					</u-form-item>
					<u-form-item label="收货手机号" prop="otherPhone">
						<u-input placeholder="请填写收货手机号" v-model="form.otherPhone" type="number" maxlength="11"></u-input>
					</u-form-item>
					<u-form-item label="选择地区" prop="city">
						<u-input v-model="form.city" type="select" placeholder="请选择省市区" @click="show = true" />
					</u-form-item>
					<u-form-item label="详细地址" prop="details">
						<u-input v-model="form.details" type="text" placeholder="街道楼栋门牌号" />
					</u-form-item>
				</u-form>
				<u-button class="custom-style" shape="circle" hover-class="none" @click="submit">我要提货</u-button>
				<u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			</view>
			<view class="cro3" v-show="current == 1">
				<u-form
					:model="checkForm"
					ref="check"
					label-width="200"
					:label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }"
				>
					<view style="text-align: center; color: #333; font-size: 36rpx; font-weight: bold">物流单号</view>
					<u-form-item label="手机号" prop="phone"
						><u-input placeholder="请填写手机号" v-model="checkForm.phone" type="number" maxlength="11"></u-input
					></u-form-item>
					<!-- <u-form-item label="验证码" prop="code">
						<u-input placeholder="请输入验证码" v-model="checkForm.code" type="text"></u-input>
						<view slot="right" @click="getCode2" style="color: #f09b38">{{ codeTips2 }}</view>
					</u-form-item> -->
					<u-form-item label="验证码" prop="code">
						<u-input placeholder="请输入验证码" v-model="checkForm.code" type="text"></u-input>
						<view slot="right" v-if="current == 1"><code-pic ref="child" /></view>
					</u-form-item>
					<u-button class="custom-style" shape="circle" hover-class="none" @click="handleSubmit">查询物流单号</u-button>
					<u-verification-code seconds="60" ref="uCode2" @change="codeChange2"></u-verification-code>
				</u-form>
			</view>
		</view>
		<u-popup
			v-model="show2"
			mode="center"
			border-radius="14"
			:mask-close-able="false"
			closeable
			width="60%"
			height="100px"
		>
			<view style="height: 100%; line-height: 100px; text-align: center">{{ message }}</view>
		</u-popup>
    <u-popup
			v-model="handleShow.hidden"
			mode="center"
			border-radius="14"
			:mask-close-able="false"
			closeable
			width="80%"
			height="270px"
      style="overflow: hidden;"
		>
    <view style="text-align: center; width: 100%;">
      <u-image
      	width="60%"
      	height="450rpx"
      	mode="aspectFit"
      	src="../../static/404.jpg"
        style="margin: auto"
      ></u-image>
    </view>
			<view style="text-align: center">{{handleShow.message}}</view>
		</u-popup>
    <u-modal title="快递单号" v-model="showModal" mask-close-able show-cancel-button cancel-text="复制单号" confirm-text="查看物流" @cancel="copy(logistics.trackingNumber)" @confirm="handlePage" :content="logistics.trackingUnit+'：'+logistics.trackingNumber"></u-modal>
	</view>
</template>

<script>
import { getInfo, getCode, addOrder,getTrackingInfo } from '@/common/api.js'
import codePic from '@/components/code/code.vue'
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
export default {
	components: {
		codePic,
	},
	data() {
		return {
			list: [
				{
					name: '提货',
				},
				{
					name: '查询',
				},
			],
			current: 0,
			info: {},
			options: {},
			form: {
				otherName: '',
				phone: '',
				city: '',
				details: '',
				address: '',
				otherPhone: '',
			},
			checkForm: {
				phone: '',
			},
			show: false,
			show2: false,
      handleShow:{
        hidden:false,
        message:''
      },
      showModal:false,
			message: '',
			arrCode: [],
			radio: '',
			switchVal: false,
			codeTips: '',
			codeTips2: '',
      logistics:{},
			rules: {
				otherName: [
					{
						required: true,
						message: '请输入收货姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur'],
					},
				],
        otherPhone: [
        	{
        		required: true,
            min: 11,
        		message: '请填写收货手机号',
        		trigger: ['change', 'blur'],
        	},
        ],
				phone: [
					{
						required: true,
						min: 11,
						message: '请输入正确的手机号',
						trigger: 'blur',
					},
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					},
				],
				city: [
					{
						required: true,
						message: '请选择地区',
						trigger: 'blur',
					},
				],
				details: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur',
					},
				],
			},
		}
	},
	onLoad(options) {
		if (!options.id) return this.$u.toast('请扫描二维码访问')
		// uni.$showMsg('请扫描二维码访问')
		this.options = options
		getInfo(options).then(({ data }) => {
      data.pic = data.pic.split(',')
			this.info = data
		})
	},
	methods: {
		// 切换tab
		changeTabs(index) {
			this.current = index
		},
		// 提货提交
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form)
					console.log('验证通过')
					this.form.address = this.form.city + this.form.details
					this.form.activityId = this.options.id
					addOrder(this.form)
						.then(({ code, message }) => {
							if (code != 200) {
								this.show2 = true
								this.message = message
								return
							}
							uni.navigateTo({
								url: '/pages/index/fillForm',
							})
						})
						.catch(err => {
							console.log(err)
						})
				} else {
					console.log('验证失败')
				}
			})
		},
		handleSubmit() {
			if (this.checkForm.phone.length !== 11) return this.$u.toast('请填写正确的手机号')
			if (!this.checkForm.code) return this.$u.toast('验证码不能为空')
      uni.getStorage({
        key:'imgcode',
        success: (res) => {
          if(this.checkForm.code.toLowerCase()!==res.data) return this.$u.toast('验证码不一致')
          getTrackingInfo({phone:this.checkForm.phone,activityId:this.options.id}).then(({code,data,message})=>{
            if(code!==200){
              // this.show2 = true
              // this.message = message
              this.handleShow.hidden = true
              this.handleShow.message = message
              return
            }
            this.showModal = true
            this.logistics = data
          })
        },
        fail:(err)=> this.$u.toast(err.errMsg)
      })
		},
    copy(numbers) {
      uniCopy({
          content:numbers,
          success:(res)=>{
              uni.showToast({
                  title: res,
                  icon: 'none'
              })
          },
          error:(e)=>{
              uni.showToast({
                  title: e,
                  icon: 'none',
                  duration:3000,
              })
          }
      })
    },
		handlePage() {
			const id = this.logistics.trackingNumber
      let url = ''
      if(this.logistics.trackingUnit==='京东'){
        url = 'https://www.jdl.cn/orderSearch?waybillNo='
        
      }else if(this.logistics.trackingUnit==='德邦'){
        url = 'https://www.deppon.com/mow/www/queryByText/waybillDetails.html?orderNumber='
      }else{
        url = 'https://m.kuaidi100.com/result.jsp?nu='
        // uni.navigateTo({
        //   url:'/pages/index/check?src='+'https://m.kuaidi100.com/result.jsp?nu='+id
        // })
      }
      window.location.href = url + id
		},
		codeChange(text) {
			this.codeTips = text
		},
		codeChange2(text) {
			this.codeTips2 = text
		},
		// 获取提货验证码
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				if (this.form.phone.length !== 11) return
				uni.showLoading({
					title: '正在获取验证码',
					mask: true,
				})
				getCode({
					phone: this.form.phone,
					activityId: this.options.id,
					unit: this.info.unit,
				}).then(({ code, data, message }) => {
					if (code != 200) {
						this.show2 = true
						this.message = message
						return
					}
					this.form.unit = data.unit
					this.form.id = data.id
					this.form.otherPhone = data.phone
					this.form.otherName = data.name
					uni.hideLoading()
					this.$u.toast('验证码已发送')
					this.$refs.uCode.start()
				})
			} else {
				this.$u.toast('倒计时结束后再发送')
			}
		},
		// 获取单号验证码
		getCode2() {
			if (this.checkForm.phone.length !== 11) return this.$u.toast('请填写正确的手机号')
			if (this.$refs.uCode2.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码',
					mask: true,
				})
				setTimeout(() => {
					uni.hideLoading()
					this.$u.toast('验证码已发送')
					this.$refs.uCode2.start()
				}, 2000)
			}
		},
		change(e) {
			this.form.city = e.province.label + e.city.label + e.area.label
			this.arrCode = [e.province.value, e.city.value, e.area.value]
		},
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
}
</script>

<style lang="scss" scoped>
@import '/static/css/quill.core.css';
@import '/static/css/quill.snow.css';

.content {
	// height: calc(100vh - 100rpx);
	height: 100vh;
	background: url(../../static/bgi.png) no-repeat;
	background-size: 100% 100%;
	overflow: auto;

	.info {
		padding: 52rpx 25rpx 34rpx;

		.cro {
			width: 100%;
			background-color: #ffffff;
			position: relative;
			border-radius: 15px 15px 0 0;

			.img {
        // display: flex;
        // flex-direction: column;
				padding: 40rpx;
				// font-size: 30rpx;
				// color: #666666;

				.u-image {
          /deep/.u-image__image{
            vertical-align: middle;
          }
					// overflow: hidden !important;
				}
        .info_name{
          font-size: 36rpx;
          color: #333333;
          margin-top: 40rpx
        }
			}
		}

		.cro2 {
			width: 100%;
			border-top: 1px dashed #dedede;
			background-color: #ffffff;
			position: relative;
			border-radius: 0 0 15px 15px;
		}

		.cro3 {
			margin-top: 15px;
			background-color: #ffffff;
			padding: 40rpx;
			border-radius: 15px;

			/deep/.uni-input-input {
				color: #666 !important;
				font-size: 30rpx;
			}
		}

		.cro_left_top,
		.cro_right_top,
		.cro_left_bottom,
		.cro_right_bottom {
			position: absolute;
			width: 10px;
			height: 10px;
			z-index: 1;
			background-color: #fc843f;
		}

		.cro_left_top {
			top: -1px;
			left: -1px;
			border-radius: 0 0 10px 0;
		}

		.cro_right_top {
			top: -1px;
			right: -1px;
			background-color: #f99954;
			border-radius: 0 0 0 10px;
		}

		.cro_left_bottom {
			left: -1px;
			bottom: -1px;
			border-radius: 0 10px 0 0;
		}

		.cro_right_bottom {
			right: -1px;
			bottom: -1px;
			background-color: #f99954;
			border-radius: 10px 0 0 0;
		}
	}

	.custom-style {
		height: 88rpx;
		color: #fffefd;
		background: #f09b38;
		border-radius: 44px;
		font-size: 36rpx;
	}

	.m_btn {
		position: absolute;
		bottom: 0;
		width: 100%;

		.u-btn {
			background: #ff4900;
			border-radius: 0;
			height: 100rpx;
			font-size: 36rpx;
			color: #fffefd;
		}
	}
}
</style>
