<template>
	<div class="templatePayURL" style="display: inline-block; float: right; margin-right: 10px;">
		<el-popover width="320" trigger="manual" v-model="visible">
			<div>
				<p style="margin:0 0 15px 0;">二维码收款
				<i class="el-icon-circle-close-outline fr" style="cursor: pointer; margin: 3px 0 0 0;" @click="closePic()"></i>
				</p>
				<div style="margin: 15px 0;" v-show="!isShowPic">
					<el-input placeholder="请输入金额" v-model="payMoney" 
						  @input="payMoney=/^\d+\.?\d{0,2}$/.test(payMoney)||payMoney == '' ? payMoney : payMoney=''">
						<el-select class='fz12 w120' v-model="payType" slot="prepend" placeholder="请选择费用类型" filterable :readonly="false">
							<el-option v-for='item in fylxList' :label="item.Name" :value="item.ID" :key='item.ID'>
							</el-option>
						</el-select>
					</el-input>
					<p style="margin: 15px 0; text-indent:5px;">
						<el-radio v-model="payWay" label="3">支付宝</el-radio>
						<el-radio v-model="payWay" label="1">微信</el-radio>
					</p>
					<p>
						<input type="button" @click="getPayPic(item)" class="normalBtn w280" value="生成收款码" />
					</p>
				</div>
				<div v-show="isShowPic">
					<img :src="payPic" style="float: left; margin-right: 15px; width: 150px; height: 150px; border: 1px solid #ccc;" />
					<p style="padding-right: 10px; font-size: 12px; line-height: 20px; margin-bottom: 10px;">
						<span style="color: #E95252;">{{payWay=="1"?'微信':'支付宝'}}</span>二维码有效时间为5分钟，为了不影响客户支付，请及时转发，以免失效
					</p>
					<p class="fz12 color333">倒计时</p>
					<p style="color: #E95252; font-weight: bold; font-size: 12px; margin: 8px 0;" >{{descMin}}分{{descSecond}}秒</p>
				</div>
			</div>
				 <el-select  slot="reference" v-model="value" class='w80' placeholder="收款方式" @change='chanceType(item)'>
		       	 	<el-option  label="二维码" value="1"></el-option>
		       	 	<el-option  label="团队收款" value="2"></el-option>
		       	 	<el-option v-if='item.orderState===1'  label="团队退款" value="3"></el-option>
					<el-option label="团队小费" value="4"></el-option>
					<el-option v-if="photoF" label="照片服务费" value="5"></el-option>
				</el-select>
		</el-popover>
	</div>
</template>

