<template>
  <div class="flex-col list-item space-y-12">
    <div class="flex-row justify-between" style="margin-bottom: 8px">
      <div style="display: flex;justify-content: space-between;align-items: center;width: 100%">
        <!-- <div class="font_41" v-if="obj.SALEBILL_STATE === 1010 || obj.SALEBILL_STATE === 3050">期望送达:
          {{ obj.RESERVATION_DATE }}</div>
        <div class="font_41" v-if="obj.SALEBILL_STATE === 4000 || obj.SALEBILL_STATE === 5000">
          <p class="self-start font_7">{{ obj.ORDER_DATE }}</p>
        </div> -->
        <span class="font_2 text_6" style="margin-left: 8px">{{ statusText }}</span>
      </div>
    </div>
    <div class="flex-col justify-start items-start relative info"
      style="overflow: hidden;display: flex;align-items: center;">
      <scroll-view class="flex-row space-x-8" :scroll-x="true" style="height: 82px;width:70%;white-space: nowrap;">
        <view class="imgBox" v-for="(item, idx) in obj.IMAGELIST" :key="idx">
          <view style="display: flex;flex-direction: column">
            <!--          -->
            <img class="equal-division-item" :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'" />
            <text class="name">{{ item.COMMODITY_NAME }}</text>
          </view>
        </view>
      </scroll-view>
      <div class="section_7"
        style="height: 82px;width:30%;display: flex;align-items: flex-end;justify-content: center;flex-direction: column;">
        <div>
          <span class="font_6">¥</span>
          <span class="font_5 text_7">{{ obj.ORDER_AMOUNT }}</span>
        </div>
        <span class="font_7">共{{ obj.TOTAL_COUNT }}件</span>
      </div>
    </div>
    <div class="flex-row justify-between" style="display: flex; align-items: center">
      <div style="flex: 1;margin-right: 4px">
        <p class="self-start font_7" v-if="obj.SALEBILL_STATE !== 4000 && obj.SALEBILL_STATE !== 5000">{{ obj.ORDER_DATE
          }}
        </p>
        <view class="desc" v-if="obj.SALEBILL_DESC">
          <text>{{ obj.SALEBILL_DESC }}</text>
        </view>
      </div>
      <!-- <div class="flex-row items-center section_8 view space-x-4" v-if="obj.SALEBILL_STATE === 1010 && isCuntTime">
        <img class="shrink-0 image_9" src="/static/images/recons/deliver.svg" />
        <span class="font_1">催单</span>
      </div> -->
      <div class="section_8 view space-x-4" style="display: flex;align-items: center;"
        v-if="obj.SALEBILL_STATE === 2010" @click.stop="handleConfirmReceipt(obj)">
        <img class="shrink-0 image_9" src="/static/images/home/notice.svg" />
        <span class="font_1">确认收货</span>
      </div>
      <div class="flex-row items-center section_8 view space-x-4" v-if="obj.SALEBILL_STATE === 4000">
        <img class="shrink-0 image_9" src="/static/images/recons/notice.svg" />
        <span class="font_1">去评价</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    obj: {}
  },
  data() {
    return {
      timeText: '',
      isCuntTime: false,
      isShowTime: false,
      timeOut: 0 // 1超时  2不超时
    }
  },
  computed: {
    statusText() {
      let text = ''
      switch (this.obj.SALEBILL_STATE) {
        case 1005:
          text = '待支付'
          break
        case 1010:
          text = '待发货'
          break
        case 2010:
          text = '待收货'
          break
        case 3000:
          text = '已收货'
          break
        case 8000:
          text = '退款申请中'
          break
        case 8010:
          text = '商品退货中'
          break
        case 8020:
          text = '退款处理中'
          break
        case 8900:
          text = '订单已退款'
          break
        case 8999:
          text = '退款已关闭'
          break
        case 9000:
          text = '订单已关闭'
          break
        case 9999:
          text = '订单已撤销'
          break
        default:
          text = '待发货'
      }
      return text
    },
    imgList() {
      if (this.obj.IMAGELIST.length > 4) return this.obj.IMAGELIST.slice(0, 4)
      return this.obj.IMAGELIST
    },
    toDeatil() {
      return function (item) {
        this.$emit('toDeatil', item)
      }
    }
  },
  onLoad() {
    this.countDownTime()
    this.cuntDown()
  },
  methods: {
    cuntDown() {
      let time = new Date(this.obj.RESERVATION_DATE).getTime() - new Date().getTime()
      if (time < 86400000) {
        this.isCuntTime = true
      }
    },
    countDownTime() {

    },
    handleToEvaluate(obj) {
      console.log('obj', obj)
      uni.navigateTo({ url: '/pages/newEvaluate/index?sellchildid=' + obj.SALEBILL_CHILD_ID + '&orderInternal=' + obj.SALEBILL_ID + '&proid=' + obj.SALEBILL_ID + 'type=' + 'DeliverId' })
    },
    // 确认收货按钮
    async handleConfirmReceipt(obj) {
      const req = {
        action_type: "UpdateOrderState",
        action_data: obj.SALEBILL_ID,
        saleBillChildId: obj.SALEBILL_CHILD_ID,
        SALEBILL_STATE: 3000,
        // deliverDate: new Date()
      }
      const data = await this.$api.getCoop(req)
      console.log('data', data);
      uni.showToast({
        title: data.msg,
        icon: 'none'
      })
      if (data.error === 1) {
        this.$emit('handleGetOrderList')
      }
    },
  }
}
</script>

