<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">{{iconAndTips.title}}</div>
    </div> -->
    <template v-if="!isSuccess">
      <cr-image width="120px" height="120px" :src="iconAndTips.imageUrl" />
      <p class="yuan">¥{{ iconAndTips.amount }}</p>
      <p class="yuan_detail">{{ iconAndTips.title }}</p>
      <div class="Cp__tip">{{ iconAndTips.tips }}</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"
            :class="{ active: reasonType === item.cancelReasonType }"
            @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"
          >确定退款¥{{ iconAndTips.amount }}</cr-button
        >
      </div>
    </template>
    <template v-else>
      <cr-image width="120px" height="120px" :src="iconAndTips.imageUrl" />
      <p class="succ">{{ iconAndTips.title }}</p>
      <p class="succ-detail tips">
        {{ iconAndTips.tips }}
      </p>
      <div class="Cp__button">
        <cr-button block type="primary" shape="circle" @click="handleConfirm">确定</cr-button>
      </div>
    </template>
  </cr-popup>
</template>
<script>
const EVENT_INPUT = 'input';
const EVENT_COMPLETE = 'complete';
import { smTrackEvent } from '@/service/shumei.service';
import orderApi from '@/api/order.api';
import refundImageUrl from '@/assets/images/refund/refund.png';
export default {
  name: 'CancelPopup',
  props: {
    value: Boolean,
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      reasonType: '',
      reasonList: [],
      iconAndTips: {
        imageUrl: refundImageUrl,
        amount: 222,
        title: '退款',
        tips: 'tips'
      },
      isSuccess: false
    };
  },
  computed: {
    reason() {
      return this.reasonList.find(item => item.cancelReasonType === this.reasonType);
    }
  },
  watch: {
    value(val) {
      this.reasonType = '';
      this.show = val;
      if (val) {
        this.getReasonList();
      }
    },
    show(val) {
      this.$emit(EVENT_INPUT, val);
    }
  },
  methods: {
    handleConfirm() {
      this.$emit(EVENT_INPUT, false);
      this.$emit(EVENT_COMPLETE);
      this.$emit('refresh');
    },
    onCellClick(name) {
      this.reasonType = name;
    },
    async getReasonList() {
      const params = {
        orderNo: this.orderInfo.orderNo
      };
      const [res] = await orderApi.orderCancelReasonV2(params);
      this.reasonList = res.cancelReasonList;
      this.iconAndTips = {};
      this.iconAndTips = res.iconAndTips;
    },
    handleRadioSubmit() {
      const status = this.orderInfo.orderStatus;
      if (status == 21 || status == 31) {
        this.orderUnfilledCancel();
      } else {
        this.orderCancel();
      }
    },
    // 已付款，待发货/发货中/已发货
    async orderUnfilledCancel() {
      if (!this.reason) return this.$toast('请选择取消原因！');
      const [res] = await orderApi.orderUnfilledCancelV2({
        orderNo: this.orderInfo.orderNo,
        ...this.reason,
        agreeContract: true
      });
      if (res) {
        this.isSuccess = true;
        this.iconAndTips = res.iconAndTips;
      }
    },
    // 未付款 用户订单取消接口【未付款】
    async orderCancel() {
      if (!this.reason) return this.$toast('请选择取消原因！');
      const [res] = await orderApi.orderCancel({
        orderNo: this.orderInfo.orderNo,
        ...this.reason
      });
      if (res) {
        smTrackEvent({
          eventId: 'cancelOrder',
          orderId: this.orderInfo.orderNo
        });
        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__list-wrap {
  overflow-y: auto;
  max-height: 200px;
}
.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-size(16);
      color: @text-color;
      font-weight: bold;
    }
    &-desc {
      .text-size(13);
      color: @text-grey;
    }
  }
  &__list {
    flex: 1;
    .active {
      color: #ec1500;
    }
    &-radio {
      margin-right: 0;
    }
    @{deep} .cr-cell__title {
      text-align: left;
    }
  }
  &__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-size(12);
    text-align: center;
    padding: @padding-sm @padding-xs;
  }
}
.cancel-popup {
  text-align: center;
  padding-top: 26px;
  @{deep} .cr-popup--close-top-right {
    top: 18px;
    right: 14px;
  }
}
.yuan {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 20px;
  margin-top: 12px;
}
.yuan_detail {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  line-height: 24px;
  margin-top: 12px;
  white-space: pre-line;
  margin-bottom: 24px;
}

.Cp__button {
  padding: 10px 20px;
}
.Cp {
  &__button {
    padding: @padding-sm - 2 @padding-xs;
  }
}
.succ {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 20px;
  margin-top: 17px;
}
.tips {
  margin-bottom: 84px;
}
.succ-detail {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  text-align: center;
  margin-top: 4px;
  padding: 0 50px;
}
</style>
