/**
* @Author Sean
* @Date 2019/10/22
*/
<template>
  <h-view id="invoice" class="public-style" style="height: 100%">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()" >
        <img src="@/assets/userBind/arrow.png">
        <span>我的发票</span>
      </div>
    </h-header>
    <div v-if="invoiceList.length===0" class="display">
      <img src="@/assets/messageCenter/noMsg.png" alt="">
    </div>
    <scroll
      v-if="invoiceList.length!==0" ref="scroll" :updateData="[invoiceList]" :pullUp="true"
      @pullingUp="loadMore">
      <section class="invoice-wrap">
        <list-item v-for="(list,index) in invoiceList" :key="index">
          <div class="invoice-number">
            <img src="@/assets/invoice/myInvoice.png">
            <div class="invoice-number-content">
              <span class="number-left">发票号码 {{ list.invoice_no }}</span>
              <div class="number-right">
                <img src="@/assets/invoice/download.png">
                <span class="invoice-download" @click="downLoad(list.file_url)">发票下载</span>
                <!-- <a href="http://180.104.121.66:8090/dump_dir/032001700611_84582415.pdf" download="http://180.104.121.66:8090/dump_dir/032001700611_84582415.pdf">pdf</a> -->
                <!-- <a :href="list.file_url" target="_blank">发票下载</a> -->
              </div>
            </div>
          </div>
          <div class="invoice-content">
            <div class="invoice-content-item">
              <span class="item-text">开票金额</span>
              <span class="item-value">{{ list.amount }}</span>
            </div>
            <div class="invoice-content-item">
              <span class="item-text">开票日期</span>
              <span class="item-value">{{ list.invoicedate }}</span>
            </div>
            <div class="invoice-content-item">
              <span class="item-text">发票代码</span>
              <span class="item-value">{{ list.equip_model }}</span>
            </div>
          </div>
        </list-item>
      </section>
    </scroll>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      invoiceList: [],
      pagenum: 1,
      searchPagenum: 1,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.pagenum = 1
      vm.searchPagenum = 1
      vm.invoiceList = []
      vm.getList()
    })
  },
  methods: {
    loadMore () {
      this.getList()
    },
    downLoad (a) {
      cordova.InAppBrowser.open(a, '_system', 'location=yes,hideurlbar=no,toolbarposition=top')
    },
    getList () {
      let vm = this
      let url = process.env.basePath + 'user_invoice_query'
      let param = {
        bp_id: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id,
      }
      vm.hlsPopup.showLoading('请稍候!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.invoiceList.push(array[index])
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.invoiceList.push(array[index])
            })
            vm.$refs.scroll.update(false)
          }
        } else {
          vm.hlsPopup.showLongCenter(res.info.msg)
        }
      })
    },
  },
}
</script>

<style lang="less" rel="stylesheet">
  @import "../../styles/mixin";
  #invoice {
     .display {
        width: 100%;
      height: 100%;
    position: fixed;
    // top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
    .content {
      position: absolute;
      top: 0;
    }
    .scrollContent {
    //  padding-top: 0.8rem;
      padding-bottom: 20px;
    }
    .invoice-wrap{
      width: 100%;
      margin: 0 auto;
      padding: 10px;
      display: flex;
      flex-direction: column;
      .invoice-number{
        padding: 0 3% 0 2%;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        img{
          width: 30px;
          height: 30px;
        }
        .invoice-number-content{
          flex: 1;
          height: 100%;
          margin-left: 3%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .border-bottom();
          .number-left{
            font-family: PingFangSC-Semibold;
            font-size: 15px;
            color: #4B4A4B;
            letter-spacing: 0;
          }
          .number-right{
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #1D3FFF;
            letter-spacing: 0;
            display: flex;
            align-items: center;
            img{
              width: 16px;
              height: 16px;
            }
          }

        }
      }
      .invoice-content{
        margin: 0 3% 0 13%;
        display: flex;
        flex-direction: column;
        .invoice-content-item{
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-text{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: rgba(75,74,75,0.60);
            letter-spacing: 0;
          }
          .item-value{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #4B4A4B;
            letter-spacing: 0;
          }
        }
      }
    }
     .content {
    position: absolute;
    top: 0;
  }
  .scrollContent {
    padding-top: 0.8rem;
    padding-bottom: 20px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
  }
  .platform-ios {
    #invoice {
      .scrollContent {
        padding-top: 1.2rem;
      }
    }
  }

  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #invoice {
        .scrollContent {
          padding-top: 1.6rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #invoice {
        .scrollContent {
          padding-top: 1.6rem;
        }
      }
    }
  }
</style>