<template>
     <section class="main">
        <div class="p_all_20">
            <div class="stepsBox">
                <el-steps :active="restatus" finish-status="success">
                <el-step title="买家申请退款"></el-step>
                <el-step title="卖家处理退款"></el-step>
                <el-step title="平台确认"></el-step>
                <el-step title="退款完成"></el-step>
                </el-steps>
            </div>
            <div class="content_inner_box">
            <div class="content_inner_left">
                <h5>退货商品信息</h5>
                <div class="refund_info">
                    <div :class="['info_img', refundInfo.skuId?'blueColor':'']" @click="goProdetail(refundInfo.skuId)">
                        <img :src="refundInfo.goodsImg" alt=" ">
                         <span>{{refundInfo.goodsInfo}}</span>
                    </div>
                    <ul>
                        <li>
                            <span class="til_span">订单编号：</span>
                            <span>{{refundInfo.orderCode}}</span>
                        </li>
                        <li>
                            <span class="til_span">供货价：</span>
                            <span class="color_red">{{refundInfo.price}}元 *{{refundInfo.count}}(数量)</span>
                        </li>
                        <li>
                            <span class="til_span">退款编号：</span>
                            <span>{{refundInfo.refundCode}}</span>
                        </li>
                        <!--<li>-->
                            <!--<span class="til_span">退款金额：</span>-->
                            <!--<span class="color_red">{{refundInfo.refundMoney}}元</span>-->
                        <!--</li>-->
                        <li>
                            <span class="til_span">原因：</span>
                            <span>{{refundInfo.refundReason}}</span>
                        </li>
                        <li>
                            <span class="til_span">货物状态：</span>
                            <span>{{refundInfo.goodsStatus}}</span>
                        </li>
                        <li>
                            <span class="til_span">说明：</span>
                          <span style="overflow: hidden;text-overflow: ellipsis;word-break:break-all">{{refundInfo.refundRemark}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_inner_right" >
                <div class="right_inner_box" v-if="refundInfo.status==3 && refundInfo.auditStatus==1 && !refundOK">
                    <p>退款已确认，成功退款并已关闭!</p>
                </div>
                <div class="right_inner_box" v-if="refundInfo.status==3 && refundInfo.auditStatus==0 && !refundOK">
                    <p class="p1">退款已确认!</p>
                    <p class="p2">退款已确认！系统将在2个工作日内将款项退至买家账号。</p>
                </div>
                <div class="right_inner_box" v-if="refundInfo.status==2">
                    <p>退款关闭!</p>
                </div>
              <div class="right_inner_box" v-if="refundInfo.rejectReason">
                <p>拒绝退款原因：</p>
                <el-input
                  readonly
                  style="width: 500px;margin-top: 10px"
                  type="textarea"
                  :rows="2"
                  v-model="refundInfo.rejectReason">
                </el-input>
              </div>
              <!--<div class="right_inner_box" v-if="refundInfo.status==4">-->
                <!--<p>已拒绝买家退款!</p>-->
              <!--</div>-->
                <div class="right_inner_box" v-if="refundInfo.status==1 && !refundOK">

                    <div class="way1" v-if="refundInfo.auditStatus ==1">
                       <p class="p1">退款已确认!</p>
                        <p class="p2">退款已确认！系统将在2个工作日内将款项退至买家账号。</p>
                    </div>
                    <div v-else>
                        <h4>请处理订单</h4>
                        <div class="agreebox" v-if="!isshowBox">
                                <div class="content">
                                    <p>您可以联系买家情况，再进行处理！</p>
                                    <p><span>联系人：{{refundInfo.contacts}} </span><span>联系电话：{{refundInfo.contactPhone}}</span></p>
                                </div>
                                <div class="right_info">
                                    <p>• 如果未发货，请点击同意退款给买家。</p>
                                    <p>• 如果实际已发货，请主动与买家联系。</p>
                                    <el-button type="primary" class="agreeRefund" @click="agreeRefund">同意退款申请</el-button>
                                  <el-button  class="agreeRefund" @click="refuseRefund">拒绝退款申请</el-button>
                                </div>
                        </div>

                        <div class="right_info inputBox" v-else>
                            <div class="div1">
                                <span class="span1">输入手机号码：</span>
                                <input type="text" class="input1" readonly :value="refundInfo.merMobile">
                            </div>
                            <div class="div1 div2">
                                <span class="span1">输入验证码：</span>
                                <input type="text" class="input2" v-model="codeVal">
                                <span class="clickSpan" @click="sendCode" :refundId="refundInfo.refundId" v-text="textSpan" v-show="sendAuthCode"></span>
                                <span class="clickSpan" v-text="textSpan" v-show="!sendAuthCode"></span>
                            </div>
                            <el-button type="primary" class="leftel" @click="confirmRefund" :refundId="refundInfo.refundId">{{temRejectReason?'确认拒绝':'确认退款'}}</el-button>
                        </div>

                    </div>


                </div>

                <div class="right_inner_box" v-if="refundOK && refundInfo.auditStatus==1">

                    <div class="way1" v-if="refundInfo.status==1">
                        <p class="p1">退款已确认!</p>
                        <p class="p2">退款已确认！系统将在2个工作日内将款项退至买家账号。</p>
                    </div>
                    <div class="way1" v-else>
                        <p class="p2">退款已确认，成功退款并已关闭!。</p>
                    </div>
                </div>
                <div class="right_inner_box" v-else-if="refundOK && refundInfo.auditStatus==0&&!refundInfo.rejectReason">
                    <div class="way1">
                        <p class="p1">退款已确认!</p>
                        <p class="p2">退款已确认！系统将在2个工作日内将款项退至买家账号。</p>
                    </div>
                </div>
            </div>

        </div>
        </div>
       <el-dialog
         :close-on-click-modal="false"
         title="拒绝退款原因"
         :visible.sync="dialogVisible"
         width="35%"
       >
         <div style="margin: 20px 0;">
           <el-input
             :autosize="{ minRows: 4, maxRows: 6}"
             type="textarea"
             placeholder="请说明拒绝买家退款的理由（200字以内）"
             v-model="temRejectReason"
             maxlength="200"
             show-word-limit
           >
           </el-input>
         </div>
         <div style="text-align: right">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="saveRefund">确 定</el-button>
         </div>
       </el-dialog>
     </section>
</template>
<script>
import qs from 'qs'
// auditStatus:0支付宝支付，1余额支付
//退款状态status： 1 退款中 2 已关闭 3 已退款
export default {
    name:'refundProcessing',
    data(){
        return{
          dialogVisible:false,
            breadcrumb:'',
           refundInfo:'',
           textSpan:'获取验证码',
           sendAuthCode:true,
           auth_time:300,
           isshowBox:false,
           codeVal:'',
           refunded:false,
           refundOK:false,
           refundMoney:false,
           temType:0, //确认退款验证码类型
           temRejectReason:'',//退款原有
        }
    },
    mounted(){
        this.$nextTick(function(){
            this.getRefundInfo();
        })
    },
    methods:{
      saveRefund(){
        if(!this.temRejectReason){
          this.$message.warning('拒绝买家退款的理由不能为空')
          return
        }
        this.isshowBox = true
        this.dialogVisible=false
      },
    goProdetail(skuId){
           if(skuId){
            this.$router.push({ path: '/goods/productdetails', query:{
              skuId:skuId,
            }})
           }
      },
        getRefundInfo(){
            var rid = this.$route.query.refundId;
             this.$axios.get('/order/refund/info/'+ rid,{
                 params:{
                     id:rid
                 }
             }).then((res) => {
              if(res.data.code==200){
                 this.refundInfo = res.data.data;
              }else{
                  this.$message.error(res.data.message);
              }

            }).catch(()=>{

            })
        },
        refuseRefund(){
          this.temType=1
          this.temRejectReason=''
          this.dialogVisible=true
        },
        agreeRefund(){
            this.temType=0
            this.$confirm('本订单中的部分商品，买家已经提交退款申请，是否同意该订单的退款申请?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.isshowBox = true
            }).catch(() => {
            });
        },
        timer() {
          this.sendAuthCode = false;
          this.auth_time = 30;
          const auth_timetimer =  setInterval(()=>{
              this.auth_time--;
              if(this.auth_time<=0){
                  clearInterval(auth_timetimer);
                  this.sendAuthCode = true;
                  this.textSpan="获取验证码"
              }else{
                this.textSpan= this.auth_time + "s";
                this.sendAuthCode = false;
              }
          }, 1000);
      },
        sendCode(e){
            let apiUrl = this.temType==0?'captcha':'captchav2'
            var refundId = e.currentTarget.getAttribute("refundId");
            let data = {"refundId":refundId,type:this.temType};
            // let dataParam = qs.stringify(data);
            this.timer();
            this.$axios.get('/order/refund/'+apiUrl,{
                params:data
            }).then((res) => {
              if(res.data.code==200){
                  this.$message.success(res.data.message);

              }else{
                  this.$message.error(res.data.message);
                  this.auth_time = 0;
              }

            }).catch(()=>{
              this.auth_time = 0;
            })
        },
        confirmRefund(e){
          var refundId = e.currentTarget.getAttribute("refundId");
          var code = this.codeVal;
          if(!code){
              this.$message.error("请输入验证码");
              return false
          }
          let data = {"refundId":refundId,"code":code};
          let apiUrl ='confirm' //切换退款状态
          if(this.temType==1){
            data.rejectReason=this.temRejectReason
            apiUrl='reject'
          }
          this.$axios.post('/order/refund/'+apiUrl,data).then((res) => {
              if(res.data.code==200){
                  this.$message.success(res.data.message);
                this.refunded =true;
                this.refundOK = true;
                this.getRefundInfo();
              }else{
                  this.$message.error(res.data.message);
              }

            }).catch(()=>{

            })
        }
    },
    computed:{
        restatus:function(){
            let act;
            if(this.refundInfo.auditStatus == 1 && this.refundInfo.status == 1){
                act = 2
            }else if(this.refundInfo.auditStatus == 1 && this.refundInfo.status == 2){
                act = 3
            }else if(this.refundInfo.auditStatus == 1 && this.refundInfo.status == 3){
                act = 4
            }else{
                act =1
            }
            return act
        }
    },
    components:{

    }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-dialog__body{
    padding: 3px 20px 20px;
  }
 .stepsBox{
     border:1px solid #dcdcdc;
     padding: 30px;
     border-radius: 8px;
     margin-bottom: 30px;
     .tipsDiv{
         margin-top: 20px;
         font-size: 14px;
     }
 }
 .way1{
     .p1{
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 10px;
     }
     .p2{
         font-size: 14px;
     }
 }
 .way2{
     font-size: 16px;
         font-weight: bold;
         margin-top: 10px;
 }
.content_inner_box {
    border:1px solid #dcdcdc;
    overflow:hidden;
    // height:500px;
    background-color:#fff;
}
.content_inner_left {
    // width:378px;
    width: 34%;
    height:100%;
    border-right:1px solid #dcdcdc;
    float:left;
}

.content_inner_right {
    // width:858px;
    width: 62%;
    float:left;
    height:100%;
    position:relative;
}
.content_inner_left h5 {
    font-size:16px;
    font-weight:bold;
    padding:20px;
    // border-bottom:1px solid #dcdcdc;
}
.content_inner_left .refund_info {
    padding:10px 21px;
}
.content_inner_left .refund_info .info_img {
    overflow:hidden;
    margin-bottom:14px;
    display: flex;
}
.content_inner_left .refund_info .info_img img {
    width:80px;
    height:80px;
    margin-right:10px;
}
    .content_inner_left .refund_info .info_img span{
        display:inline-block;
        // width:220px;
        vertical-align:top;
        line-height: 24px;
    }
.content_inner_left .refund_info ul li{
    padding:6px 0;
}
.content_inner_left .refund_info ul .til_span {
    min-height:20px;
    display:inline-block;
    min-width:100px;
    text-align:right;
}
.content_inner_left .refund_info ul .color_red {
    color:#d23232;
}
.content_inner_right h4 {
    font-size:16px;
    font-weight:bold;
    padding:0px 0 20px;
}
.content_inner_right .right_inner_box {
    padding:20px 28px 10px;
}
.content_inner_right .right_info p {
    padding:4px 0;
    font-size: 12px;
}
.content_inner_right .right_inner_box .content {
    margin-bottom:10px;
    padding:20px 35px;
    // border:1px solid #ffcc00;
    border-radius: 8px;
    background:#dcdcdc;
    overflow-y: auto;
}
.content_inner_right .right_inner_box .content p{
   line-height:38px;
}
.content_inner_right .right_inner_box .content span{
    margin-right:50px;
}
.content_inner_right .right_info .tips_p {
    width:760px;
    height:36px;
    line-height:36px;
    background-color:#ffe;
    border:1px solid #fcebbd;
    padding-left:26px;
    // background:#ffe url(../images/yellow_light.png) left center no-repeat;y
    background-size:26px 26px;
}
.content_inner_right .right_info ul {
    margin-top:20px;
}
.content_inner_right .right_info ul li{
    margin-bottom:18px;
}
.content_inner_right .right_info ul span {
    display:inline-block;
    min-width:120px;
    text-align:right;
}
.content_inner_right .right_info .disabled_input {
    height:36px;
    line-height:36px;
    width:360px;
    padding:0 8px;
    border:1px solid #DDDDDD;
}
.content_inner_right .right_info .verify_code{
    height:36px;
    line-height:36px;
    width:260px;
    padding:0 8px;
    border:1px solid #DDDDDD;
}
.content_inner_right .right_info .verify_btn {
    width:100px;
    height:38px;
    background-color:#f70;
    color:#fff;
    border:1px solid #f70;
    outline:0;
}
.inputBox{
    .div1{
      font-size: 14px;
      margin-bottom: 10px;
      width: 500px;
      overflow: hidden;
      .span1{
          display: block;
          width: 120px;
          float: left;
          text-align: right;
          line-height: 36px;
      }
      input{
          width: 200px;
          float: left;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dcdcdc;
          padding-left: 10px;
      }
      .input1{
          width: 300px;
          border-radius: 4px;
      }
      .input2{
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
      }
      .clickSpan{
          background-color: #48e;
          color: #fff;
          float: left;
          width: 100px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
      }

    }
    .leftel{
        margin-left: 120px;
        margin-top: 30px;
    }
}
.ma_left {
    margin-left:124px;
}
.content_inner_right .right_info .agreeRefund {
    margin-top: 20px;
}
.content_inner_right .footer_info {
    width:783px;
    height:66px;
    line-height:50px;
    position:absolute;
    bottom:0;
    left:35px;
    border-top:1px dashed #ccc;
}
.content_inner_right .footer_info a{
    display:inline-block;
    padding:0 6px;
    color:#48e;
    font-size:14px;
}
.content_inner_right .footer_info span{
    display:inline-block;
    padding:0 8px;
}
</style>