<style lang="less" scoped>
.list-item {
  width: 638rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 0 auto 24rpx;

  .box {
    padding: 5px 15px;
    box-sizing: border-box;
    background: #F6F8F8;
    width: 100%;
    border-radius: 4px;
    margin-top: 5px;

  }

  .space-x-8 {
    &>*:not(:first-child) {
      margin-left: 16rpx;
    }

    .font_3 {
      font-size: 28rpx;
      font-family: 'PingFang SC';
      line-height: 40rpx;
      color: #020e1a;
      font-weight: 600;
    }

    .active {
      width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .normal {
      width: 275px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .font_4 {
      font-size: 24rpx;
      font-family: 'PingFang SC';
      line-height: 34rpx;
      color: #fa5151;
      margin-left: 16rpx;
    }

    .imgBox {
      display: inline-block;
      text-align: center;
      margin-right: 16rpx;
      width: 60px;
      height: 80px;

      .name {
        font-size: 12px;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .equal-division-item {
        border-radius: 8rpx;
        width: 120rpx;
        height: 120rpx;
      }
    }

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
  }

  .font_2 {
    font-size: 28rpx;
    font-family: 'PingFang SC';
    line-height: 40rpx;
    color: #1890ff;
  }

  .section_7 {
    padding: 24rpx 0 24rpx 24rpx;
    background-image: linear-gradient(270deg, #ffffff 0%, #ffffff 95.72%, #ffffff00 100%);

    .font_6 {
      font-size: 24rpx;
      font-family: 'DIN Alternate';
      line-height: 28rpx;
      font-weight: 700;
      color: #020e1a;
    }

    .font_5 {
      font-size: 32rpx;
      font-family: 'DIN Alternate';
      line-height: 40rpx;
      font-weight: 700;
      color: #020e1a;
    }

    .text_7 {
      line-height: 38rpx;
    }
  }

  .font_41 {
    font-size: 24rpx;
    font-family: 'PingFang SC';
    line-height: 34rpx;
    color: #fa5151;
  }

  .pos {
    position: absolute;
    right: 0;
    top: 0;
  }

  .font_7 {
    font-size: 24rpx;
    font-family: 'PingFang SC';
    line-height: 34rpx;
    color: #9fa3a8;
  }

  .desc {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF6219;
    line-height: 36rpx;
  }

  .section_8 {
    .image_9 {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    .font_1 {
      font-size: 28rpx;
      font-family: 'PingFang SC';
      line-height: 40rpx;
      color: #6c737a;
    }
  }

  .view {
    border-radius: 8rpx;
    height: 64rpx;
    border: solid 2rpx #d9dbdd;
    line-height: 64rpx;
    padding: 0 24rpx;
  }

  .space-x-4 {
    &>*:not(:first-child) {
      margin-left: 8rpx;
    }
  }
}

.space-y-12 {
  &>*:not(:first-child) {
    margin-top: 24rpx;
  }
}

.info {
  margin-bottom: 24rpx;
}
</style>
