<!-- 申请售后 -->
<template>
  <div class="sign">
    <el-dialog
      :visible="DialogOrderAfterSaleVisible"
      width="60vw"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :show-close="false"
      custom-class="qddialog"
      top="8vh"
      v-loading="DialogOrderAfterSaleloading"
    >
      <div slot="title" class="title">
        <span>申请售后</span>
      </div>

<!--      售后方式-->
      <div class="refund_type_box" v-if="schedule == 1">
        <ul class="box">
          <li>
            <input type="radio" name="refundType" v-model="formData.refund_type" value="1">
            <div class="left">
              <strong>退款无需货退</strong>
              <span>没收到货,或与卖家写上同意无需要退货只退款</span>
            </div>
          </li>
          <!--只有order.order_status[已发货,已收货]时展示"已发货已收货"-->
          <li v-if="[3,4].includes(orderData.order_status)">
            <input type="radio" name="refundType" v-model="formData.refund_type" value="2">
            <div class="left">
              <strong>退货退款</strong>
              <span>已收到货,需退还收到的货物</span>
            </div>
          </li>
          <li>
            <input type="radio" name="refundType" v-model="formData.refund_type" value="4">
            <div class="left">
              <strong>仅退货</strong>
              <span>仅退货</span>
            </div>
          </li>
        </ul>
      </div>

      <!--商品列表-->
      <div class="goods_box" v-if="schedule == 2">
        <div class="goods" v-for="(v,k) in orderGoodsList">
          <div class="left">
            <input type="checkbox" name="refundType" v-model="selectOrderGoodsIds" :value="v.order_goods_id">
            <img :src="v.sku_image" alt="">
          </div>
          <div class="center">
            <span>{{v.sku_name}}</span>
          </div>
          <div class="checkbox">

          </div>
        </div>
      </div>

      <div class="form_box" v-if="schedule == 3">
        <el-form ref="form" :model="formData" label-width="120px">
          <el-form-item label="售后原因">
            <el-select v-model="formData.region" placeholder="请选择售后原因">
              <el-option v-for="(v,k) in refund_data.refund_reason_type" :key="k" :label="v" :value="v"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="售后说明">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入售后说明"
              v-model="formData.refund_remark">
            </el-input>
          </el-form-item>


          <div class="evaluateForm">
            <el-form-item label="上传图片" class="evaluateUpload">
              <UploadImageOss
                @input="uploadSccess($event, 'images')"
                :limit="5"
                :value="evaluateForm.images"
              >
                <template v-slot:upload>
                  <div class="upload_BOX">
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png"/>
                      <span>上传照片</span>
                    </div>
                  </div>
                </template>
              </UploadImageOss>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button  @click="setSchedule('sub')" size="mini" v-if="schedule > 1">上一步</el-button>
        <el-button  @click="setSchedule('add')" size="mini" v-if="schedule < 3">下一步</el-button>

        <el-button  @click="closr()" size="mini">取消</el-button>
        <el-button v-if="schedule == 3" type="primary" @click="submetForm()" size="mini">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadImageOss from "@/components/uploadImageOss.vue";

