<template>
  <div id="orderListItem">
    <div class="itemInfo">
      <div class="orderNum">
        <van-image fit="contain" width="28" height="28" :src="sphImage"/>
        <div class="num">
          <div class="numBer">订单号：{{item.orderNo}}</div>
          <!-- <van-button color="#D9001B" class="numBtn" round plain size="mini" type="info">退</van-button> -->
          <!-- <van-button color="#4b7902" class="numBtn" round plain size="mini" type="info">冷</van-button> -->
          <!-- <van-button color="#02a7f0" class="numBtn" round plain size="mini" type="info">精麻</van-button> -->
        </div>
        <!-- <div class="dian"></div> -->
        <!-- <div class="numType"><span>{{item.orderStatus}}</span></div> -->
        <div class="numType" style="margin-top: -5px;">
          <van-button style="opacity: 1;height:16px;" disabled :color="orderTypeColor(item)" plain size="mini" type="info">{{item.orderStatus}}</van-button>
        </div>
      </div>
      <div class="lineStyle">
        <span class="pointOutL"></span>
        <div class="divider"></div>
        <span class="pointOutR"></span>
      </div>
      <div class="orderInfo">
        <div class="company"  @click="btnAction('details')">
          <span style="width: 75%">{{item.supplierName}}</span>
          <span style="width: 25%;" class="totalNum">共{{item.orderTotalQty}}</span>
          <van-icon style="margin: auto 0;" color="#999999" name="arrow" />
        </div>
        <div class="info" @click="btnAction('details')">
          <div class="headImage">
            <van-image width="48" height="48" :src="orderImage"/>
          </div>
          <div class="details">
            <div class="titleInfo">
              <!-- {{item.goodsInfos[0].goodsDesc}} -->
              {{titleInitial(item.goodsInfos[0])}}
            </div>
            <div class="priceInfo">
              <div class="price">￥<span>{{item.goodsInfos[0].taxPrice}}</span></div>
              <div class="numBer">x{{item.goodsInfos[0].orderQty}}</div>
            </div>
          </div>
        </div>
        <div class="orderTime" @click="btnAction('details')">
          <van-icon size="15" style="margin: auto 0; width: 7%;" name="clock-o" />
          <span class="timeShow">{{item.orderDate}}</span>
          <div class="price">总计:￥<span >{{moneyFormat(item.orderTotalAmount)}}</span></div>
        </div>
<!--        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '10PX 0 10PX 0'}"/>-->
        <!-- <div class="btnInfo" style="text-align: right;">
          <van-button v-if="item.isInvoice === 'TRUE'" @click="btnAction('invoice')" style="border-radius: 5PX;height: 25PX; line-height: 25PX" plain size="small" type="info">查看发票</van-button>
          <van-button v-if="item.isDelivered === 'TRUE'" @click="btnAction('logistics')" style="border-radius: 5PX;height: 25PX; line-height: 25PX" plain size="small" type="info">查看物流</van-button>
          <van-button v-if="item.isWeb === 'TRUE'" @click="btnAction('clearance')" style="border-radius: 5PX;height: 25PX; line-height: 25PX" plain size="small" type="info">清货单</van-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { AmountNumFormat } from '@/utils/common'
export default {
  name: 'OrderListItem',
  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
    },
    moneyFormat(num) {
      return AmountNumFormat(num)
    },
    // 根据订单类型返回颜色
    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>
  #orderListItem {
    .itemInfo{
      .lineStyle {
        display: flex;
        align-items: center;
        margin:0 -14px;
        .divider{
          flex: 1;
          display: inline-block;
          height: 2PX;
          margin: 0 4px;
          background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
          background-size: 10PX 2PX;
          background-repeat: repeat-x;
        }
        .pointOutL{
          display:inline-block;
          background-color:#f5f5f5;
          border-bottom-right-radius: 12px;
          border-top-right-radius: 12px;
          width:12px;
          height:12px
        }
        .pointOutR{
          display:inline-block;
          background-color:#f5f5f5;
          border-bottom-left-radius: 12px;
          border-top-left-radius: 12px;
          width:12px;
          height:12px
        }
      }
      .orderNum{
        display: flex;
        //line-height: 50PX;
        height: 50PX;
        align-items: center;
        // margin: 0PX 10PX;
        .num{
          width: 77%;
          padding-left: 5PX;
        }
        .numBer{
          height: 16PX;
          font-size: 13px;
          // line-height: 15PX;
        }
        .numBtn{
          height: 13PX;
          line-height: 10PX;
          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
        }
      }
      .orderInfo{
        // margin: 0PX 10PX;
        // display: flex;
        // height: 105PX;
        .company {
          height: 35PX;
          line-height: 35PX;
          width: 100%;
          display: flex;
          font-weight: 600;

          .totalNum {
            margin-right: 5PX;
            text-align: right;
            font-weight:normal;
            font-size:12PX;
          }
        }
        .info{
          height: 65PX;
          display: flex;
          align-items: center;
          .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;
            }
            .priceInfo{
              line-height: 30PX;
              height: 30PX;
              display: flex;
              .price{
                width: 50%;
              }
              .numBer {
                width: 50%;
                text-align: right;
                font-size:12px;
              }
            }
          }
        }
      }
      .orderTime{
        display: flex;
        i {
          color: $txtGray9;
        }
        .timeShow {
          width: 50%;
          font-size:12px;
          padding-top:2px;
          color: $txtGray9;
        }
        .price {
          width: 40%;
          text-align: right;
          //font-weight: 600;
          font-size: 13PX
        }
      }
    }
  }
</style>
