<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="开票通知详情"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="h5GoBack"
    />
  </div>
  <div class="contentWrap">
      <div class="item" v-for="(item,index) in detailList" :key="index">
        <div class="itemContent">
          <span> {{ item.orderCode }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>{{ item.serviceName }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span> {{item.settleAmount}}元</span>
            </div>
        <div class="line"></div>
      </div>
  </div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {notifyInvoiceDetail} from "@/api/mine"
export default {
  name: "invoicingDetail",
  mixins:[myMixins],
  data(){
    return{
      pageNum:1,
      pageSize:10,
      detailList:[],
      form:{
        batchCode:'',
        startTime:'',
        overTime:'',
      }
    }
  },
  async mounted() {
    // console.log(this.$route.query?.id)
    this.form.batchCode=this.$route.query?.id;
    this.form.startTime=this.$route.query?.startTime;
    this.form.overTime=this.$route.query?.overTime;
    await this.getDetail()
  },
  methods:{
      async getDetail(){
        let res=await notifyInvoiceDetail({
          pageNum:this.pageNum,
          pageSize:this.pageSize,
         ...this.form,
        })
        this.detailList=res.data
      }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
}
.navBar{
  height: 46px;
}
.contentWrap{
  @include wh(100%,400px);
  margin-left: 27px;
  .item{
    width: 100%;
    @include all-height(47px);
    .itemContent{
      margin-left: 5px;
      color: #323643;
      @include fontWeightSize(400,13px);
    }
    .line{
      @include wh(100%,1px);
      @include bgcolorOpa(#E9E9EA,0.6);
    }
  }
}

</style>