export default {
  //import引入的组件需要注入到对象中才能使用

  components: {
    UploadImageOss,
  },
  props: {
    DialogOrderAfterSaleVisible: Boolean,
    DialogOrderAfterSaleloading: Boolean,
    dialogOrderAfterSaleData: Object,
  },
  data() {
    //这里存放数据
    return {
      schedule:1,//进度|1:展示选择售后方式,2:展示需要售后的商品列表,3:展示表单操作
      selectOrderGoodsIds:[],//选中的需要售后的商品id
      orderGoodsList:[],//订单商品列表

      //退款信息
      refund_data:{
        refund_type: [],
      },

      explanation:'',
      formData:{
        order_goods_ids:'',//需要售后的商品id|多个值英文,号拼接,如"12,15,18"
        refund_type:'',//售后方式|1=仅退款,2=退款退货(在这个状态进行判断是否付款,没付款就是直接仅退货),4=仅退货不退款
        refund_reason:'',//售后原因|如:"未按约定时间发货"
        refund_remark:'',//售后说明
        refund_images:[],//上传图片,数组类型[[https://www.zhiyao.com/upload/a1111.png],[https://www.zhiyao.com/upload/a2222.png]]
      },//表单

      regionArr:[],
      //售后方式各项值列表
      refundTypeArr:[
        {
          name:'退款无需退货',
          val:'1',
          explain:'没收到货,活跃卖家协商同意无需退货只退款',
        },
        {
          name:'退货退款',
          val:'2',
          explain:'已收到货,需退还收到的货物',
        },
        {
          name:'仅退货无需退款',
          val:'4',
          explain:'仅退货无需退款',
        }
      ],
      orderData:{},//订单数据

      evaluateForm: {
        explainGrade: {},
        content: "",
        images: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    dialogOrderAfterSaleData: {
      handler(newVal) {
        console.log('qq1 (watch):', newVal);
        this.orderData = newVal; // 将 dialogOrderAfterSaleData 的值赋给 orderData
        this.getOrderGoodsList()//获取需要售后的商品列表
      },
      immediate: true, // 立即执行一次
      deep: true // 深度监听对象变化
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.DialogOrderAfterSaleVisible) {

    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //方法集合
  methods: {
    //获取需要退款的数据
    getRefundData(){

      this.$axios
        .post(`/orderrefund/refundDataBatch`, {order_goods_ids: this.selectOrderGoodsIds.join()})
        .then((res) => {
          if (res.code == 0) {
            this.refund_data = res.data
            this.formData.order_goods_ids = this.selectOrderGoodsIds.join()
            // console.log('qq22',this.refund_data.refund_reason_type)
          }else{
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
            this.$message.error(err);
          }
        );
    },
    //获取需要售后的商品列表
    getOrderGoodsList(){
      this.$axios
        .post(`/order/detail`, {order_id: this.orderData.order_id})
        .then((res) => {
          if (res.code == 0) {
            this.orderData = res.data

            let _refund_goods_data = [];//允许退款的商品
            res.data.order_goods.forEach((v)=>{
              if(v.refund_status == 0){
                _refund_goods_data.push(v)
              }
            })
            this.orderGoodsList = _refund_goods_data//需要售后的商品列表

            console.log('1111',this.orderGoodsList)
          }else{
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
            this.$message.error(err);
          }
        );
    },

    //设置步骤
    setSchedule(type){
      let _schedule
      if (type == 'add') {
        //下一步
        _schedule = this.schedule + 1
        if (_schedule >= 3) {
          _schedule = 3
        }
      } else {
        //上一步
        _schedule = this.schedule - 1
        if (_schedule <= 1) {
          _schedule = 1
        }
      }

      switch (_schedule) {
        case 2:
          if (!this.formData.refund_type){
            this.$message.error('请选择售后方式');
            return
          }
          break;
        case 3:
          if (this.selectOrderGoodsIds.length <= 0){
            this.$message.error('请选择需要售后的商品');
            return
          }
          this.getRefundData()
          break;
      }
      this.schedule = _schedule
    },

    //上传图片
    uploadSccess(e, key) {
      this.evaluateForm.images = e;
      console.log(e, key);
    },

    //提交
    submetForm(){
      console.log('ttt',this.evaluateForm)

      this.formData.refund_images = [];
      if(this.evaluateForm.images.length > 0){
        this.evaluateForm.images.forEach((v,k)=>{
          this.formData.refund_images[k] = [v]
        })
      }

      this.$axios
        .post(`/orderrefund/refund`, this.formData)
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(res.message);
            setTimeout(() => {
              this.closr();
            }, 1500);
          }else{
            this.$message.error(res.message);
          }
          console.log(res.data);
        })
        .catch((err) => {
            this.$message.error(err);
          }
        );

    },

    //关闭弹窗
    closr(){
      this.$emit("closrDialogOrderAfterSale", true);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    padding: 0 30px;
  }
  .el-dialog__header {
    padding-top: 33px;
  }
  .el-dialog__footer {
    padding-bottom: 20px;
  }
}
.qddialog {
  padding: 33px 30px 20px;

  .title {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
      margin-right: 11px;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 24px;
    }
  }
  .timenum {
    font-size: 30px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #ff1449;
    line-height: 35px;
    text-align: center;
    margin: 20px 0 10px;
  }
  .timeText {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    text-align: center;
    line-height: 20px;
  }
  .gz {
    p {
      margin: 20px 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 20px;
    }
    .gztext {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;

      line-height: 22px;
      p {
        color: #999999;
      }
    }
  }
  .jl {
    .qdjl {
      margin: 20px 0 10px;

      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 20px;
    }
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .left {
          display: flex;
          align-items: center;
          .img {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            // background-color: $--color-primary;
            background: linear-gradient(141deg, #ffac73 0%, #fe6e0b 100%);
            border-radius: 100%;
            img {
              width: 26px;
              height: 26px;
            }
          }
          .cnt {
            height: 44px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #222222;
              line-height: 22px;
              letter-spacing: 1px;
            }
            .time {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
            }
          }
        }
        .right {
          .big {
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #585858;
            line-height: 24px;
          }
          .min {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            line-height: 20px;
          }
        }
      }
    }
  }
}

.goods_box{
  margin-top: 15px;
  .goods{
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    .left{

      display: flex;
      align-items: center;
      img{
        margin-left: 10px;
        width: 60px;
        height: 60px;
        object-position: center;
        object-fit: cover;
      }
    }
    .center{
      margin-left: 10px;
      span{
        //font-size: 15px;
      }
    }
    .checkbox{

    }
  }
}

//第一步,选择售后类型
.refund_type_box{
  margin-top: 15px;
  ul{
    li{
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      .left{
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        strong{
          font-size: 16px;
        }
        span{
          margin-top: 4px;
          font-size: 14px;
        }
      }
    }
  }
}


//上传相关
.evaluateUpload {
  .el-form-item__content {
    width: 100px;
    border-radius: 4px;

    .finish_room {
      margin: 0 auto;
      text-align: center;
      .finish_room2 {
        div {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.upload_BOX {
  width: 152px !important;
  height: 152px !important;
  border-radius: 4px;
  border: 1px solid #dddddd;
  text-align: center;

  .upload {
    color: #ccc;
    margin-top: 50px;
    img {
      margin: auto;
      width: 22px;
      height: 20px;
    }
  }
}
</style>
