<template>
  <view class="refundsDetails" v-if="!loading">
    <u-top-tips ref="uTips"></u-top-tips>
    <view class="head" :style="[headStyle]">
      <view class="detail">
        <view class="status">{{
          d.ReOrderStatusName
        }}</view>
        <view style="margin: 0 -40rpx;" v-if="d.ReOrderStatus!=6">
          <u-steps
            :list="d.Type==1?statusList:statusHuanList"	
            :current="currentStatus"
            active-color="#FFF"
            un-active-color="#eee"
            :dot-color="mc"
          ></u-steps>
        </view>
        <!-- <view style="height:45px" v-if="d.ReOrderStatus==3">&nbsp;</view> -->
      </view>
    </view>
    <view class="block shenhe">
      <view class="title" v-if="d.ReOrderStatus == 1">商家正在审核</view>
      <view class="title" v-if="d.ReOrderStatus == 2">商家审核通过</view>
	  <view class="title" v-if="d.ReOrderStatus == 3">待卖家收货</view>
	  <view class="title" v-if="d.ReOrderStatus == 4">待卖家退款</view>
	  <view class="title" v-if="d.ReOrderStatus == 5">已完成</view>
      <view class="title" v-if="d.ReOrderStatus == 6">商家拒绝退货</view>
      <view class="content" v-if="d.ReOrderStatus == 1"
        >商家已经收到了您的申请，会尽快和您取得联系，处理本次申请，请您耐心等待</view
      >
      <view class="content" v-else-if="d.ReOrderStatus == 2">
        尊敬的客户，让您久等了，很抱歉出现了让您不满意的情况，我们将配合您尽快完成本次售后申请
      </view>
	  <view v-if="d.ReOrderStatus == 5 || d.Type==1" class="marginT">申请退款金额:{{d.Refund}}元</view>
	  <view v-if="d.ReOrderStatus == 5 || d.Type==1" class="marginT">实退金额:{{d.Refund}}元</view>
	  <view v-if="d.ReOrderStatus == 5 && d.Type==1" class="marginT">退款方式:原路退回</view>
	  <view v-if="d.ReOrderStatus == 5 && d.Type==1" class="marginT">退款时间:{{d.FinishTime}}</view>
	  
	  <!-- TODO字段没有 -->
      <!-- <view class="content" v-else>
        审核留言：{{d.Remark}}
      </view> -->
    </view>
    <view
      style="margin-top: 40rpx;"
      class="block"
      v-if="d.ReOrderStatus=='3' || d.ReOrderStatus=='4'|| d.ReOrderStatus=='5'"
    >
      <view class="good-title">{{d.ReOrderStatus==3?'退货物流':'换货物流'}} </view>
      <view class="filed">
        <view class="key">快递公司</view>
        <view class="val">
          {{d.ReOrderStatus==3?  d.TExpressList[0].ExpressName: d.HExpressList[0].ExpressName }}
        </view>
      </view>
      <view class="filed">
        <view class="key">快递单号</view>
        <view class="val">
          {{d.ReOrderStatus==3?  d.TExpressList[0].ExpressNumber: d.HExpressList[0].ExpressNumber }}
        </view>
      </view>
      <view class="filed">
        <view class="key">快递类型</view>
        <view class="val" style="color:#c0392b">
          {{d.ReOrderStatus==3? (d.TExpressList[0].Type==1?'快递':"其他") : (d.HExpressList[0].Type==1?'快递':"其他") }}
        </view>
      </view>
    </view>
    <view style="margin-top: 40rpx; padding-bottom: 16rpx;" class="block">
      <view class="good-title">商品信息</view>
      <view class="good-info" @click="reditrectToGoodHandler(d.OrderInfo.GoodsId)">
        <image
          :src="d.OrderInfo.CoverImagePath"
          class="img"
          mode="aspectFill"
        />
        <view class="detail">
          <view class="name-box">
            <view class="name">{{ d.OrderInfo.GoodsName }}</view>
          </view>
          <view>
            <!-- <text>单价：</text> -->
			<text>总价：</text>
            <text style="font-size: 30rpx; color: #000; margin-right: 40rpx;"
              >￥{{ d.OrderInfo.Final_Price }}</text
            >
            <text>数量：</text>
            <text style="font-size: 30rpx; color: #000; margin-right: 40rpx;"
              >￥{{ d.OrderInfo.Number }}</text
            >
          </view>
        </view>	
      </view>
      <view class="customer">
        <button
          open-type="contact"
          :send-message-title="d.OrderInfo.GoodsName"
          :send-message-path="'/pages/index/index?id=' + d.OrderInfo.GoodsId + '&user_id=' + uid+'&JumpType=1'"
          :send-message-img="d.OrderInfo.CoverImagePath"
          :show-message-card="true"
        >
          <u-icon
            style="display: inline-block; vertical-align: middle;"
            size="36"
            color="#111"
            name="chat-o"
          ></u-icon>
          <text style="margin-left: 10rpx;">联系客服</text>
        </button>
      </view>
    </view>
    <view style="margin-top: 40rpx;" class="block">
      <view class="good-title">申诉原因</view>
      <view class="reason">{{ d.Remark }}</view>
      <view class="grid-reasion">
        <image
          v-for="(x, i) in d.VoucherList"
          :key="i"
          :src="x"
          class="img"
          @click="previewImage(i, d.VoucherList)"
          mode="aspectFill"
        />
      </view>
    </view>
    <view style="margin-top: 40rpx;" class="block">
      <view class="filed center">
        <view class="key">服务单号</view>
        <view class="val" style="font-size: 24rpx;">{{ d.ReOrderNo }}</view>
        <view class="op">
          <u-button size="mini" shape="circle" @click="paste(d.ReOrderNo)"
            >复制</u-button
          >
        </view>
      </view>
      <view class="filed">
        <view class="key">申请时间</view>
        <view class="val">{{ d.CreateDate }}</view>
      </view>
      <view class="filed split">
        <view class="key">服务类型</view>
        <view class="val">{{ d.Type == 1 ? "退货" : "换货" }}</view>
      </view>
      <template v-if="d.ReOrderStatus == 2">
        <view class="filed">
          <view class="key">商品退回</view>
          <view class="val">快递返回</view>
        </view>
        <view class="filed">
          <view class="key">收件地址</view>
          <view class="val">{{RecipientInfo.DistrictAddress }}{{RecipientInfo.Address}}</view>
        </view>
        <view class="filed">
          <view class="key">收件人</view>
          <view class="val">{{ RecipientInfo.Name }}</view>
        </view>
        <view class="filed">
          <view class="key">联系电话</view>
          <view class="val">{{ RecipientInfo.Mobile  }}</view>
        </view>
        <view class="filed">
          <view class="key">快递备注</view>
          <view class="val">{{ RecipientInfo.Remarks  }}</view>
        </view>
      </template>
    </view>
    <view
      style="margin-top: 40rpx;"
      class="block"
      v-if="d.ReOrderStatus == 2 && (!d.express || d.express == '')"
    >
      <view class="good-title">商品寄回</view>
      <view class="filed">
        <view class="key">快递公司</view>
        <view class="val" @click="showExpressHandler">
          <text
            v-if="forms.ExpressId == -1"
            style="font-size: 13px; color: gray;"
            >请选择快递公司</text
          >
          <text v-else>{{ forms.expressName }}</text>
          <u-picker
            mode="selector"
            v-model="showExpress"
            :default-selector="[0]"
            :range="expressList"
            range-key="Name"
            :safe-area-inset-bottom="true"
            @confirm="chosenExpressHandler"
          ></u-picker>
        </view>
      </view>
      <view class="filed">
        <view class="key">快递单号</view>
        <view class="val">
          <input
            type="text"
            v-model="forms.ExpressNumber"
            placeholder="请输入快递单号"
          />
        </view>
      </view>
      <view class="filed">
        <view class="val">
          <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>
    </view>
    <view
      style="margin-top: 40rpx;"
      class="block"
      v-if="d.ReOrderStatus == 2 && d.express && d.express != ''"
    >
      <view class="good-title">商品寄回</view>
      <view class="filed">
        <view class="key">快递公司</view>
        <view class="val">
          {{ d.express }}
        </view>
      </view>
      <view class="filed">
        <view class="key">快递单号</view>
        <view class="val">
          {{ d.express_no }}
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      mc: "",
      secondary: "",
      headStyle: {},
      statusList: [
        {
          name: "申请售后",
        },
        {
          name: "同意受理",
        },
        {
          name: "回寄商品",
        },
        {
          name: "商家收货",
        },
        {
          name: "退款",
        },
      ],
      statusHuanList: [
        {
          name: "申请售后",
        },
        {
          name: "同意受理",
        },
        {
          name: "回寄商品",
        },
        {
          name: "商家换货",
        }
      ],
      d: {},
      loading: true,
      path: "",
      btn2: {
        flex: 1,
        height: "100%",
        borderRadius: "40px",
        border: "none",
        color: "#FFF",
        fontSize: "13px",
        width: "100%",
      },
      submitStatus: false,
      expressList: [],
      showExpress: false,
	  RecipientInfo:{},
      forms: {
		  ReOrderId:-1,
        ExpressId: -1,
        ExpressNumber: "",
        expressName: "",
      },
      currentStatus: 0,
	  uid:0,
    };
  },
  onLoad(option) {
    this.id = option.id || 834;
    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
    this.btn2.background = this.$uiConfig.mainColor;
    let p = getCurrentPages();
    if (p.length > 1) {
      this.prevPage = p[p.length - 2].rou;
    }
    this.init();
    let t = getCurrentPages();
	let u = uni.getStorageSync("mall_UserInfo");
    this.uid = u.UserId ? u.UserId : 0;
    
    uni.setNavigationBarTitle({
      title: "售后详情",
    });
  },
  methods: {
    reditrectToGoodHandler(id){
      uni.navigateTo({
         url: '/pages/goods/goods?id='+id
      });
    },
    paste(value) {
      uni.setClipboardData({
        data: value,
      });
      // uni.showToast({
      //   title: "复制售后服务单号成功",
      //   position: "bottom",
      //   icon: "none",
      //   duration: 2000,
      // });
    },
    submitHandler() {
      let that = this;
      that.submitStatus = true;
      uni.requestSubscribeMessage({
        tmplIds: that.d.template_message_list,
        complete(res) {
          let msg = "";
		  
          if (that.forms.ExpressId == -1) {
            msg = "请选择快递公司";
          } else if (that.forms.ExpressNumber == "") {
            msg = "请输入快递单号";
          }
          if (msg == "") {
            
            that.request2(
              {
				url: '/api/AppletOrder/SetAppletOrderSendGoods',
				data: that.forms
              },
              (res) => {
                if (res.resultCode == 1) {
                  that.$refs.uTips.show({
                    title: "已提交快递信息，请等待商家签收",
                    type: "success",
                    duration: "2300",
                  });
                  that.init();
                } else {
                  that.$refs.uTips.show({
                    title: res.message,
                    type: "error",
                    duration: "2300",
                  });
                }
                that.submitStatus = false;
              }
            );
          } else {
            that.submitStatus = false;
            that.$refs.uTips.show({
              title: msg,
              type: "error",
              duration: "2300",
            });
          }
        },
      });
    },
    showExpressHandler() {
      this.showExpress = true;
    },
    chosenExpressHandler(i) {
      uni.hideLoading();
      this.forms.ExpressId = this.expressList[i].ID;
      this.forms.expressName = this.expressList[i].Name;
    },
    previewImage(i, images) {
      uni.previewImage({
        urls: images,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    init() {
      this.isover = false;
      
      this.request2(
		   {
			url: '/api/AppletOrder/GetAppletOrderAfterSaleInfo',
			data: {
				ReOrderId:this.id
			}
		   },
        (res) => {
          this.d = res.data;
          
          this.loading = false;
          this.currentStatus = this.d.ReOrderStatus - 1;
		  this.forms.ReOrderId = res.data.ReOrderId
		  
		  if(res.data.ReOrderStatus==2){
			  this.init2()
			  this.getExpressInfo();
		  }
		  
        
        }
      );
    },
	init2(){
		
		this.request2(
		   {
			url: '/api/AppletOrder/GetAppletOrderBuyerToDeliverInfo',
			data: {
				ReOrderId:this.id
			}
		   },
		  (res) => {
		    this.RecipientInfo = res.data.RecipientInfo;
		    
		  
		  }
		);
	},
	getExpressInfo(){
		this.request2(
				   {
					url: '/api/appletorder/GetExpressInfo',
					data: {}
				   },
		  (res) => {
		    this.expressList = res.data;
		  }
		);
	}
  },
};
</script>

<style>
.refundsDetails {
  min-height: 100vh;
  background: #f1f2f3;
  padding-bottom: 40rpx;
}
.refundsDetails .head {
  position: relative;
  width: 140vw;
  padding-right: 40vw;
}
.refundsDetails .head .detail {
  padding: 40rpx 70rpx 60rpx 50rpx;
}
.refundsDetails .head .detail .status {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 18rpx;
}

.refundsDetails .block {
  margin: 0rpx 20rpx;
  margin-top: 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
}
.refundsDetails .shenhe {
  margin-top: -40rpx;
  position: relative;
}
.refundsDetails .shenhe .title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.refundsDetails .shenhe .content {
  font-size: 24rpx;
  color: gray;
  line-height: 1.5;
}
.refundsDetails .good-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #111;
  margin-bottom: 40rpx;
}
.refundsDetails .good-info {
  display: flex;
  align-items: center;
}
.refundsDetails .good-info .img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
}
.refundsDetails .good-info .detail {
  width: 1rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  height: 140rpx;
  color: gray;
}
.refundsDetails .good-info .detail .name-box {
  height: 1rpx;
  flex: 1;
}
.refundsDetails .good-info .detail .name-box .name {
  font-size: 28rpx;
  max-height: 90rpx;
  overflow: hidden;
  word-break: break-all; /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis; /* 超出部分省略号 */
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
}
.refundsDetails .customer {
  padding-top: 30rpx;
  margin-top: 60rpx;
  border-top: 2rpx solid #f5f5f5;
}
.refundsDetails .customer button {
  width: 100%;
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.refundsDetails .customer button::after {
  border: none;
  outline: none;
}
.refundsDetails .reason {
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #222;
  line-height: 1.5;
  margin-bottom: 30rpx;
}
.refundsDetails .grid-reasion {
  display: flex;
  flex-wrap: wrap;
  margin-right: 20rpx;
}
.refundsDetails .grid-reasion .img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  margin-right: 20rpx;
}
.refundsDetails .filed {
  display: flex;
  align-items: flex-start;
  margin-bottom: 60rpx;
}
.refundsDetails .filed.center {
  align-items: center;
}
.refundsDetails .filed.split {
  padding-bottom: 60rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
.refundsDetails .filed .key {
  width: 128rpx;
  margin-right: 40rpx;
  font-size: 28rpx;
  color: gray;
}
.refundsDetails .filed .val {
  font-size: 28rpx;
  color: #333;
  font-family: microsoft yahei;
  flex: 1;
  width: 1rpx;
}
.refundsDetails .filed .op {
  margin-left: 20rpx;
}
.refundsDetails .filed .val input {
  width: 100%;
  font-size: 13px;
  color: #111;
  background: transparent;
  border: none;
  outline: none;
}
.refundsDetails .marginT{
	margin-top: 5px;
}
</style>
