<template>
  <div class="order-list">
    <cr-list
      v-if="list.length"
      v-model="listLoading"
      :finished="listFinished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(item, index) in list" :key="index" class="Ol__item" @click="toDetail(item)">
        <div class="Ol__head">
          <div class="Ol__head-left">
            <span class="Ol__head-image">
              <cr-image
                class="Ol__head-avator"
                width="85%"
                src="https://activitystatic.lkbang.net/mall-free-ui/img/avator_02.png"
              />
              <cr-image class="Ol__head-group" src="@/assets/images/group.png" />
            </span>
            <span class="Ol__head-name">胡**</span>
          </div>
          <div class="Ol__head-right">
            <template v-if="index % 2 === 0">
              <span class="Ol__head-count">拼团中，差<b class="Ol__head-red">1人</b>成团</span>
              <count-down :end-time="gpCountDown" />
            </template>
            <template v-else-if="index % 3 === 0">
              <span class="Ol__head-success">已成团，等待发货！</span>
            </template>
            <template v-else>
              <span class="Ol__head-fail">拼团失败</span>
            </template>

            <!-- <span class="Ol__head-state">{{ item.orderStatusText }}</span> -->
          </div>
        </div>
        <div class="Ol__body">
          <list-item
            :list="item"
            :show-after="item.orderStatus == 31 || item.orderStatus == 41"
            :after-show="false"
          />
        </div>
        <div class="Ol__foot">
          <div class="Ol__foot-text">拼团成功即可退款0元拿</div>
          <div class="Ol__foot-btns">
            <!-- <cr-button
              size="small"
              plain
              type="default"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'cancel')"
            >
              取消订单
            </cr-button> -->
            <cr-button
              size="small"
              plain
              type="primary"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'pay')"
            >
              付款
            </cr-button>
          </div>
        </div>
      </div>
    </cr-list>
    <div v-else class="Ol__noData">
      <cr-empty
        image="https://img.lkbang.net/xcx/empty@2x.png"
        image-size="4rem"
        description="暂无订单～"
      />
    </div>
  </div>
</template>
<script>
import ListItem from './ListItem.vue';
const EVENT_LOADING = 'load';
const EVENT_CLICK = 'option-click';
import countDown from '@/components/countDown';
export default {
  name: 'OrderSkuList',
  components: {
    countDown,
    ListItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    finished: Boolean
  },
  data() {
    return {
      gpCountDown: new Date('2021-09-12 00:00:00').getTime(),

      listLoading: false,
      listFinished: false
    };
  },
  watch: {
    loading(val) {
      this.listLoading = val;
    },
    finished(val) {
      this.listFinished = val;
    }
  },
  methods: {
    toDetail(order) {
      this.$router.push({ path: '/orderDetail', query: { orderNo: order.orderNo } });
    },
    onLoad() {
      this.$emit(EVENT_LOADING);
    },
    onOptionClick(orderInfo, eventType) {
      this.$emit(EVENT_CLICK, { orderInfo, eventType });
    },
    toHome() {
      this.$router.replace({ path: '/home' });
    }
  }
};
</script>
<style lang="less" scoped>
@import './List.less';
.order-list {
  padding: 0 @padding-sm;
  .cr-empty {
    text-align: center;
  }
  @{deep} .cr-empty__image {
    height: auto !important;
  }
}
</style>
