<template>
  <div class="refundList">
    <cr-list
      v-if="list.length"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLond"
    >
      <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="[
              [10, 60, 20, 40].includes(item.serviceStatus)
                ? 'Ol__head-orange'
                : item.serviceStatus === 30 || item.serviceStatus === 50
                ? 'Ol__head-red'
                : 'Ol__head-state'
            ]"
            >{{ item.statusDesc }}</span
          >
        </div>
        <div class="Ol__body">
          <div class="Ol__body-item">
            <cr-image
              :src="item.skuInfo.imageUrl"
              width="2.266667rem"
              height="2.266667rem"
              class="Ol__body-img"
            />
            <div class="Ol__body-content">
              <div class="Ol__body-row">
                <span class="Ol__body-title">
                  {{ item.skuInfo.skuName }}
                </span>
                <span v-if="item.skuInfo.salePrice" class="Ol__body-salePrice">
                  <span class="Ol__body-skus">¥{{ item.skuInfo.salePrice }}</span>
                  <span class="Ol__body-count">{{ item.skuInfo.count }}件</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="Ol__foot">
          <div class="Ol__foot-settle">
            <span>
              退款金额：<strong>¥{{ item.refundAmount }}</strong>
            </span>
          </div>
          <div class="Ol__foot-btns">
            <cr-button size="small" plain hairline type="primary" shape="circle">
              查看详情
            </cr-button>
          </div>
        </div>
      </div>
    </cr-list>
    <div v-else class="refundList_noData">
      <cr-empty
        image="https://img.lkbang.net/xcx/empty@2x.png"
        image-size="4rem"
        description="暂无订单～"
      />
    </div>
  </div>
</template>
<script>
import orderApi from '@/api/order.api';
import localStorage from '@/service/localStorage.service';
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageFrom: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.afterList();
    localStorage.remove('info');
    this.$track.registeredEvents('H5_2B_DrawbackAfterServicePageExposure');
  },
  methods: {
    onLond() {
      this.afterList();
    },
    async afterList() {
      if (this.finished) return;
      this.loading = true;
      const [res] = await orderApi.afterList(this.pageFrom);
      this.loading = false;
      if (!res.hasNext) {
        this.finished = true;
      } else {
        this.pageFrom.pageNo++;
      }

      this.list = [...this.list, ...res.dataList];
    },
    toDetail(info) {
      const refundUrlName = info.type === 1 ? 'refundOnlyDetail' : 'refundDetail';
      localStorage.remove('orderInfo');
      this.$router.push({
        name: refundUrlName,
        query: {
          serviceNo: info.serviceNo,
          orderSkuId: info.skuInfo.orderSkuId,
          vccToken: localStorage.get('vccToken')
        }
      });
      localStorage.set('info', info);
    }
  }
};
</script>
<style lang="less" scoped>
@import '../orderList/components/List.less';
.refundList {
  padding: @padding-sm;
  @{deep} .cr-empty__image {
    height: auto !important;
  }
}
.Ol__head-orange {
  color: @orange;
}
.Ol__head-red {
  color: @red;
}
.Ol__head-state {
  color: @gray-4;
}
</style>
