<template>
  <div class="refund-goods-detail-con">
    <div class="detail-scroll">
      <refund-steps :status="detail.state" />
      <refund-state :status="detail.state" :data="detail.shopInfoVo" />
      <refund-express :oid="oid" :status="detail.state" :data="detail" />
      <refund-goods :data="detail" />
      <view class="empty" />
    </div>
    <refund-footer v-show="showFooter" @cancel="handleCancel" />
  </div>
</template>

<script>
import RefundSteps from "./refund-steps";
import RefundState from "./refund-state";
import RefundExpress from "./refund-express.vue";
import RefundGoods from "./refund-goods.vue";
import RefundFooter from "./refund-footer.vue";
import {
  RefundType,
  RefundTypeObj,
  DeliveryRefundStatus,
  RefundReasonType,
} from "@/enums";
export default {
  components: {
    RefundSteps,
    RefundState,
    RefundExpress,
    RefundGoods,
    RefundFooter,
  },
  computed: {
    showFooter() {
      return this.detail.state == DeliveryRefundStatus.APPLY;
    },
  },
  data() {
    return {
      oid: "",
      detail: {
        state: DeliveryRefundStatus.APPLY,
        skuVo: {},
        errMsg: "",
        shopInfoVo: {
          addr: "",
          name: "",
          phone: "",
        },
        returnType: RefundReasonType.DISSATISFIED,
      },
    };
  },
  methods: {
    requestDetail(oid) {
      this.$showLoading();
      this.$api({
        apiName: RefundTypeObj[RefundType.GOODS].detailApi,
        postData: oid,
        success: (res) => {
          this.detail = res;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    handleCancel() {
      this.$confirm({
        title: "确认要撤销当前退货？",
        confirm: this.requestCancel,
      });
    },
    requestCancel() {
      this.$showLoading();
      this.$api({
        apiName: "cancelDeliveryRefund",
        postData: this.oid,
        success: () => {
          this.detail.state = DeliveryRefundStatus.CANCEL;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
  mounted(){
    this.oid = this.$route.query.oid
    this.requestDetail(this.oid);
  }
};
</script>

<style lang="less">
.refund-goods-detail-con {
  height: 100%;
  background: #f5f7fb;
  .detail-scroll {
    height: 100%;
    overflow: auto;
  }
  .detail-scroll{
    > .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: #dd2e41;
      }
    }
    > .empty {
      height: 43px;
    }
  }
}
</style>

