<template>
  <div id="invoiecListItem">
    <div class="itemInfo">
      <div class="invoiecrNum">
        <div class="company">{{item.supplierName}}</div>
        <div class="time"><span>{{item.invoiceDate}}</span></div>
      </div>
      <div class="divider"></div>
      <div class="invoiecrInfo">
        <div class="cellInfo">
          <div class="title">发票金额：</div>
          <div class="info">￥<span class="price">{{item.totalTaxAmount}}</span></div>
          <div class="btn">
            <van-button round plain size="mini" type="info">预览</van-button>
          </div>
        </div>
        <div class="cellInfo">
          <div class="title">发票号：</div>
          <div class="info">{{item.invoiceNo}}</div>
        </div>
        <!-- <div class="cellInfo">
          <div class="title">发票代号：</div>
          <div class="info">837418787438178</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InvoiecListItem',
  components: {
  },
  data() {
    return {
      sphImage: require('@/assets/img/u48.png'),
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  computed: {
    linkInfo () {
      return this.$store.state.linkInfo
    },
    routKey() {
      return this.$route.path
    },
    searchTime() {
      let time = this.time.start + '/' + this.time.end
      return time
    }
  },
  mounted() {
    // this.onLoad()
  },
  methods: {
    onRefresh() {
    }
  }
}
</script>

<style lang="scss" scoped>
  #invoiecListItem {
    height: 100%;
    .itemInfo{
      height: 100%;
      .divider{
        width: 100%;
        height: 1PX;
        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
        background-size: 10PX 1PX;
        background-repeat: repeat-x;
      }
      .invoiecrNum{
        display: flex;
        line-height: 40PX;
        height: 40PX;
        margin: 0PX 10PX;
        .company{
          width: 70%;
          padding-left: 5PX;
          font-weight: 600;
        }
        .time{
          width: 30%;
          text-align: right
        }
      }
      .invoiecrInfo{
        // margin: 10PX;
        padding: 5PX;
        // display: flex;
        // height: 110PX;
        font-size: 15PX;
        .cellInfo{
          display: flex;
          line-height: 30PX;
          .title{
            width: 25%;
            text-align: right;
          }
          .info{
            width: 60%;
            .price{
              font-size: 16PX;
              font-weight: 600;
              color: red;
            }
          }
          .btn {
            width: 10%;
          }
        }
      }
    }
  }
</style>
