<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"
        :orderGoodsData.sync="order_goods_data"
      />

      <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 && ![5,6].includes(order_goods_data.refund_status)"
      >撤销申请</el-button>
<!--      <el-button-->
<!--        class="refundBtn"-->
<!--        type="primary"-->
<!--        @click="showWaybill()"-->
<!--        v-if="isWaybill"-->
<!--        v-show="stepActive == 2 && iSfailed == true"-->
<!--      >填写快递运单号</el-button>-->
      <el-button
        class="refundBtn"
        type="primary"
        @click="showWaybill()"
        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-input v-model="waybillForm.refund_delivery_name" size="small"></el-input>
          </el-form-item>

          <el-form-item label="物流单号">
            <el-input v-model="waybillForm.refund_delivery_no" size="small"></el-input>
          </el-form-item>

          <el-form-item label="物流说明">
            <el-input v-model="waybillForm.refund_delivery_remark" 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,

      order_goods_ids:[],
      order_goods_data:'',//需要售后的商品订单表信息
      refundData: {},//要退款的商品数据
      //卖家退货运单需要填写的表单
      waybillForm: {
        refund_delivery_name: "",//物流公司
        refund_delivery_no: "",//物流单号
        refund_delivery_remark: "",//物流说明
      },

      orderData: {},
      ids: [],
      refundStatus: undefined
    };
  },
  watch: {
    stepActive(n, o) {
      //   console.log(n, o);
    }
  },
  created() {
    this.orderData = {};
    this.iSrefund = undefined;
    this.iSfailed = undefined;
    this.stepActive = 0;

    this.order_goods_data = this.$route.query.row;//需要售后的商品订单表信息
    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`);

          this.order_goods_ids = this.orderData.order_goods.map(item => {
            return item.order_goods_id;
          });

          this.getRefundData()

          // 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://4等待买家发货
                this.stepActive = 2;
                this.iSfailed = true;
                break;
            case 5://5等待卖家发货
              this.stepActive = 2;
              this.iSfailed = false;
              break;
            case 6://6卖家确认收货
              this.stepActive = 2;
              this.iSfailed = false;
              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;
    },

    //获取要退货的商品信息
    getRefundData() {
      // 多个退款数据查询
      // if (this.orderData.order_goods.length > 1) {
      let obj = {
        order_goods_id: this.order_goods_ids.toString()
      };
      this.$axios
        .post(`/orderrefund/detail`, obj)
        .then(res => {
          this.refundData = res.data;
          //console.log('qq3',res.data);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 运单号弹出框确认按钮点击事件
    clickConfirm() {
      let obj = {
        order_goods_id: this.$route.query.row.order_goods_id,
        refund_delivery_name: this.waybillForm.refund_delivery_name,
        refund_delivery_no: this.waybillForm.refund_delivery_no,
        refund_delivery_remark:this.waybillForm.refund_delivery_remark,
      };

      //验证必填参数
      if (!obj.refund_delivery_name){
        this.$message.error("请填写物流公司名称");
        return;
      }
      if (!obj.refund_delivery_no){
        this.$message.error("请填写物流单号");
        return;
      }
      //发送请求
      this.$axios
        .post(`/orderrefund/delivery`, obj)
        .then(res => {
          console.log('qq2',res)
          if(res.code == 0){
            this.$message.success(res.message);
          }else{
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });


      this.waybillDialog = false;

    },
    //撤销退款申请
    cancelRefund() {
      console.log();
      let obj = {
        order_goods_id: this.$route.query.row.order_goods_id.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>