<script>
	export default {
		props: ["item","showID","photoF"],
		data() {
			return {
				value:'',
				visible:false,				
				payObj: {},
				payWay: '3',
				minpay: '0',
				payMoney: '0',
				payType: '',
				lastTime: '',
				isShowPic: false,
				payPic: '',
				isDesc: false,
				descMin: 0,
				descSecond: 0,
				descHour:0,
				fylxList: [],
				isShowId:-1,
				checkValue: '',
				begin:0,
				nowDate:new Date(),
				timer:null,
				chaTime:0
			};
		},
		watch:{
			showID:{
				handler: function(val, oldVal) {
					this.isShowId = val;
					if(val!=this.item.orderId){
						this.visible = false;
						this.value = '';
						if(this.timer)
						{
							clearInterval(this.timer)
							
						}
						
					}
            	},
            	deep: true
			}
		},
		mounted() {
			this.getFylx()
		},
		methods: {
			closePic(){
				this.visible=false
				this.value=''
				if(this.timer)
					{

					clearInterval(this.timer)	

					}
			},
			chanceType(obj){
				let TCIDARR=[]
				TCIDARR.push(obj.tcid)
		   		if(this.value==='1')
				{
					this.visible=true
					this.getPayDetail(obj,2)
					this.$emit("childByValue",obj.orderId)
				}else if (this.value ==='2'){
					this.visible=false
					let orderObj = {
						OrderID:obj.orderId,
						OrderSource:8,
						Obj: {},
						SourceID:obj.ID,
						TCIDList: TCIDARR
					}
					this.$router.push({
						name: 'ChoiceAddFinancialDocuments',
						query:{
							"Type":1,
							"companyID":obj.outBranchId,
							"path": "",
							'blank':'y',
							'orderObj':JSON.stringify(orderObj),
							'tradeWay':obj.tradeWay,
							'platformAccount':obj.platformAccount
						}
					});
				} else if (this.value === '3') {
					if(this.item.oP_Remarks && this.item.oP_Remarks!=""){
						this.visible=false
						let orderObj = {
							OrderID:obj.orderId,//订单号
							OrderSource:8,//12
							Obj: {},
							SourceID:obj.ID,//机票id
							TCIDList: TCIDARR
						}
						this.$router.push({
							name: 'ChoiceAddFinancialDocuments',
							query:{
								"Type":2,
								"companyID":obj.outBranchId,//公司id
								"path": "",
								'blank':'y',
								'orderObj':JSON.stringify(orderObj)
							}
						});
					}else{
						this.Error("请让OP先填写OP备注，说明退款情况");
					}
				}else if (this.value === '4') {
					this.visible=false
					let orderObj = {
						OrderID:obj.orderId,
						OrderSource:8,
						CallType:1,
						Obj: {},
						SourceID:obj.ID,
						TCIDList: TCIDARR
					}
					this.$router.push({
						name: 'ChoiceAddFinancialDocuments',
						query:{
							"Type":1,
							"companyID": obj.outBranchId,
							"path": "",
							'blank':'y',
							'orderObj':JSON.stringify(orderObj)
						}
					});
				}else if (this.value === '5') {
					this.visible=false
					let orderObj = {
						OrderID:obj.orderId,
						OrderSource: 8,
						CallType: 2,
						Obj: {},
						TCIDList: []
					}
					this.$router.push({
						name: 'ChoiceAddFinancialDocuments',
						query:{
							"Type": 1,
							"companyID": 49,
							"templateID": JSON.stringify([79]),
							"path": "",
							'blank':'y',
							'orderObj':JSON.stringify(orderObj)
						}
					});
				}
				this.value = ''
		  	 },
			getPayDetail(obj, Type) {
				let nowTime = new Date()
				let ExpireDate = ''
				this.apipost('OnlinePay_post_GetURL', {
					OrderID: obj.orderId,
					OrderSource: 8
				}, res => {
					if(res.data.resultCode == 1) {
						if(Object.keys(res.data.data).length == 0) {
							if(Type == 2) {
								this.getCodeUrl(obj)
							} else {
								this.$message.warning('未生成二维码')
							}
						} else {
							this.lastTime = new Date(res.data.data.ExpireDate)
							this.nowDate=new Date(res.data.data.NowDate)
						    this.chaTime=this.lastTime-this.nowDate
							ExpireDate = new Date(res.data.data.ExpireDate)
							this.timer=setInterval(() => {
								this.descTime(this.chaTime)
							}, 1000);
							this.payPic=res.data.data.CodeURL
							this.isShowPic = true
						}
					} else {

					}
				}, err => {})

				//				if(nowTime>=ExpireDate){
				//					this.$message.warning('二维码过期,请从新生成')
				//					this.isShowPic=false
				//					this.getCodeUrl(obj)
				//				}else{
				//					this.isShowPic=false
				//				}

			},

			getCodeUrl(obj) {
				this.apipost('Financial_post_GetLowPrice', {
					OrderID: obj.orderId,
					OrderResource: 8
				}, res => {
					if(res.data.resultCode == 1) {
						if(res.data.data.LowDeposit != -1) {
							this.minpay = res.data.data.LowDeposit
							this.payMoney = res.data.data.LowDeposit>this.item.preferPrice?this.item.preferPrice:res.data.data.LowDeposit
								
						}
					}
				}, err => {})
			},

			getPayPic(obj) {
				let msg = {}
				msg.OrderSource = 8
				msg.body = obj.description
				msg.attach = this.payType + '|' +obj.contactName+'|'+ obj.orderId+'|'+obj.customerId+'|'+obj.outBranchId
				msg.total_fee = this.payMoney
				msg.payway = this.payWay
				if(this.payType==''){
					this.$message.warning('请选择费用类型！')
					return
				}
				
				this.apipost('OnlinePay_post_GetCodeUrl', msg, res => {
					if(res.data.resultCode == 1) {		
						this.payPic = res.data.data.CodeURL
						this.lastTime = new Date(res.data.data.ExpireDate)
						this.nowDate=new Date(res.data.data.NowDate)
					    this.chaTime=this.lastTime-this.nowDate
						this.begin=this.nowDate.getSeconds()
						this.timer=setInterval(() => {
							this.descTime(this.chaTime)
						}, 1000);
						this.isShowPic = true
					} else {
						this.$message.error(res.data.message)
					}
				}, err => {})
			},
//			descTime(dateString) {
//				this.begin+=1
//				this.nowDate=new Date(this.nowDate.setSeconds(this.begin))
//				// 目标日期时间戳
//				const end = Date.parse(new Date(dateString))
//				// 当前时间戳
//				const now = Date.parse(new Date(this.nowDate))
//				// 相差的毫秒数
//				const msec = end - now
//				// 计算时分秒数
//				let day = parseInt(msec / 1000 / 60 / 60 / 24)
//				let hr = parseInt(msec / 1000 / 60 / 60 % 24)
//				let min = parseInt(msec / 1000 / 60 % 60)
//				let sec = parseInt(msec / 1000 % 60)
//				// 个位数前补零
//				hr = hr > 9 ? hr : '0' + hr
//				min = min > 9 ? min : '0' + min
//				sec = sec > 9 ? sec : '0' + sec
//				// 控制台打印
//				if(end-now>0){
//				this.descMin = min
//				this.descSecond = sec
//				}else{
//					this.isShowPic=false
//					this.descMin = 0
//					this.descSecond = 0
//				}
//				
//				// 一秒后递归
//			},
			descTime() {
				let day = parseInt(this.chaTime / 1000 / 60 / 60 / 24)
				let hr = parseInt(this.chaTime / 1000 / 60 / 60 % 24)
				let min = parseInt(this.chaTime / 1000 / 60 % 60)
				let sec = parseInt(this.chaTime / 1000 % 60)
				// 个位数前补零
				hr = hr > 9 ? hr : '0' + hr
				min = min > 9 ? min : '0' + min
				sec = sec > 9 ? sec : '0' + sec
				// 控制台打印
				if(this.chaTime>0){
				if(hr>0){
					this.descHour = hr;
				}
				this.descMin = min+this.descHour*60;
				this.descSecond = sec;
				}else{
					this.isShowPic=false
					this.descMin = 0
					this.descSecond = 0
					this.descHour = 0
					clearInterval(this.timer)	
				}
				this.chaTime-=1000
				// 一秒后递归
			},			
			getFylx() {
				this.apipost('Financial_post_GetByOrderCostTypeList', {Type:1}, res => {
					if(res.data.resultCode == 1) {
						this.fylxList = res.data.data
					} else {
					}
				}, err => {})
			},

		},

	};
</script>

<style>
 .templatePayURL .el-input--suffix .el-input__inner{padding: 0 10px 0 8px!important; font-size: 12px;}
 .templatePayURL .el-input__suffix{right: 0!important;}
</style>