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

    <div class="mui-content vongi-pay vongi-qingjiadt">
				<div class="vongi-center mui-content-padded margin30">
                    <div class="vongi-zd vongi-zdto flew-items">
                        <img :src="detail.goodsPic" width="24">
                        <h3>{{detail.billName}}</h3>
                    </div>
                    <h1 class="margin10">{{detail.totalFee}}</h1>
					<h4 class="color55f868">{{detail.orderInfo.payStatusStr}}</h4>
				</div>
				<form class="mui-input-group">

                    <div class="mui-input-row">
                        <label>缴费单位</label>
                        <span>{{detail.companyName}}</span>
                    </div>
                    <div class="mui-input-row">
						<label>推送用户</label>
						<span>{{detail.personName}}</span>
					</div>
                    <div class="mui-input-row" v-if="detail.orderInfo.payName">
						<label>付款方式</label>
						<span class="color55f868">{{detail.orderInfo.payNameStr}}</span>
					</div>
                    <div class="mui-input-row" v-if="detail.invoiceName">
                        <label>开票方式</label>
                        <span  >{{detail.invoiceName}}</span>
                    </div>
                    <div class="mui-input-row">
                        <label>订单号</label>
                        <span>{{detail.outOrderNo}}</span>
                    </div>
                    <div class="mui-input-row">
                        <label>创建时间</label>
                        <span>{{detail.createTime}}</span>
                    </div>
                    <div class="mui-input-row" v-if="detail.orderInfo.payName">
						<label>缴费时间</label>
						<span>{{detail.orderInfo.payTime}}</span>
					</div>			
				</form>
				<ul class="mui-table-view openfyy-list margin60">
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right"  >账单明细</a>
						<div class="mui-collapse-content">
							<ul class="mui-table-view vongi-pay-list openfyy-list">
                                <li class="mui-table-view-cell" v-for="mod in list">
                                    <div class=" mui-card-content-inner flew-sp">
                                        <div class="mui-media-body">
                                            <div class='mui-ellipsis flew-sp flew-items'><span class="color4fc5f7">{{mod.goodsName}}</span>（{{mod.numStr}}）</div>
                                            <p>{{mod.standard}}</p>
                                        </div>
                                        <span class="mui-h2">{{mod.details}}元</span>
                                    </div>
                                    <p class="mui-card-footer">起止日期:{{beginEndTime(mod.beginEndTime)}}</p>
                                </li>
							</ul>
						</div>
					</li>					
				</ul>
				
			</div>
			<div class="fyy-footer vongi-footer" v-if="detail.payStatus==10">
				<div class="vongi-yjbtn mui-right">
					<button type="submit" class="mui-btn mui-btn-primary mui-btn-outlined marginl5" @click="submit(2)">支付宝</button>
					<button type="submit" class="mui-btn mui-btn-green mui-btn-outlined marginl5" @click="submit(1)">微信支付</button>
				</div>
			</div>
			<!--弹窗-->
			<div class="mui-popup mui-popup-in vongi-mui-pop" v-show="qrcodeBool">
				<div class="mui-popup-inner vongi-pop-inner">
					<img id="qrcode" :src="qrCodeImg" width="100%"/>
					<img src="~$project/assets/img/paywx.png" width="100" v-if="paytypeindex=='1'" />
                    <img src="~$project/assets/img/payzfb.png" width="100"  v-if="paytypeindex=='2'" />

                </div>
			</div>
			<div class="mui-popup-backdrop mui-active" @click="qrcodeBool=false" v-if="qrcodeBool"></div>
    <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";
    import QRCode from 'qrcodejs2'

    import { mapGetters, mapMutations } from "vuex";

    import {
        convertCanvasToImage,

    } from "$project/utils";
    export default {
        name: "MasterMineBillInfo",
        components: {
            Common,
            Loading,
            TopHeader,
        },
        data() {
            return {
                pageTitle: "账单详情",

                qrCodeImg: "",
                isLoading: true,
                detail: {
                    orderInfo:{}
                },
                leftShow:true,

                list: [],
                goodsTpey: {},
                id: "",
                qrCodeImg:'',
                qrcodeBool:false,
                paytypeindex:'',
            };
        },
        created() {
            this.id = this.$route.query.id;

        },
        methods: {
            beginEndTime(str){
                return str.replace(',','至');
            },
            qrcode(url){

                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);
                this.qrcodeBool=true;

            },
            submit(paytypeindex) {
                this.isLoading=true;
                this.paytypeindex=paytypeindex;
                if(paytypeindex=="1"){
                    API_Pay.wxNativePay(this.id ,'').then(url=>{
                        this.isLoading = false;

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

                }else if(paytypeindex=="2"){
                    API_Pay.tradePrecreatePay(this.id ,'').then(url=>{
                        this.isLoading = false;
                        this.qrcode(url);
                    }).catch(error => {
                        this.isLoading = false;
                        mui.toast(error);
                    })
                }


            },
            getDetail() {
                this.isLoading = true;

                API_Pay.orderDetail({ id: this.id })
                    .then((res) => {

                        this.detail=res;
                        this.list=res.list;
                        this.isLoading = false;

                    })
                    .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>

