<template>
  <div class="order-cell">
    <div class="cell-title">
      <div class="left">
        <div class="store-name">{{order.storeName}}</div>
        <span class="order-created">下单时间：</span>
        <span class="order-created">{{$filters.dateToLLLL(order.orderCreatedAt)}}</span>
      </div>
      <div class="right">
        {{(order.status < 100 && order.deliveryType === 'self') ? '待自提' : cms.orderStatus[order.status]}}
      </div>
    </div>
    <!-- 商品简略 -->
    <div class="order-one-good">
      <!-- <div class="order-good">
        <div v-for="(item) in order.orderGoodData" :key="item.id" class="order-item">
          <img :src="item.img" class="order-img">
          <div class="good-name1">{{item.name}}</div>
        </div>
      </div> -->
      <div class="good-name">{{order.skuList[0].skuName}}</div>
      <div class="total-good-count">等{{order.goodsCount}}件商品</div>
      <div class="total-pay" v-if="order.vendorOrderID.length !== 16">￥{{$filters.toFixed2(order.actualPayPrice)}}</div>
    </div>
    <!-- 操作 -->
    <div :class="{'order-op': true, 'order-material': isMaterial}" @click.stop="clickStop(order)">
      <div class="material-pack" v-if="isMaterial">
        {{order.vendorOrderID.length === 16 ? '分包' : '主包'}}
      </div>
      <div
        class="btn-normal btn-rebuy"
        v-if="order.status === 110 || order.status === 115"
        @click="handleClickBtn('rebuy', order)"
      >再来一单</div>
      <div
        :class="{
          'btn-normal': true,
          'btn-repay': true,
          'btn-disable': countDownText === '已超时'
        }"
        v-if="order.status === 2"
        @click="handleClickBtn('repay', order)"
      >去支付({{countDownText}})</div>
      <!-- <div
        class="btn-normal btn-confirm"
        v-if="order.status >= 5 && order.status <= 20"
        @click.stop="handleClickBtn('received', order)"
      >确认收货</div> -->
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {formatDate} from '@/utils/assist.js'
import { jumpPage } from "@/utils/uniapi.js"
import orderPage from '@/apis/orderPage'
export default {
  props: {
    order: Object
  },
  data () {
    return {
      countDownText: '',
      timer: null,
      flag:false
    }
  },
  mounted () {
    if (this.order.status === 2) {
      // 先清除再倒计时
      clearInterval(this.timer)
      this.timer = null
      let needPayEndAt = this.order.needPayEndAt || (+new Date(this.order.orderCreatedAt) + 10 * 60 * 1000)
      this.countDownText = this.updateCountDown(needPayEndAt,this.order)
      if (this.countDownText === '已超时') return false
      this.timer = setInterval(() => {
        this.countDownText = this.updateCountDown(needPayEndAt,this.order)
      }, 1000)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  computed: {
    ...mapGetters({
      'cms': 'login/cms',
      isMaterial: 'indexPage/isMaterial'
    })
  },
  methods: {
    // 阻止点击事件
    clickStop(order){
      if (!this.flag) {
         jumpPage("navigateTo",`/pagesOrders/order-detail/index?vendorOrderID=${order.vendorOrderID}`)
      }
    },
    // 倒计时
    updateCountDown (endAt,order) {
      let time = new Date(endAt) - new Date()
      if (time <= 0) {
        if(order.status === 2){
          // 由待支付变为取消订单
          orderPage.buyerCancelOrder({
              vendorOrderID: order.vendorOrderID,
              vendorID: order.vendorID,
              reason: "支付超时",
          })
          // 取消完订单后通知父组件刷新页面
          this.$emit('refreshPage')
        }
        return '已超时'
      } else {
        return `还剩${formatDate(time, 'mm')}分${formatDate(time, 'ss')}秒`
      }
    },
    handleClickBtn (key, order) {
      this.flag = true
      if (key === 'repay' && this.countDownText === '已超时') return false
      this.$emit('on-click', {
        key,
        order
      })
    }
  }
}
</script>

<style lang="scss">
@import './order-cell.scss';
</style>