<template>
<div>
 <common @asynCallBack="asynCallBack"></common>
    	<top-header :pageTitle="pageTitle"  ></top-header>

			<div class="mui-content vongi-qingjiadt margin60"  >
				<div class="vongi-cashier flew-sp">
					<div class="vongi-zd flew-items">
						<div class="mui-media-object">
							<img :src="goodsTpey.iconPic">
						</div>
						<h3>
							{{goodsTpey.goodsName}}
						</h3>
					</div>
					<div class="vongi-cd-pay">
						<span class="iconfont icon-baobiao color4fc5f7" @click="goRecord()"></span>
						<h5>历史账单</h5>
					</div>
				</div>
				<form class="mui-input-group vongi-cd-payli">
					<div class="mui-input-row flew-sp">
						<h3>{{detail.body}}</h3>
						<h3>￥{{detail.totalFee}}</h3>
					</div>
					<div class="mui-input-row" v-for="(value,key,index)  in list">
						<label>{{key}}</label>
						<span>{{value}}</span>
					</div>

					<div class="mui-input-row">
						<label>创建时间</label>
						<span>{{detail.createTime}}</span>
					</div>
					<div class="mui-input-row">
						<label style="width:25%">订单号</label>
						<span style="width:75%" class="mui-ellipsis">{{detail.outOrderNo}}</span>
					</div>
				</form>
				<div class="mui-content-padded">
					<h5>支付方式</h5></div>
				<form class="mui-input-group margin10">
					<div class="mui-input-row mui-radio">
						<label>微信支付</label>
						<input name="radio1"  value="1" v-model="paytypeindex" type="radio">
					</div>
					<div class="mui-input-row mui-radio">
						<label>支付宝支付</label>
						<input name="radio1"  value="2" v-model="paytypeindex" type="radio" checked>
					</div>
				</form>
				<div class="vongi-cashier-btn-row">
					<div class="vongi-cashier-btn-white">
						<span>合计：<b class="colorfe616c">￥{{detail.totalFee}}</b></span>
						<div class="vongi-cashier-btn" v-if="detail.payStatus=='10'" @click="submit">支付</div>
					</div>
				</div>
			</div>
			<img id="qrcode">
           <loading :visible="isLoading"></loading>

</div>
</template>


<script>
	import * as API_Pay from '$project/apis/payment'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	require('$project/assets/js/mui.picker.min.js');
	import QRCode from 'qrcodejs2'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		wxPayJs
	} from '$project/utils/wxpay'
	import {

		convertCanvasToImage,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterMineBillPay',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '收银台',
				paytypeindex:"1",
				paycode:'',
				paytype:"微信支付",
				qrCodeImg:"",
				isLoading: false,
				detail:{},

				list:[],
				goodsTpey:{},

				id:''

			}
		},
		created() {
			this.id=this.$route.query.id;

			},
		methods:  {
		getDetail(){
	        	API_Pay.orderDetail({id:this.id}).then(res=>{
                    this.detail=res.orderInfo;
                    this.info=res.goodsTpey;
                    this.goodsTpey=res.goodsTpey;

                    this.list=JSON.parse(res.orderInfo.detail);
        		}).catch(error => {

        		})
		},
			selectPay() {
				var picker = new mui.PopPicker();

				picker.setData([{
					text: "微信支付",
					value: '1'
				}
					,
					{
						text: "支付宝扫码",
						value: '2'
					}
					// ,
					// {
					// 	text: "现场支付",
					// 	value: '0'
					// }
				]);

				picker.show((selectItems) => {
					this.paytypeindex=selectItems[0].value;
					this.paytype=selectItems[0].text;
				});
			},
			//info
            			goRecord() {

            				this.$router.push({
            					name: 'MasterMineBillRecord',
            					query: {

            					}
            				})
            			},
			//提交表单
			submit() {
				this.isLoading=true;
				if(this.paytypeindex=="1"){
					API_Pay.wxJsapiPay(this.detail.id,'').then(data=>{

						this.isLoading=false;
						wxPayJs(data)
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})

				}else if(this.paytypeindex=="2"){
					API_Pay.tradePrecreatePay(this.detail.id,'').then(url=>{
						this.isLoading = false;
						let qrcode = new QRCode('qrcode', {
							width: 200,
							height: 200,
							text: url,
							correctLevel: QRCode.CorrectLevel.M,

						})
						var canvas = document.getElementsByTagName('canvas')[0];
						this.qrCodeImg = convertCanvasToImage(canvas);

						var btnArray = ['关闭',"支付成功?"];
						var _this=this
						mui.confirm('<img src="'+this.qrCodeImg+'" >',

								'请使用支付宝扫码', btnArray, function(e) {
									if (e.index == 1) {
										_this.$router.push({
											name: 'MasterMineBillList',
										})
									}

								})
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}


			},asynCallBack(){},
		},
		mounted() {
            this.getDetail();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
