<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">
          <span class="Ol__head-title">当前订单状态</span>
          <span class="Ol__head-state">{{ item.orderStatusText }}</span>
        </div>
        <div class="Ol__body">
          <list-item
            :list="item"
            :order-config-yxm="$config.yxm"
            :show-after="item.orderStatus == 31 || item.orderStatus == 41"
            :after-show="false"
          />
        </div>
        <div class="Ol__foot">
          <div class="Ol__foot-settle">
            <span>总价¥{{ item.originalFee }}，</span>
            <span v-if="item.reduceFee">优惠¥{{ item.reduceFee }}，</span>
            <span>
              实付款<strong>¥{{ item.totalFee }}</strong>
            </span>
          </div>
          <div class="Ol__foot-btns">
            <cr-button
              v-if="item.orderStatus == 11"
              size="small"
              plain
              hairline
              type="default"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'cancel')"
            >
              取消订单
            </cr-button>
            <template v-if="item.orderStatus == 11">
              <prepayBtn
                :order-status="item.orderStatus"
                :order-data="item"
                list-page
                @clickBtn="onOptionClick({ ...item, index }, 'pay')"
              />
            </template>
            <cr-button
              v-if="
                item.isShowRefund &&
                  !item.isShowRefundAudit &&
                  (item.orderStatus == 21 || item.orderStatus == 31) &&
                  $config.yxm
              "
              size="small"
              plain
              hairline
              type="default"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'toRefund')"
            >
              申请退款
            </cr-button>
            <!-- 审核中 -->
            <cr-button
              v-if="item.orderStatus == 21 && item.isShowRefundAudit && item.isShowRefund"
              size="small"
              plain
              hairline
              disabled
              type="primary"
              shape="circle"
            >
              审核中
            </cr-button>
            <!-- 审核中 -->
            <cr-button
              v-if="item.orderStatus == 21"
              size="small"
              plain
              hairline
              type="default"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'notify')"
            >
              提醒发货
            </cr-button>
            <cr-button
              v-if="(item.orderStatus == 31 || item.orderStatus == 41) && item.isShowLogistics"
              size="small"
              plain
              hairline
              type="default"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'logistics')"
            >
              查看物流
            </cr-button>
            <cr-button
              v-if="item.orderStatus == 31"
              size="small"
              plain
              hairline
              type="primary"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'confirm')"
            >
              确认收货
            </cr-button>
            <cr-button
              v-if="item.orderStatus == 41 || item.orderStatus == 51"
              size="small"
              plain
              hairline
              type="primary"
              shape="circle"
              @click.stop="onOptionClick({ ...item, index }, 'again')"
            >
              再次购买
            </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';
import prepayBtn from '@/components/prepayBtn.vue';
const EVENT_LOADING = 'load';
const EVENT_CLICK = 'option-click';
export default {
  name: 'OrderSkuList',
  components: {
    ListItem,
    prepayBtn
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    finished: Boolean
  },
  data() {
    return {
      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>
