<template>
  <div class="refund wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>{{ titleType }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="refund_Box">
      <el-steps :active="stepActive" finish-status="success">
        <el-step
          :title="stepItem.stepTitle"
          v-for="(stepItem, stepIndex) in stepList"
          :key="stepIndex"
        ></el-step>
      </el-steps>
      <ApplyRefund v-if="stepActive == 0" :orderData.sync="orderData" ref="applyRefund" />
      <ProcessRefunds
        v-if="!stepActive == 0"
        ref="processRefunds"
        :stepActive.sync="stepActive"
        :iSfailed.sync="iSfailed"
        :iSrefund.sync="iSrefund"
        :orderData.sync="orderData"
      />

      <el-button class="refundBtn" type="primary" @click="next(0)" v-show="stepActive == 0">提交</el-button>
      <el-button class="refundBtn" type="primary" @click="next(1)" v-show="stepActive == 1">撤销申请</el-button>
      <el-button
        class="refundBtn"
        type="primary"
        @click="next(2)"
        v-show="stepActive == 2 && iSfailed == false"
      >撤销申请</el-button>
      <el-button
        class="refundBtn"
        type="primary"
        @click="showWaybill()"
        v-if="isWaybill"
        v-show="stepActive == 2 && iSfailed == true"
      >填写快递运单号</el-button>
    </div>

    <DialogSlot
      :dialogSlotShow.sync="waybillDialog"
      @done="reload"
      :tipsText="'填写快递单号'"
      @clickConfirm="clickConfirm"
    >
      <template v-slot:contentSlot>
        <el-form ref="waybillForm" :model="waybillForm" label-width="80px">
          <el-form-item label="快递公司">
            <el-select
              v-model="waybillForm.region"
              placeholder="请选择"
              style="width: 100%"
              size="small"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input v-model="waybillForm.name" size="small"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </DialogSlot>
    <Dialog
      ref="revokedialog"
      :contentText="contentText"
      @clickConfirm="cancelRefund"
      :cancelText="'返回'"
    ></Dialog>
  </div>
