<template>
  <scroll-view
    :scroll-y="true"
    @scroll="scrollHandler"
    @scrolltoupper="scrollTopHandler"
    style="height: 100vh;"
  >
    <view class="orderdetail" :style="[contentStyle]" v-if="!loading">
      <view
        class="headStatus"
        :style="[
          headStyle,
          {
            zIndex: scrollTop < 10 ? 'unset' : 2,
            opacity: scrollTop < 10 ? '100' : scrollTop,
          },
        ]"
      >
        <view class="arrow" @click="redirectPrev">
          <u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
        </view>
        <view class="title" v-if="scrollTop > 50">订单详情</view>
      </view>
      <view class="status" :style="[headStyle]">
        <view class="status-title">{{ orders.OrderStatusName }}</view>
        <view class="sub-title" 
			v-if='orders.OrderStatus==1 || orders.OrderStatus==2 ||orders.OrderStatus==3||orders.OrderStatus==4 '
		>
          <u-icon
            style="display: inline-block; vertical-align: middle;"
            name="warning-o"
            color="#FFF"
            size="28"
          ></u-icon>
		  <!-- TODO返回字段 不能写死 -->
          <text style="margin-left: 5px;">交易成功{{delivery_time}}天，系统自动确认完成</text>
          <!-- TODO 交易情况说明 -->
        </view>
      </view>
      <view class="block address">
        <view class="icon">
          <u-icon name="location-o" color="#111" size="40"></u-icon>
        </view>
        <view class="content">
          <view class="concat">
            <text style="font-weight: 700; margin-right: 20px;">{{
              orders.Consignee
            }}</text>
            <text>{{ orders.Mobile }}</text>
          </view>
          <view class="address">{{ orders.DistrictAddress }}{{orders.ShoppingAddress}}</view>
        </view>
      </view>
      <view class="block goods">
        <view class="item" v-for="(x, i) in orders.DetailList" :key="i">
          <view style="display: flex;">
            <image
              :src="x.CoverImagePath"
              class="img"
              @click="redirectGoods(x.GoodsId)"
              mode="aspectFill"
            />
            <view class="good-info">
              <view class="good-name" @click="redirectGoods(x.GoodsId)">{{
                x.GoodsName
              }}</view>
              <view class="good-attr">
                <text>数量:{{ x.Number }}</text>
                <text
                  v-for="(y, yi) in x.SpecificationList"
                  :key="yi"
                  style="margin-right: 5px;"
                >
                  {{y}}
                </text>
              </view>
			  <view style="
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    margin-top: 2px;
			  "
			  @click.native.stop="goUrl(x.FreeShippingUrl)"
			  v-if="x.FreeShippingRemarks !=null && x.FreeShippingRemarks!='' "
			  								>
			  				<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;">
			  					<Text style="
			  					  font-size: 20rpx;
			  					  margin-right: 5rpx;
			  					">
			  						{{x.FreeShippingRemarks}}
			  					</Text>		
			  				</view>
			  </view>
              <view class="good-price">￥{{ x.Final_Price }}</view>
            </view>
          </view>
          <template v-for="(e, ei) in expressInfo">
            <view :key="ei" class="order-info-item peisong" v-for="(ec, eci) in e.GoodsList" v-if=" ec.Id == x.DetailId">
              <template >
                <view
                  class="field"
                  :key="eci"
                  v-if="e.Type == '2' && ec.Id == x.DetailId"
                >
                  <view class="label">配送方式</view>
                  <view class="content">{{ e.Remark }}</view>
                </view>
				
                <view
                  class="field"
                  :key="eci"
                  @click="goExpressHandler(e.ExpressName, e.ExpressNumber,e.ExpressId)"
                  v-if="e.Type == '1' && ec.Id == x.DetailId"
                >
                  <view class="label">配送方式</view>
                  <view class="content"
                    >{{ e.ExpressName }} {{ e.ExpressNumber }}</view
                  >
                  <view style="margin-left: 10px;">
                    <u-icon name="arrow" size="32" color="#000"></u-icon>
                  </view>
                </view>
              </template>
            </view>
          </template>
          <view
            style="
              margin-top: 20px;
              display: flex;
              flex-direction: row-reverse;
              align-items: center;
            "
          >
            <u-button
              shape="circle"
              size="medium"
              :custom-style="customStyle"
              @click="joinCart(x)"
              >加购物车</u-button
            >
            <view
              v-if="x.refund_status == 1"
              style="margin-right: 40rpx; font-size: 28rpx; color: gray;"
            >
              已申请售后（{{ x.refund.status_text }}）
            </view>
          </view>
		  <view class="customer">
		    <button
		      open-type="contact"
		      :send-message-title="x.GoodsName"
		      :send-message-path="'/pages/index/index?id=' + x.GoodsId + '&user_id=' + uid+'&JumpType=1'"
		      :send-message-img=" x.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>
      <view class="block">
        <view class="order-info-item">
          <view class="field">
            <view class="label">订单编号：</view>
            <view class="content">{{ orders.OrderNo }}</view>
			<view style='margin-left: 20px;'>
			  <u-button size="mini" shape="circle" @click="paste(orders.OrderNo)"
			    >复制</u-button
			  >
			</view>
          </view>
          <view class="field">
            <view class="label">下单时间：</view>
            <view class="content">{{ orders.CreateDate }}</view>
          </view>
		  <view class="field">
		    <view class="label">备注：</view>
		    <view class="content">{{ orders.BuyerMessage }}</view>
		  </view>
        </view>
        <view class="order-info-item">
          <view class="field">
            <view class="label">支付方式：</view>
            <view class="content">{{ orders.PaymentWayName }}</view>
          </view>
          <!-- <view class="field">
            <view class="label">支付时间：</view>
            <view class="content">{{ orders.pay_time }}</view>
          </view> -->
        </view>
       <!-- <view class="order-info-item" >
          <view class="field" >	
            <view class="label">配送方式：</view>
            <view class="content">{{orders.DeliveryMethodName}}</view>
          </view>
        </view> -->
      </view>
      <view class="block">
        <view class="order-info-item">
          <view class="field">
            <view class="label">商品总额</view>
            <view class="content right">￥{{ orders.PreferPrice }}</view>
          </view>
          <view class="field">
            <view class="label">运费</view>
            <view class="content right">+￥{{ orders.FreightMoney }}</view>
          </view>
          <view class="field">
            <view class="label">优惠</view>
            <view class="content right"
              >-￥{{ orders.CouponMoney	 }}</view
            >
          </view>
         <!-- <view class="field">
            <view class="label">积分抵扣</view>
            <view class="content right"
              >-￥{{ orders.integral_deduction_price }}</view
            >
          </view> -->
		  <view style="width: 100%;height: 1px;background: #f5f5f5;margin: 5px 0;"></view>
          <view class="field">
            <view class="label">&nbsp;</view>
            <view class="content right">
              <text style="margin-right: 10px;">实付款：</text>
              <text
                style="font-size: 11px; font-weight: 700;"
                :style="{ color: mc }"
                >￥</text
              >
              <text style="font-size: 17px;" :style="{ color: mc }">{{
				String(orders.Income).split(".")[0]
              }}</text>
              <text style="font-size: 12px;" :style="{ color: mc }"
                >.{{String(orders.Income).split(".")[1] || "00" }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">
        <view style="display: flex;">
          <u-icon name="like" size="20px" :color="mc"></u-icon>
          <text style="margin-left: 5px;">为你推荐</text>
        </view>
      </u-divider>
      <view style="padding: 12px;" v-if="recommend.length > 0">
        <goodlist :list="recommend"></goodlist>
      </view>
      <view class="btn-box" v-if="orders.OrderStatus != '5'&&isShowBtn">
        <view class="item" v-if="orders.OrderStatus == '3'">
          <u-button
            shape="circle"
            size="medium"
            @click="shouhuoHandler"
            :custom-style="themCustomStyle"
            >确认收货</u-button
          >
        </view>
        <view class="item" v-if="orders.OrderStatus == '1'">
          <u-button shape="circle" size="medium" :custom-style="themCustomStyle"
		  v-on:click.stop="payment(orders)"
            >立即支付</u-button
          >
        </view>
        <view class="item" v-if="orders.OrderStatus == '3'&& orders.PresentFXGrade!=1">
          <u-button
            shape="circle"
            size="medium"
            :custom-style="customStyle"
            @click="openAfterHandler"
            >申请售后</u-button
          >
        </view>
        <view
          class="item"
          v-if="orders.OrderStatus == '1' || (orders.OrderStatus == '2' && orders.PresentFXGrade!=1)"
        >
          <u-button
            shape="circle"
            size="medium"
            :custom-style="customStyle"
            @click="cancel"
            >取消订单</u-button
          >
        </view>
        <view
          class="item"
          style="line-height: 34px;"
          v-if="orders.OrderStatus == 6"
        >
          待处理
        </view>
        <view
          class="item"
          style="
            line-height: 34px;
            font-size: 16px;
            color: gray;
            font-weight: 600;
          "
          v-if="orders.OrderStatus == 7"
        >
          已取消
        </view>
      </view>
      <after-sale
        :list="orders.DetailList"
        v-if="showAfter"
        @close="closeAfterHandler"
      ></after-sale>
    </view>
  <!--  <u-modal
      v-model="showModal"
      content="是否取消订单？"
      :show-cancel-button="true"
      :show-title="false"
      @confirm="confirm"
      :border-radius="20"
    ></u-modal> -->
	
	<u-popup v-model="showModal"
				mode="center"
				length="80%">
			<view style='display: flex;flex-direction: column;align-items: center;background: #fff;'>
				<view style="display: flex;align-items: center;justify-content: center;height:70px ;">
					<Text>是否取消订单？</Text>
				</view>
				<view  style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;" v-if='orders.OrderStatus==2'>
					<Text style='margin-left: 10px;margin-top: 5px;'>备注</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="Cancelmsg.Remark" placeholder="输入备注"/>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
					 <view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
						 <Text>取消</Text>
					 </view>
					 <view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="confirm">
					 	<Text>确定</Text>
					 </view>
				</view>
			</view>
		</u-popup>
    <u-modal
      v-model="showReviceModal"
      content="是否确认收货？"
      :show-cancel-button="true"
      :show-title="false"
      @confirm="submitReviceGoodHandler"
      :border-radius="20"
    ></u-modal>
    <u-toast ref="uToast" />
	<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
	<u-popup v-model="payExit" mode="center" :mask-close-able="false">
		<view style="background:#fff;width:500rpx">
			<view style="padding:10px 0 0 10px">提交失败</view>
			<view style="text-align:center;padding-bottom:40rpx">
				<view style="margin:80rpx 0">支付取消</view>
				<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
			</view>
		</view>
	</u-popup>
  </scroll-view>
</template>

<script>
	import payCom from '@/components/pay/pay';
import afterSale from "@/components/userorder/after-sale";
import goodlist from "@/components/goods/list";
export default {
  components: {
    afterSale,
    goodlist,
	payCom
  },
  data() {
    return {
      mc: "",
      secondary: "",
      headStyle: {},
      contentStyle: {},
      orders: {},
      loading: true,
      showReviceModal: false,
      id: 0,
	  payBtn:false,
	  payExit:false,
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
	  path: "",
      scrollTop: 0,
      recommend: [],
      prevPage: "",
      themCustomStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
        color: "#FFF",
      },
	  expressInfo:[],
	  Cancelmsg:{
	  		  OrderId:0,
	  		  Type:1,
	  		  Remark:'',
	  },
	  payInfo: {
	  	OpenId: '',
	  	OrderId: '',
	  	OrderPayType: 1,
	  	GoodsName: ''
	  },
      showAfter: false,
      showModal: false,
	  delivery_time:14,//时间
	  uid:0,
	  NewUserId:0, //zk新增
	  isShowBtn:true,
    };
  },
  onLoad(option) {
    this.id = option.id || 63702;
	//zk新增
	if(option.NewUserId){
		this.NewUserId = option.NewUserId;
		this.isShowBtn=false;
	}
    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
    let nav = uni.getMenuButtonBoundingClientRect();
    this.headStyle.paddingTop = nav.top + "px";
    this.contentStyle.paddingTop = nav.top + 44 + "px";
	this.delivery_time = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.delivery_time : 14;
    let p = getCurrentPages();
	let u = uni.getStorageSync("mall_UserInfo");
	this.uid = u.UserId ? u.UserId : 0;
	
    if (p.length > 1) {
      this.prevPage = p[p.length - 2].route;
	  
    }
    this.themCustomStyle.background = this.mc;
    this.init();
  },
  methods: {
    shouhuoHandler() {
      this.showReviceModal = true;
    },

	goExpressHandler(express, no,id) {
	  uni.navigateTo({	
	    url:
	      "/pages/order/express?express=" +
	      express +
	      "&no=" +
	      no +
	      "&address=" +
	      this.orders.DistrictAddress+this.orders.ShoppingAddress +
	      "&id=" +id,
	  });
	},
    submitReviceGoodHandler() {
     let that = this
     // uni.requestSubscribeMessage({
     //   tmplIds: that.orders.template_message_list,
     //   complete(res) {   
         that.request2(
           {
           	url: '/api/AppletOrder/SetAppletOrderGoodsReceiving',
           	data: {
     					OrderId: that.orders.OrderId
     				}
           },
           (res) => {
     			  uni.showToast({
     			  	title:res.message
     			  })
				that.init()
           }
         );
     //   },
     // });
    },
    cancel() {
      this.showModal = true;
	  this.Cancelmsg.OrderId = this.orders.OrderId;
	  this.Cancelmsg.Type = this.orders.OrderStatus;
	  this.Cancelmsg.Remark = ''
    },
    confirm() {
		let that = this
      // that.showModal = false;
	  if(that.Cancelmsg.Type==2 && that.Cancelmsg.Remark==''){
	  		  uni.showToast({
	  			  title:'备注不能为空',
	  			  icon:'none'
	  		  })
	  		  return 
	  }
	  let pages = getCurrentPages(); // 当前页面
		uni.requestSubscribeMessage({//订阅消息 退款和审核通知
		  tmplIds: that.orders.template_message_list,
		  complete (res) {
			  that.request2(
				{
					url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
					data: that.Cancelmsg
				},
				(res) => {
					that.showModal = false;
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					that.init();
					if (pages.length > 1) {//返回上一个页面
						var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
						  setTimeout(()=>{
							 uni.navigateBack({
								 success: function() {
									 beforePage.$vm.getOrderStatus(); 
								 }
							 });
						  },500)
					 } 
				}
			  );
		  }
		})
      
    },
    openAfterHandler() {
      this.showAfter = true;
    },
    closeAfterHandler() {
      this.showAfter = false;
    },
    init() {
     this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
      this.request2(
       {
       	url: '/api/AppletOrder/GetAppletMyOrderInfo',
       	data: {
			OrderId:this.id,
			NewUserId:this.NewUserId
		}
       },
        (res) => {
          this.orders = res.data;
          this.loading = false;
		 
          this.initRecommend();
		  this.getexpressInfo(res.data.OrderId)
        }
      );
    },
    formatAttr(attr) {
      let arr = JSON.parse(attr);
    },
    scrollHandler(e) {
      this.scrollTop = e.detail.scrollTop;
      //this.$forceUpdate();
    },
    scrollTopHandler() {
      this.scrollTop = 0;
    },
    initRecommend() {
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
          data: {
            RecommendType: 1,
          },
        },
        (res) => {
          this.recommend = res.data.List;
        }
      );
    },
	getexpressInfo(OrderId){
		this.request2(
		  {
		    url: "/api/AppletOrder/GetAppletMyOrderExpressInfo",
		    data: {
		      OrderId: OrderId,
		    },
		  },
		  (res) => {
			  
		    this.expressInfo = res.data;
		  }
		);
	},
    redirectGoods(id) {
      uni.navigateTo({
        url: "/pages/goods/goods?id=" + id,
      });
    },
    redirectPrev() {
		
      if (this.prevPage != "") {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
	payment(e){
		console.log(e.OrderId)
		this.payInfo.OrderId = e.OrderId;
		this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0,10);
		this.payInfo.PaymentWay = e.PaymentWay;	
		this.payInfo.total_price = e.Income;	
		this.payBtn=true
	},
	exitPay() {
		this.payExit = false;
		
	},
	closePay() {
		this.payBtn = false;
		this.payExit = true;
	},
    joinCart(x) {
		console.log(x)
      this.request2(
      	{
      		url: '/api/AppletOrder/SetGoodsShoppingCartInfo',
      		data: {
      			GoodsId: x.GoodsId,
      			SpecificationSort: '',
      			Number: x.Number
      		},
      	},
      	res => {
      		uni.showToast({
      			title: '加入购物车成功',
      			icon: 'success',
      			duration: 2000
      		});
      		
      	}
      );
    },
	paste(value) {
	  uni.setClipboardData({
	    data: value,
	  });
	  // uni.showToast({
	  //   title: "复制售后服务单号成功",
	  //   position: "bottom",
	  //   icon: "none",
	  //   duration: 2000,
	  // });
	},
  },
};
</script>

