<template>
  <div class="refundType">
    <goodsRefund :list="goodsInfo" />
    <div class="refundType_select">
      <cr-cell v-if="showOnlyRefund" is-link @click="toRefund(1)">
        <template slot="title">
          <span>我要退款</span>
          <span class="refundType-grey">（无需退货）</span>
        </template>
      </cr-cell>
      <cr-cell v-if="!isExpired" title="我要退款退货" is-link @click="toRefund(2)" />
      <cr-cell v-else title="我要退款退货" value="该商品已超过售后期" />
    </div>
    <!-- 我的服务 -->
    <myServices v-if="items.length" :items="items" />
  </div>
</template>
<script>
import goodsRefund from './components/goodsRefund';
import localStorage from '@/service/localStorage.service';
import historyRecordMixins from '@/mixins/historyRecord.mixins';
import myServices from './components/myServices';
import orderApi from '@/api/order.api';
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'refundType',
  components: {
    goodsRefund,
    myServices
  },
  mixins: [historyRecordMixins],
  data() {
    return {
      orderNo: '',
      orderInfo: {},
      goodsInfo: {},
      items: [],
      isExpired: true,
      showOnlyRefund: false
    };
  },
  activated() {
    // if (localStorage.get('orderInfo')) {
    //   this.orderInfo = localStorage.get('orderInfo');
    //   this.goodsInfo = this.orderInfo.currentSku;
    // }
    // if (this.$route.params.goodsInfo) {
    //   this.goodsInfo = this.$route.params.goodsInfo;
    // }
    this.detailInfo();
    this.expired();
  },
  methods: {
    async detailInfo() {
      const orderSkuId = this.$route.query.orderSkuId;
      const [res] = await orderApi.getOrderSkuDetail({
        orderSkuId,
        skuNo: '',
        receiverId: '',
        count: 1
      });
      if (res) {
        this.goodsInfo = res;
      }
    },
    toRefund(type) {
      const orderSkuId = this.$route.query.orderSkuId;
      const orderNo = this.$route.query.orderNo;
      this.$router.replace({
        name: 'refund',
        query: { type, orderSkuId, orderNo, vccToken: localStorage.get('vccToken') },
        params: { goodsInfo: this.goodsInfo }
      });
    },
    async expired() {
      const orderSkuId = this.$route.query.orderSkuId;
      const orderNo = this.$route.query.orderNo;
      const [res, error] = await orderApi.applyExpired({ orderNo, orderSkuId });
      if (!error) {
        this.isExpired = res.expired;
        this.showOnlyRefund = res.showOnlyRefund;
        this.items = res.items;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.refundType {
  &_select {
    .text-size(13);
    margin-top: @padding-xs + 3;
    &_color {
      color: @gray-7;
    }
  }
  &-grey {
    color: @gray-3;
  }
}
.cr-cell {
  .text-size(13);
  padding: @padding-md+1 @padding-lg;
}
</style>
