<template>
  <div>
    <common @asynCallBack="asynCallBack"></common>
    <top-header :pageTitle="pageTitle" :leftShow="leftShow"></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">已交费</h4>
				</div>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>付款方式</label>
                        <span>{{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.companyName}}</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>			
				</form>
				<ul class="mui-table-view openfyy-list">
					<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="mui-content vongi-qingjiadt">
				<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>
					<div class="mui-input-row">
						<label>完成时间</label>
                		<span>{{detail.payTime}}</span>
					</div>
				</form>
			</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 { mapGetters, mapMutations } from "vuex";

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

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

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

      if(this.$route.query.exc) {
          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;
            this.list=res.list;
        })
        .catch((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>