<style>
.orderdetail {
  overflow: hidden;
  background: #f3f4f6;
  padding-bottom: 50px;
}
.orderdetail .headStatus {
  overflow: hidden;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
}
.orderdetail .headStatus .arrow {
  height: 24px;
  margin: 5px 10px;
  width: 24px;
}
.orderdetail .headStatus .title {
  font-size: 18px;
  color: #fff;
  flex: 1;
  width: 1px;
  margin-left: 10px;
  line-height: 34px;
}
.orderdetail .status {
  padding-bottom: 25px;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-top: 0 !important;
}
.orderdetail .status .status-title {
  text-align: center;
  font-size: 22px;
  color: #fff;
  margin-top: -18px;
}
.orderdetail .status .sub-title {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-weight: 300;
}
.orderdetail .block {
  background: #fff;
  border-radius: 10px;
  margin-top: -10px;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
  margin-bottom: 20px;
}
.orderdetail .address {
  display: flex;
  margin-bottom: 20px;
}
.orderdetail .address .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.orderdetail .address .content {
  flex: 1;
}
.orderdetail .address .content .concat {
  font-size: 14px;
  color: #000;
}
.orderdetail .address .content .address {
  font-size: 13px;
  margin-top: 10px;
  color: gray;
}
.orderdetail .goods {
  /* display: flex; */
}
.orderdetail .goods .item {
  margin-bottom: 20px;
  /* display: flex; */
}
.orderdetail .goods .item:last-child {
  margin-bottom: 0;
}
.orderdetail .goods .item .img {
  width: 80px;
  height: 80px;
  border-radius: 2px;
}
.orderdetail .goods .item .good-info {
  margin-left: 15px;
  flex: 1;
  flex-direction: column;
  width: 1px;
  display: flex;
}
.orderdetail .goods .item .good-info .good-name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 24px;
}
.orderdetail .goods .item .good-info .good-attr {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: gray;
  
  display: flex;
  flex-direction: column;
}
.orderdetail .goods .item .good-info .good-price {
  font-size: 16px;
  height: 20px;
}
.orderdetail .order-info-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}
.orderdetail .order-info-item:last-child {
  border-bottom: none;
}
.orderdetail .order-info-item .field {
  margin-bottom: 10px;
  display: flex;
}
.orderdetail .order-info-item.peisong {
  border: none;
  background: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 15px 0 5px 0;
  overflow: hidden;
}
.orderdetail .order-info-item .field:last-child {
  margin-bottom: 0;
}
.orderdetail .order-info-item .field .label {
  width: 80px;
  margin-right: 20px;
  color: gray;
}
.orderdetail .order-info-item .field .content {
  flex: 1;
  width: 1px;
  color: #000;
}
.orderdetail .order-info-item .field .content.right {
  text-align: right;
}
.orderdetail .btn-box {
  display: flex;
  flex-direction: row-reverse;
  height: 45px;
  padding: 5px 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-top: 1px solid #f5f5f5;
  background: #fff;
}
.orderdetail .btn-box .item {
  /* margin-left: 20px; */
}
.orderdetail .customer {
  padding-top: 20rpx;
  margin-top: 20rpx;
  border-top: 2rpx solid #f5f5f5;
  border-bottom: 2rpx solid #f5f5f5;
}
.orderdetail .customer button {
  width: 100%;
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.orderdetail .customer button::after {
  border: none;
  outline: none;
}
</style>
