<template>
  <div id="goodsInfoListItem">
    <div class="itemInfo">
      <div class="headImage">
        <van-image fit="contain" width="50" height="55" :src="orderImage"/>
      </div>
      <div class="info">
        <div class="infoDesc">{{titleInitial(item)}}</div>
        <div class="numBer">
          <div class="unitPrice">￥ {{item.taxPrice}}</div>
          <div class="packageNum">包装数量：{{item.packageNum}}</div>
        </div>
        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '0'}"/>
        <div class="goodsInfo">
          <div class="orderNum">订单数量：{{item.orderQty}}</div>
          <div class="deliveryNum">配送数量：{{item.sendQty}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'GoodsInfoListItem',
  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: {
    // 商品拼接
    titleInitial(model) {
      let titleStr = '【' + model.goodsCode + '】' + model.goodsName + '/' + model.goodsSpec + '/' + model.manufacturer
      return titleStr
    },
    // 根据订单类型返回颜色
    orderTypeColor (model) {
      if (model.orderStatusCode === '100') {
        // 待发货
        return '#06BF06'
      } else if (model.orderStatusCode === '220') {
        // 待收货
        return '#FFC861'
      } else if (model.orderStatusCode === '400') {
        // 已签收
        return '#929292'
      } else if (model.orderStatusCode === '110') {
        // 已取消
        return '#C17300'
      }
    },
    onRefresh() {
    },
    // 查看发票 查看物流 清货单
    btnAction (type) {
      this.item.actionType = type
      this.$emit('orderItemAction', this.item)
    }
  }
}
</script>

<style lang="scss" scoped>
  #goodsInfoListItem {
    background-color: white;
    border-radius: 10PX;
    font-size: 14PX;
    color: #999999;
    padding: 10PX;
    .itemInfo{
      display: flex;
      .headImage{
        width: 20%;
      }
      .info{
        width: 80%;
        .infoDesc{
          color: #333333;
        }
        .numBer{
          display: flex;
          height: 40PX;
          line-height: 40PX;
          .unitPrice{
            text-align: left;
            width: 50%;
            color: #333333;
            font-weight: 600;
            font-size: 15PX;
          }
          .packageNum{
            text-align: right;
            width: 50%;
          }
        }
        .goodsInfo{
          display: flex;
          height: 40PX;
          line-height: 40PX;
          .orderNum{
            text-align: left;
            width: 50%;
          }
          .deliveryNum{
            text-align: right;
            width: 50%;
          }
        }
      }
    }
  }
</style>
