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

        <div class="mui-content vongi-qingjiadt margin60"  >
            <div class="vongi-zd vongi-zdto flew-items">
                <img :src="detail.goodsPic" width="24">
                <h3>{{detail.billName}}</h3>
            </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">
                    <label>本期账单总金额</label>
                    <span class="mui-h1 colorfe616c">￥{{detail.totalFee}}</span>
                </div>
                <div class="mui-input-row">
                    <label>账单备注</label>
                    <span>{{detail.remark}}</span>
                </div>
                <div class="mui-input-row" v-if="detail.bankName">
                    <label>开户名称</label>
                    <span>{{detail.bankName}}</span>
                </div>
                <div class="mui-input-row"  v-if="detail.bank">
                    <label>开户银行</label>
                    <span>{{detail.bank}}</span>
                </div>
                <div class="mui-input-row"  v-if="detail.account">
                    <label>账号</label>
                    <span>{{detail.account}}</span>
                </div>
                <div class="mui-input-row" v-if="detail.invoiceName">
                    <label>开票方式</label>
                    <span  >{{detail.invoiceName}}</span>
                </div>

            </form>
            <div class="mui-content-padded">
                <h5 class="flew-sp">账单明细<span class="colorfe616c">请在收到账单{{detail.cycle}}日内交纳如下费用</span></h5>
            </div>
            <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-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 class="mui-content-padded"  v-if="detail.type=='online'"  >
                <h5>支付方式</h5>
            </div>
            <form class="mui-input-group margin10" v-if="detail.payStatus=='10'&&detail.type=='online'" >
                <div class="mui-input-row mui-radio" v-for="pay in detail.payList">
                    <label>{{pay.text}}</label>
                    <input name="radio1"  :value="pay.value" v-model="paytypeindex" type="radio">
                </div>

            </form>

            <form class="mui-input-group margin10" v-if="detail.payStatus=='20'" >
                <div class="mui-input-row mui-radio">
                    <label>{{detail.orderInfo.payNameStr}}</label>
                </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'&&detail.type=='online'" @click="submit">支付</div>
                    <div class="vongi-cashier-btn" v-if="detail.payStatus!='10'">{{detail.orderInfo.payStatusStr}}</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: true,
                detail:{
                    orderInfo:{}
                },

                list:[],
                goodsTpey:{},
                leftShow:true,
                id:''

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

            if(this.$route.query.exchange) {
                this.leftShow=false
            }

        },
        methods:  {
            beginEndTime(str){
                return str.replace(',','至');
            },
            getDetail(){
                this.isLoading = true;

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

                    this.detail=res;

                    if(this.detail.payList.length){
                        this.detail.type="online";
                        this.paytypeindex=this.detail.payList[0].value;
                    }
                    this.list=res.list;
                }).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.orderInfo.id,'').then(data=>{

                        data.url=window.location.href.split("#")[0]+"/#/master/mine/bill/info?id="+this.id+"&exc=1";

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

                }else if(this.paytypeindex=="2"){
                    API_Pay.tradePrecreatePay(this.detail.orderInfo.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>