</template>
<script>
import ApplyRefund from "./applyRefund.vue";
import ProcessRefunds from "./processRefunds.vue";
export default {
  components: { ApplyRefund, ProcessRefunds },
  auth: false,
  data() {
    return {
      // 进度条状态
      stepActive: 0,
      // 是否完成退款
      iSrefund: undefined,
      // 商家是否同意退款
      iSfailed: undefined,
      refundForm: {
        region: "",
        num: 8000,
        desc: "",
        license: ""
      },
      contentText: "",
      titleType: "申请退款",
      stepList: [
        {
          stepTitle: "申请退款",
          stepId: "1"
        },
        {
          stepTitle: "卖家处理退款申请",
          stepId: "2"
        },
        {
          stepTitle: "退款成功",
          stepId: "3"
        }
      ],
      refundRules: {
        region: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
      },
      // 运单号弹出框
      isWaybill: false,
      waybillDialog: false,
      waybillForm: {
        region: "",
        name: ""
      },

      orderData: {},
      ids: [],
      refundStatus: undefined
    };
  },
  watch: {
    stepActive(n, o) {
      //   console.log(n, o);
    }
  },
  created() {
    this.orderData = {};
    this.iSrefund = undefined;
    this.iSfailed = undefined;
    this.stepActive = 0;
    if (this.$route.query.row.refund_status == 0) {
      this.orderData = this.$route.query.row;
    } else {
      let status = this.$route.query.row.refund_status;
      this.getRefundOrder(this.$route.query.row.order_id, status);
      console.log(
        this.stepActive,
        this.iSfailed,
        this.iSrefund,
        status,
        111111
      );
    }
  },
  mounted() {
    this.stepType();
  },
  methods: {
    getRefundOrder(id, status) {
      let obj = {
        order_id: id
      };
      this.$axios
        .post(`/order/detail`, obj)
        .then(res => {
          this.orderData = res.data;
          console.log(status, `status`);
          console.log(this.orderData, `this.orderData`);

          // refund_status  1申请退款   2已确认  3已完成  4等待买家发货  5等待卖家发货   6卖家确认收货  -1卖家拒绝退款  -2卖家关闭退款
          switch (status) {
            case -1:
              this.stepActive = 2;
              this.iSfailed = false;
              this.iSrefund = false;
              break;
            case 1: //等待商家同意
              this.stepActive = 1;
              this.iSrefund = undefined;
              this.iSfailed = undefined;
              break;
            case 2:
              this.stepActive = 2;
              this.iSfailed = true;
              break;
            case 3:
              this.stepActive = 3;
              this.iSrefund = true;
              break;
            //   case 4:
            //     this.stepActive = 2;
            //     break;

            //   default:
            //     this.stepActive = 0;
            //     break;
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    next(i) {
      // 提交退款申请
      if (i == 0) {
        let { refundtype, refund_reason, refund_remark } = {
          ...this.$refs.applyRefund.refundForm
        };
        let ids = [];
        ids = this.orderData.order_goods.map(item => {
          return item.order_goods_id;
        });

        let obj = {
          order_goods_ids: ids.toString(),
          refund_type: refundtype,
          refund_reason: refund_reason,
          refund_remark: refund_remark
        };
        this.$axios
          .post(`/orderrefund/refund`, obj)
          .then(res => {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.$router.push(`/order`);
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
      // 撤销申请
      else if (i == 1 || i == 2) {
        this.$refs.revokedialog.dialogShow = true;
        this.contentText = "确定要撤销退款申请吗？";
      }
    },
    stepType() {
      if (this.stepActive == 0) {
        this.titleType = "申请退款";
      } else if (this.stepActive == 1) {
        this.titleType = "卖家处理退款申请";
      } else if (this.stepActive == 2) {
        this.titleType = "退款成功";
      }
    },
    reload(e) {
      console.log(e, "0000");
    },
    // 显示运单号弹出框
    showWaybill() {
      this.waybillDialog = true;
    },
    // 运单号弹出框确认按钮
    clickConfirm() {
      let obj = {
        order_goods_id: "",
        refund_delivery_name: "",
        refund_delivery_no: ""
        // refund_delivery_remark
      };

      this.waybillDialog = false;
      // if (this.stepActive++ > 2) this.stepActive = 0;
    },
    cancelRefund() {
      console.log();
      let obj = {
        order_goods_id: this.$refs.processRefunds.order_goods_ids.toString()
      };
      this.$axios
        .post(`/orderrefund/cancel`, obj)
        .then(res => {
          console.log(res);
          this.$message({
            message: res.message,
            type: "success"
          });
          this.$router.push({ path: "/order" });
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.refund {
  .crumbs {
    margin: 20px 0;
  }
  .refund_Box {
    width: 1200px;
    min-height: 580px;
    background: #ffffff;
    border-radius: 4px;
    padding: 30px 30px 0 37px;
    margin-bottom: 20px;
    position: relative;

    /deep/ .el-steps {
      margin-bottom: 25px;
      .el-step__head.is-success {
        color: var(--themeColor);
        border-color: var(--themeColor);
      }
      .el-step__title.is-success {
        color: #222222;
      }
    }
    .refundForm {
      width: 600px;
      /deep/ .el-form-item {
        .refundIpt {
          .el-input__inner {
            color: #ff3838;
          }
        }
      }
    }
    .commodityBox {
      display: flex;
      img {
        width: 80px;
        height: 80px;
      }
      .commoditytxt {
        p {
          line-height: 30px;
          text-align: left;
          margin-left: 10px;
          font-size: 12px;
        }

        p:first-child {
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
    .upload_BOX {
      width: 70px;
      height: 70px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      text-align: center;
      .upload {
        margin: 10px auto;
        color: #ccc;
        img {
          margin: auto;
          width: 22px;
          height: 20px;
        }
      }
    }
    .refundBtn {
      position: absolute;
      right: 30px;
      bottom: 40px;
    }
  }
}
</style>