<template>
  <div id="clearanceListItem">
    <div class="clearanceInfo">
      <div class="clearanceHead">
        <van-image fit="contain" width="35" height="40" :src="sphImage"/>
        <div class="num">
          <div class="numBer">请货单号：{{item.sourceOrderNo}}</div>
        </div>
        <div class="numType"><van-button class="numBtn" plain size="mini" type="info">{{item.sourceSystem}}</van-button></div>
      </div>
      <div class="divider"></div>
      <div class="orderInfo">
        <div class="company">
          <span style="width: 83%">{{item.supplierName}}</span>
        </div>
        <div class="info">
          <div class="headImage">
            <van-image width="55" height="55" :src="orderImage"/>
          </div>
          <div class="details">
            <div class="titleInfo">
              {{item.goodsDesc}}
            </div>
          </div>
        </div>
        <div class="goodsNum">
          来源商品编码：{{item.sourceGoodsId}}
        </div>
        <div class="quantity">
          <div class="clearanceNum">
            请货数量：{{item.reqQty}}
          </div>
          <div class="billingNum">
            开单数量：{{item.orderQty}}
          </div>
        </div>
        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '10PX 0 10PX 0'}"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClearanceListItem',
  components: {
  },
  data() {
    return {
      sphImage: require('@/assets/img/u48.png'),
      orderImage: require('@/assets/img/order.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>
  #clearanceListItem {
    height: 100%;
    .clearanceInfo{
      font-size: 15PX;
      .clearanceHead{
        display: flex;
        line-height: 40PX;
        height: 40PX;
        // margin: 0PX 10PX;
        .num{
          width: 90%;
          padding-left: 5PX;
        }
        .numBer{
          height: 16PX;
          font-size: 13PX;
          // line-height: 15PX;
        }
        // .numBtn{
        //   height: 13PX;
        //   line-height: 13PX;
        //   min-width: 35PX;
        //   font-size: 8PX;
        // }
        .dian{
          width: 12PX;
          height: 10PX;
          border-radius: 10PX;
          background-color: red;
          margin: auto 5PX
        }
        .numType{
          width: 17%;
          text-align: right
        }
      }
      .divider{
        width: 100%;
        height: 1PX;
        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
        background-size: 10PX 1PX;
        background-repeat: repeat-x;
      }
      .orderInfo{
        // margin: 0PX 10PX;
        // display: flex;
        // height: 105PX;
        .company {
          height: 45PX;
          line-height: 45PX;
          width: 100%;
          display: flex;
          font-weight: 600;
          font-size: 16PX;
        }
        .info{
          height: 65PX;
          display: flex;
          .headImage{
            // width: 55PX;
            padding-right: 10PX;
          }
          .details{
            float: right;
            width: calc(100vw - 105PX);
            .titleInfo{
              width: 100%;
              overflow:hidden;
              // white-space: nowrap;
              text-overflow:ellipsis;
              // line-height: 30PX;
            }
          }
        }
        .goodsNum{
          color: #999999;
        }
        .quantity{
          display: flex;
          height: 30PX;
          line-height: 30PX;
          color: #999999;
          .clearanceNum{
            width: 50%;
          }
          .billingNum{
            width: 50%;
          }
        }
      }
    }
  }
</style>
