<template>
  <cr-popup
    v-model="show"
    closeable
    round
    position="bottom"
    get-container="body"
    class="cancel-popup"
  >
    <div class="Cp__head">
      <div class="Cp__head-title">请选择原因</div>
      <!-- <div class="Cp__head-desc">订单一旦取消，无法恢复，金额/积分将原路返还</div> -->
    </div>
    <div class="Cp__tip">订单一旦取消，无法恢复，金额/积分将原路返还</div>
    <cr-radio-group v-model="reasonType" class="Cp__list-wrap">
      <cr-cell-group class="Cp__list">
        <cr-cell
          v-for="(item, index) in reasonList"
          :key="index"
          :title="item.cancelReason"
          @click="onCellClick(item.cancelReasonType)"
        >
          <template #right-icon>
            <cr-radio ref="checkboxes" :name="item.cancelReasonType" class="Cp__list-radio" />
          </template>
        </cr-cell>
      </cr-cell-group>
    </cr-radio-group>
    <div class="Cp__button">
      <cr-button block type="primary" shape="circle" @click="handleRadioSubmit">提交</cr-button>
    </div>
  </cr-popup>
</template>
<script>
const EVENT_INPUT = 'input';
const EVENT_COMPLETE = 'complete';
import orderApi from '@/api/order.api';
export default {
  name: 'CancelPopup',
  props: {
    value: Boolean,
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      reasonType: '',
      reasonList: [
        {
          cancelReasonType: 1,
          cancelReason: '收货地址填错了'
        },
        {
          cancelReasonType: 2,
          cancelReason: '忘记支付密码/余额不足'
        },
        {
          cancelReasonType: 3,
          cancelReason: '无法正常支付'
        },
        {
          cancelReasonType: 4,
          cancelReason: '不想买了'
        },
        {
          cancelReasonType: 5,
          cancelReason: '其他原因'
        }
      ]
    };
  },
  computed: {
    reason() {
      return this.reasonList.find(item => item.cancelReasonType === this.reasonType);
    }
  },
  watch: {
    value(val) {
      this.show = val;
    },
    show(val) {
      this.$emit(EVENT_INPUT, val);
    }
  },
  mounted() {
    this.getReasonList();
  },
  methods: {
    onCellClick(name) {
      this.reasonType = name;
    },
    async getReasonList() {
      const [res] = await orderApi.orderCancelReason();
      this.reasonList = res.cancelReasonList;
    },
    handleRadioSubmit() {
      const status = this.orderInfo.orderStatus;
      if (status == 21) {
        this.orderUnfilledCancel();
      } else {
        this.orderCancel();
      }
    },
    // 已付款，待发货
    async orderUnfilledCancel() {
      const [res] = await orderApi.orderUnfilledCancel({
        orderNo: this.orderInfo.orderNo,
        ...this.reason
      });
      if (res) {
        if (this.orderInfo.skuList[0].skuSource === 2) {
          this.$router.push({
            path: '/refundKepler',
            query: { orderNo: this.orderInfo.orderNo, refundAmount: this.orderInfo.totalFee }
          });
        } else {
          this.$toast('已取消');
        }
        this.$emit(EVENT_INPUT, false);
        this.$emit(EVENT_COMPLETE);
      }
    },
    // 未付款
    async orderCancel() {
      const [res] = await orderApi.orderCancel({
        orderNo: this.orderInfo.orderNo,
        ...this.reason
      });
      if (res) {
        this.$toast('已取消');
        this.$emit(EVENT_INPUT, false);
        this.$emit(EVENT_COMPLETE);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.order-list {
  padding: 0 @padding-sm;
}
.cancel-popup {
  @{deep} .cr-popup--close-top-right {
    top: 18px;
    right: 14px;
  }
}

.Cp {
  &__head {
    text-align: center;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 @padding-md;
    border-bottom: 1px solid @grey-border;
    &-title {
      .text-16();
      color: @text-color;
      font-weight: bold;
    }
    &-desc {
      .text-13();
      color: @text-grey;
    }
  }
  &__list {
    flex: 1;
    &-radio {
      margin-right: 0;
    }
  }
  &__button {
    border-top: 1px solid @grey-border;
    padding: @padding-sm - 2 @padding-xs;
  }
  &__tip {
    width: 343px;
    margin: @padding-xs auto;
    background-color: @gray-1;
    border-radius: @border-radius-md;
    color: @gray-5;
    .text-12();
    text-align: center;
    padding: @padding-sm @padding-xs;
  }
}
</style>
