<template>
  <div class="ivu-row">
    <div class="ivu-card">
      <div class="ivu-card-head">
        <p slot="title">退货申请处理</p>
      </div>
      <div class="ivu-card-body">
        <Row>
          <i-col span="6">退货ID：{{ id }}</i-col>
          <i-col span="6">退款申请时间：{{ returnedInfo.createTime | timeFormat }}</i-col>
          <i-col span="6">退货状态：{{ returnedGoodsShopStatus[returnedInfo.shopStatus] }}</i-col>
        </Row>
        <br />
        <Row>
          <i-col span="6">退货款金额：{{ returnedInfo.realReturnedAmount }}</i-col>
          <i-col span="6">退运费金额：{{ returnedInfo.returnShippingCost }}</i-col>
          <i-col span="6">退款总金额：{{ returnTotalAmount }}</i-col>
        </Row>
        <br />
        <Row>
          <i-col span="8">
            退款成功时间：<span v-if="returnedInfo.refundTime">{{ returnedInfo.refundTime | timeFormat }}</span>
          </i-col>
        </Row>
      </div>
    </div>
    <!--订单基本信息-->
    <order-base-info :order-info="orderInfo" :order-status="orderStatus"></order-base-info>
    <!--退货商品信息-->
    <returned-goods-info :table-data="returnGoods" :returned-reason="returnedReasonArr"></returned-goods-info>
    <div class="ivu-card">
      <div class="ivu-card-head">
        <h3>寄回物流信息</h3>
      </div>
      <div class="ivu-card-body">
        <Row>
          <i-col span="24">物流公司：{{ returnedInfo.expressName }}</i-col>
        </Row>
        <Row>
          <i-col span="24">运单号：{{ returnedInfo.expressNumber }}</i-col>
        </Row>
      </div>
    </div>
    <div class="ivu-card">
      <div class="ivu-card-body">
        <template v-if="returnedInfo.status === 0">
          <p class="red">若您同意退货，待买家寄回后，将退款给买家，若有异议请与平台联系</p>
          <p class="red">若您未响应申请，视作同意退货</p>
          <p class="red">若您不同意退货可点击驳回，若买家向平台投诉，如核实是您的责任，将会影响店铺评分</p>
        </template>
        <template v-if="returnedInfo.status === 10">
          <p class="red">-若您同意退款，将直接退款给买家</p>
          <p class="red">-若您逾期未响应，视作同意退款，系统将自动打款给买家</p>
        </template>
        <br />
        <template v-if="returnedInfo.status === 0">
          <i-button type="info" @click="pass()">同意</i-button>
        </template>
        <template v-if="returnedInfo.status < 20">
          <i-button type="error" @click="showRejectModal()">驳回</i-button>
        </template>
        <template v-if="returnedInfo.status === 10">
          <i-button type="info" @click="submitRefund">同意退款</i-button>
        </template>
      </div>
    </div>
    <modal-reject ref="showReject" :show="showReject" @submitReject="submitReject"></modal-reject>
  </div>
</template>

<script>
import { ReturnedGoodsInfo, ModalReject } from '../components';
import { ReturnedService, OrderService } from 'services/order';
import { LogisticsService } from 'services/logistics';
import { orderBaseInfo } from '../../components';
import { OrderConfig } from '../../configs';
import _ from 'lodash';

export default {
  components: { ReturnedGoodsInfo, ModalReject, orderBaseInfo },
  data() {
    return {
      orderInfo: [],
      orderStatus: OrderConfig.orderStatus,
      showReject: false,
      orderCode: this.$route.query.orderCode,
      id: this.$route.query.id,
      couponsData: [],
      returnGoods: [],
      refuseReasonList: [],
      returnedReasonArr: OrderConfig.returnedReasonArr,
      returnedInfo: [],
      logisticsList: [],
      expressName: '',
      expressId: 0,
      returnedGoodsShopStatus: OrderConfig.returnedGoodsShopStatus,
      returnTotalAmount: 0,
    };
  },
  created() {
    this.returnedService = new ReturnedService();
    this.orderService = new OrderService();
    this.logisticsService = new LogisticsService();
    this.getOrderInfo();
    this.getReturnedGoods();
    this.getRefuseReason();
    this.getReturnedInfo();
    this.getLogisticsList();
  },
  methods: {
    //获取申请单详情
    getReturnedInfo() {
      this.returnedService.getReturnedInfo({ id: +this.id }).then(ret => {
        this.returnedInfo = _.get(ret, 'data', []);
        this.returnTotalAmount = this.returnedInfo.realReturnedAmount + this.returnedInfo.returnShippingCost;
      });
    },
    //获取订单详情
    getOrderInfo() {
      this.orderService.orderDetail({ orderCode: +this.orderCode }).then(ret => {
        this.orderInfo = _.get(ret, 'data', []);
      });
    },
    //弹出驳回框
    showRejectModal() {
      this.$refs.showReject.show(this.refuseReasonList);
    },
    // 提交审核驳回
    submitReject(refuseReasonId) {
      this.returnedService.returnedReject({ id: +this.id, refuseReason: refuseReasonId }).then(ret => {
        if (ret.code === 200) {
          this.$Message.info(ret.message);
          this.$router.go(-1);
        } else {
          this.$Message.error(ret.message);
        }
      });
    },
    //获取退货申请的商品
    getReturnedGoods() {
      this.returnedService.queryReturnedGoods({ returnRequestId: this.id }).then(ret => {
        this.returnGoods = _.get(ret, 'data', []);
      });
    },
    //审核通过
    pass() {
      const _this = this;
      this.$Modal.confirm({
        title: '同意退货申请',
        content: `你确定同意退货申请吗？`,
        onOk() {
          _this.returnedService.returnedGoodsAudit({ id: _this.id }).then(ret => {
            if (ret.code === 200) {
              _this.$Message.info(ret.message);
              _this.$router.go(-1);
            } else {
              _this.$Message.error(ret.message);
            }
          });
        },
      });
    },
    //获取物流公司列表
    getLogisticsList() {
      this.logisticsService.logisticsList().then(ret => {
        this.logisticsList = _.get(ret, 'data', []);
      });
    },
    //获取驳回原因
    getRefuseReason() {
      this.returnedService.queryRefuseReason({}).then(ret => {
        this.refuseReasonList = _.get(ret, 'data', []);
      });
    },
    //同意退款
    submitRefund() {
      const _this = this;
      this.$Modal.confirm({
        title: '退款',
        content: `你确定 同意退款吗？`,
        onOk() {
          _this.logisticsService.proxyReturnedGoodsInstorage({ requestId: +_this.id }).then(ret => {
            if (ret.code === 200) {
              _this.$Message.info(ret.message);
              _this.$router.go(-1);
            } else {
              _this.$Message.error(ret.message);
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.red {
  color: red;
}
</style>