<template>
  <div id="orderInvoiecListItem">
    <div class="itemInfo">
      <div class="orderNum">
        <van-image fit="contain" width="45" height="50" :src="sphImage"/>
        <div class="num">订单号：{{item.orderNo}}</div>
        <van-button style="margin: auto;width: 50PX" class="numBtn" round plain size="mini" type="info">复制</van-button>
      </div>
      <div class="divider"></div>
      <div class="invoiecInfo">
        <div class="name">[{{item.goodsId}}]{{item.goodsName}}/{{item.goodsSpec}}/{{item.manufacturer}}</div>
        <div class="cellInfo">
          <div class="batch">开票数量：{{item.invoiceQty}}</div>
          <!-- <div class="numBer"> 开票数量：480</div> -->
        </div>
        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '5PX 0 5PX 0'}"/>
        <div class="cellInfo">
          <div class="leftInfo">
            <div class="title">无税单价：</div>
            <div class="value">{{item.taxFreePrice}}</div>
          </div>
          <div class="rightInfo">
            <div class="title">单品无税金额：</div>
            <div class="value">{{item.taxFreeAmount}}</div>
          </div>
        </div>
        <div class="cellInfo">
          <div class="leftInfo">
            <div class="title">含税单价：</div>
            <div class="value">{{item.taxPrice}}</div>
          </div>
          <div class="rightInfo">
            <div class="title">单品含税金额：</div>
            <div class="value">{{item.taxAmount}}</div>
          </div>
        </div>
        <div class="cellInfo">
          <div class="leftInfo">
            <div class="title">税率：</div>
            <div class="value">{{item.taxRate}}</div>
          </div>
          <div class="rightInfo">
            <div class="title">税额：</div>
            <div class="value">{{item.taxFee}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderInvoiecListItem',
  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>
  #orderInvoiecListItem {
    .itemInfo{
      .divider{
        width: 100%;
        height: 1PX;
        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
        background-size: 10PX 1PX;
        background-repeat: repeat-x;
      }
      .orderNum{
        display: flex;
        line-height: 50PX;
        height: 50PX;
        margin: 0PX 10PX;
        .num{
          width: 80%;
          padding-left: 5PX;
        }
      }
      .invoiecInfo{
        margin: 0PX 10PX;
        // display: flex;
        .name {
          margin-top: 10PX;
          height: 50PX;
          width: 100%;
          font-weight: 600;
          white-space: pre-line;
          word-break: break-all;
          word-wrap: break-word;
        }
        .cellInfo{
          display: flex;
          line-height: 25PX;
          .batch{
            width: 50%;
          }
          .numBer{
            width: 50%;
            text-align: right;
          }
          .leftInfo{
            width: 50%;
            display: flex;
            .title{
              width: 45%;
              text-align: right;
            }
            .value{
              width: 55%;
              text-align: left;
            }
          }
          .rightInfo{
            width: 50%;
            display: flex;
            .title{
              width: 65%;
              text-align: right;
            }
            .value{
              width: 35%;
              text-align: left;
            }
          }
        }
      }
    }
  }
</style>
