<template>
  <div class="refund-money-detail-con">
    <div class="detail-scroll">
      <refund-steps :status="detail.returnState" />
      <refund-state :status="detail.returnState"  :reason="detail.errMsg"/>
      <div class="refund-total common">
        <div class="item title">
          <span class="left">退款总额</span>
          <span class="right">￥{{ detail.amount | floatFilter }}</span>
        </div>
        <!-- <div class="item">
          <span class="left">退回余额宝</span>
          <span class="right">￥{{ detail.amount | floatFilter }}</span>
        </div> -->
      </div>
      <refund-goods :data="detail" />
      <div class="empty" />
    </div>
    <refund-footer v-if="showFooter" @cancel="handleCancel" />
  </div>
</template>

<script>
import RefundSteps from "./refund-steps";
import RefundState from "./refund-state";
import RefundGoods from "./refund-goods.vue";
import RefundFooter from "./refund-footer.vue";
import {
  RefundStatus,
  RefundStatusObj,
  RefundType,
  RefundTypeObj,
} from "@/enums";
export default {
  components: {
    RefundSteps,
    RefundState,
    RefundGoods,
    RefundFooter,
  },

  computed: {
    showFooter() {
      return this.detail.returnState == RefundStatus.APPLY;
    },
  },
  data() {
    return {
      oid: "",
      detail: {
        returnState: RefundStatus.APPLY,
        list: [],
        errMsg: ""
      },
    };
  },
  methods: {
    requestDetail(oid) {
      this.$showLoading();
      this.$api({
        apiName: RefundTypeObj[RefundType.MONEY].detailApi,
        postData: oid,
        success: (res) => {
          this.detail = res;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    handleCancel() {
      this.$confirm({
        title: "确认要撤销当前退款？",
        confirm: this.requestCancel
      })
    },
    requestCancel(){
      this.$showLoading();
      this.$api({
        apiName: "cancelOrderRefund",
        postData: this.oid,
        success: () => {
          this.detail.returnState = RefundStatus.CANCEL;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    }
  },
  mounted() {
    let { oid } = this.$route.query;
    this.oid = oid;
    this.requestDetail(oid);
  },
};
</script>

<style lang="less">
.refund-money-detail-con {
  height: 100%;
  background: #f5f7fb;
  .detail-scroll {
    height: 100%;
  }
  .detail-scroll {
    overflow-y: auto;
    > .common {
      padding: 15px 16px;
      background: #ffffff;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    > .refund-total {
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .item .left {
        font-size: 12px;
        color: #666666;
      }
      .item .right {
        font-size: 14px;
        font-weight: bold;
        color: #666666;
      }
      .title {
        margin-bottom: 10px;
      }
      .title .left {
        font-size: 14px;
        color: #010101;
        font-weight: bold;
      }
      .title .right {
        font-size: 16px;
        color: #FA9F37;
      }
    }
    > .empty {
      height: 43px;
    }
  }
}
</style>

