<template>
  <view class="refunds" v-if="!loading">
    <u-top-tips ref="uTips"></u-top-tips>
    <view class="head">
      <view class="goods">
        <image :src="good.CoverImagePath" mode="aspectFill" class="image" />
        <view class="good-info">
          <view class="name-box">
            <view class="name">{{ good.GoodsName }}</view>
          </view>
          <view class="price">
            <text>单价：</text>
            <text style="color: #222; margin-right: 30rpx;">{{
              good.Final_Price
            }}</text>
            <text>购买数量：</text>
            <text style="color: #222;">{{ good.Number }}</text>
          </view>
        </view>
      </view>
    <!--  <view class="num-box">
        <view class="left">申请数量</view>
        <view class="right">
          <u-number-box :disabled="forms.Type==1" :min="1" :max="good.Number" v-model="forms.ReNumber" @change="valChange"></u-number-box>
        </view>
      </view> -->
	  <view class="num-box" v-if='forms.Type==1'>
	    <view class="left">退款金额</view>
	    <view class="right" style="display: flex;flex-direction: row;align-items: center;">
	      <input
		  style='text-align: right;'
	        type="number"
	        v-model="forms.Refund"
			@blur='inputnum'
	        placeholder="请输入退款金额"
	      />
		  <Text>元</Text>
	    </view>
	  </view>
    </view>
    <view class="apply">
      <view class="title">
        <view class="left">申请原因</view>
        <view class="right">请您描述问题并上传收到的商品照片</view>
      </view>
      <view class="content">
        <textarea
          placeholder="请描述申请售后服务的具体原因"
          maxlength="150"
          placeholder-style="font-size:13px"
          :value="forms.Remark"
          @input="inputremarkHandler"
        />
        <view class="maxnum">{{ forms.Remark.length }}/150</view>
      </view>
      <view class="upload">
        <u-upload
          :action="action"
          :file-list="fileList"
          max-count="9"
          :custom-btn="true"
          @on-success="uploadSuccessHandler"
        >
          <view slot="addBtn" class="slot-btn">
            <u-icon name="photograph" size="40" color="#888"></u-icon>
            <view class="mian-title">上传凭证</view>
            <view class="sub-title">(最多9张)</view>
          </view>
        </u-upload>
      </view>
      <view style="color: #d81e06; font-size: 26rpx;"
        >为了帮您更好的解决问题，请务必上传照片凭证</view
      >
    </view>
    <view class="apply" v-if="forms.Type==1">
      <view class="title">
        <view class="left">退款方式</view>
        <view class="right active">原支付返回</view>
      </view>
    </view>
    <view class="apply">
      <view class="title">
        <view class="left">返回方式</view>
        <view class="right active">快递返回</view>
      </view>
      <view class="tips" style="text-align: left;">
        <text
          >商品寄回地址将在审核通过后以客服通知的形式告知，或者申请记录中查询。商铺不收取快递附加费。</text
        >
      </view>
    </view>
   <!-- <view class="apply">
      <view class="user">
        <view
          class="user-item"
          style="padding-bottom: 40rpx; border-bottom: 2rpx solid #f5f5f5;"
        >
		
          <view class="icon">
            <u-icon name="user-circle-o" size="32" color="#000"></u-icon>
          </view>
          <view>{{ good.order.name }}</view>
        </view>
        <view class="user-item" style="padding-top: 40rpx;">
          <view class="icon">
            <u-icon name="phone-circle-o" size="32" color="#000"></u-icon>
          </view>
          <view>{{ good.order.mobile }}</view>
        </view>
      </view>
    </view> -->
    <view class="tips">
      <text>提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</text>
    </view>
    <view style="margin: 0 40rpx 40rpx 40rpx;">
      <u-button
        @click="submitHandler"
        :ripple="true"
        :hair-line="false"
        :custom-style="btn2"
      >
        <u-loading mode="circle" v-if="submitStatus"></u-loading>
        <text v-if="submitStatus" style="margin-left: 20rpx;">提交中</text>
        <text v-if="!submitStatus">提 交</text>
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      chosenId: 0,
      good: {},
      loading: false,
      forms: {
        OrderDetialId: 0,
        Type: 1,
		ReNumber:1,
        VoucherList: [],
        Refund: 0,
        Remark: "",
      },
      submitStatus: false,
      fileList: [],
      btn2: {
        flex: 1,
        height: "100%",
        borderRadius: "40px",
        border: "none",
        color: "#FFF",
        fontSize: "13px",
        width: "100%",
      },
      action:this.host2+'/api/File/UploadTencent',
    };
  },
  onLoad(option) {
    console.log("jump in");
    uni.showNavigationBarLoading();
    this.id = option.id || 98180;
    this.forms.Type = option.type || 1;
    this.forms.OrderDetialId = this.id;
    // this.chosenId = option.chosenId;
    uni.setNavigationBarTitle({
      title: option.type==1?"退货":'换货',
    });
    this.btn2.background = this.$uiConfig.mainColor;
    this.init();
  },
  methods: {
    init() {
      this.request2(
		{
			url: '/api/AppletOrder/GetAppletMyOrderAfterSaleInfo',
			data: {
				OrderDetailId: this.id
			},
		},
        (res) => {
          this.good = res.data;
		  this.forms.ReNumber = res.data.Number;
		  
          if (this.forms.Type == 1) {
            this.forms.Refund = res.data.Final_Price;
          }
          this.loading = false;
          uni.hideNavigationBarLoading();
        }
      );
    },
	inputnum(val){
		let that = this
		let totelPrice = that.good.Final_Price 
		if(val.target.value>totelPrice){
			
			that.forms.Refund= totelPrice
		}
		
	},
    inputremarkHandler(e) {
      this.forms.Remark = e.detail.value;
    },
    uploadSuccessHandler(data, index, lists) {
      console.log(JSON.parse(data));
      let r = JSON.parse(data);
      this.forms.VoucherList.push(r.data);
    },
	valChange(val){
		this.forms.ReNumber = Number(val.value) ;
	},
    submitHandler() {
      let that = this;
      uni.requestSubscribeMessage({
        tmplIds: that.good.template_message_list,
        complete(res) {
          if (!that.submitStatus) {
            that.submitStatus = true;
            let msg = "";
			
            if (that.forms.Remark == "") {
              msg = "亲，请描述一下你遇到的问题吧";
            } else if(that.forms.Refund<0){
				msg = "亲，退款金额为正数";
			}else if (that.forms.VoucherList.length == 0) {
              msg = "亲，请上传一张说明截图吧";
            }
            if (msg == "") {
          
              that.request2(
                {
                	url: '/api/AppletOrder/SetAppletMyOrderAfterSale',
                	data: that.forms
                },
                (res) => {
                  
                  if (res.resultCode == 1) {
                    uni.showModal({
                      content: "提交售后申请成功，稍后客服专员将与您取得联系。",
                      showCancel: false,
                      confirmText: "查看记录",
                      success: function (res) {
                        if (res.confirm) {
                          uni.reLaunch({
                            url: "/pages/order/after-sale/refunds-list",
                          });
                        }
                        that.submitStatus = false;
                      },
                    });
                  } else {
                    that.submitStatus = false;
                    that.$refs.uTips.show({
                      title: res.msg,
                      type: "error",
                      duration: "2300",
                    });
                  }
                }
              );
            } else {
              that.submitStatus = false;
              that.$refs.uTips.show({
                title: msg,
                type: "error",
                duration: "2300",
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style>
.refunds {
  background: #f5f5f5;
}
.refunds .tips {
  margin: 40rpx 0;
  text-align: center;
  color: gray;
  font-size: 12px;
}
.refunds .goods {
  display: flex;
  padding: 20px;
  background: #fff;
}
.refunds .goods .image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin-right: 40rpx;
}
.refunds .goods .good-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.refunds .goods .good-info .name-box {
  flex: 1;
  height: 1rpx;
  color: gray;
  font-size: 26rpx;
}
.refunds .goods .good-info .name-box .name {
  height: 70rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}
.refunds .goods .good-info .price {
  height: 32rpx;
  color: gray;
  font-size: 26rpx;
}
.refunds .head {
  padding-bottom: 20rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  background: #fff;
}
.refunds .head .num-box {
  padding: 20px;
  border-top: 2rpx solid #f5f5f5;
  display: flex;
  align-items: center;
}
.refunds .head .num-box .left {
  font-size: 32rpx;
  color: #000;
  width: 1rpx;
  flex: 1;
  font-weight: 600;
}
.refunds .head .num-box .right {
  margin-left: 10rpx;
}
.refunds .apply {
  margin: 40rpx 20rpx 0 20rpx;
  padding: 40rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
}
.refunds .apply .title {
  display: flex;
  align-items: center;
}
.refunds .apply .title .left {
  flex: 1;
  width: 1rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: gray;
}
.refunds .apply .title .right {
  color: gray;
  text-align: right;
  font-size: 26rpx;
}
.refunds .apply .title .right.active {
  color: #111;
  text-align: right;
  font-size: 32rpx;
  font-weight: 600;
}
.refunds .apply .tips {
  margin-top: 20rpx;
  font-size: 12px;
  color: gray;
}
.refunds .apply .content {
  margin: 40rpx 0 40rpx 0;
  position: relative;
  overflow: hidden;
background: #f5f5f5;
}
.refunds .apply .content .maxnum {
  font-size: 24rpx;
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  color: gray;
}
.refunds .apply .content textarea {
  height: 140rpx;
  
  padding: 15px 15px;
  font-size: 26rpx;
  color: #000;
  line-height: 1.5;
  border-radius: 6rpx;
  
}
.refunds .apply .upload {
  margin-bottom: 20rpx;
}
.refunds .apply .user {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.refunds .apply .user .user-item {
  display: flex;
  align-items: center;
}
.refunds .apply .user .user-item .icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}
.slot-btn {
  width: 140rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}
.slot-btn .mian-title {
  font-size: 28rpx;
  color: #888;
  font-weight: 600;
  margin: 10rpx 0;
}
.slot-btn .sub-title {
  color: #999;
  font-size: 26rpx;
  font-family: "microsoft yahei" !important;
}
.refunds .apply .item {
  padding: 40rpx 0;
  border-bottom: 2rpx solid #eee;
  display: flex;
  align-items: center;
}
/* .refunds .apply .item .image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 30rpx;
}
.refunds .apply .item .name {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  flex: 1;
  width: 1rpx;
}
.refunds .apply .item .tips {
  font-size: 26rpx;
  flex: 1;
  width: 1rpx;
  color: gray;
  text-align: right;
}
.refunds .apply .item .arrow {
  width: 32rpx;
  height: 32rpx;
  margin-left: 24rpx;
} */
</style>
