<template>
  <view
    class="orderindexStyle"
    :style="{
      height: contentHeight,
    }"
  >
    <view style="padding: 10px 0; background: #fff;">
      <u-tabs
        :list="list"
        :current="current"
		name="Name"
        @change="change"
        :active-color="mainColor"
        bg-color="#FFF"
        height="80"
      ></u-tabs>
    </view>
    <view
      style="height: calc(100vh - 50px); background: #fff;"
      v-if="g.length == 0"
    >
      <u-empty text="暂无相关订单" mode="order"></u-empty>
    </view>

    <view
      v-if="g.length > 0"
      style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
        padding-bottom: 20px;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <view class="orderList">
          <view class="listBox" v-for="(item, index) in g" :key="index">
            <view class="listBox_t" @click="redirectToDetail(item.OrderId)">
              <Text>订单号：{{ item.OrderNo }}</Text>
              <Text style="color: gray;">{{ item.OrderStatusName }}</Text>
            </view>
            <view class="listBox_c">
              <template v-if="item.DetailList.length == 1">
                <view
                  v-for="(cx, ci) in item.DetailList"
                  :key="ci"
                  class="box_bottom"
                  @click="redirectToDetail(item.OrderId)"
                >
                  <image
                    :src="cx.CoverImagePath"
                    style="width: 80px; height: 80px; border-radius: 2px;"
                    mode="aspectFill"
                  />
                  <view style="margin-left: 15px; flex: 1;">
                    <Text class="topic_cont_text">{{
                      cx.GoodsName
                    }}</Text>
                  </view>
                  <view style="margin-left: 15px;">
                    <text style="font-size: 10px;">￥</text>
                    <text style="font-size: 17px;">{{
                      cx.Final_Price.toString().split(".")[0]
                    }}</text>
                    <text style="font-size: 11px;"
                      >.{{
                        cx.Final_Price.toString().split(".")[1] || "00"
                      }}</text
                    >
                  </view>
                </view>
              </template>
              <template v-else>
                <view class="goodboxmore" @click="redirectToDetail(item.OrderId)">
                  <view class="good-list">
                    <view style="white-space: nowrap;">
                      <image
                        v-for="(y, yi) in item.DetailList"
                        :key="yi"
                        :src="y.CoverImagePath"
                        mode="aspectFill"
                        class="item"
                      />
                    </view>
                  </view>
                  <view class="infos" @click.stop="showGoodListHandler(index)">
                    <view>
                      <text style="font-size: 10px;">￥</text>
                      <text style="font-size: 17px;">{{
                        item.Income.toString().split(".")[0]
                      }}</text>
                      <text style="font-size: 11px;"
                        >.{{
                          item.Income.toString().split(".")[1] || "00"
                        }}</text
                      >
                    </view>
                    <view class="text">共{{ item.DetailList.length }}件</view>
                  </view>
                </view>
              </template>
				<view style="width: 100%;text-align: right;">
					<Text>应付金额：</Text>
					<text style="font-size: 10px;">￥</text>
					<text style="font-size: 17px;">{{
					  item.Income.toString().split(".")[0]
					}}</text>
					<text style="font-size: 11px;"
					  >.{{
					    item.Income.toString().split(".")[1] || "00"
					  }}</text
					>
				</view>
              <!-- TODO 样式结构修改-->
              <view class="handle">
                <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="customStyle"
                  v-on:click.stop="cancel(item, index)"
                  v-if="
                    item.OrderStatus == '1' || item.OrderStatus == '2'
                  "
                  >取消订单</u-button
                >
                <!-- <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="customStyle"
                  @click.stop="cancel(item, index)"
                  v-if="item.OrderStatusName == '待发货'"
                  >申请退货</u-button
                > -->
               <!-- <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="customStyle"
                  v-if="item.OrderStatus == '4'"
                  >评价晒单</u-button
                > -->
				<!-- <u-button
				  shape="circle"
				  size="medium"
				  :custom-style="customStyle"
				  v-if="item.OrderStatus == '6'"
				  >待处理</u-button
				> -->
                <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="themCustomStyle"
				  v-on:click.stop="payment(item)"
                  v-if="item.OrderStatus == '1'"
                  >立即支付</u-button
                >
                <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="
                    item.OrderStatus == '3' ? customStyle : themCustomStyle
                  "
                  v-if="item.OrderStatus != '1'"
                  @click.stop="buy(item)"
                  >再次购买</u-button
                >
               <!-- <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="customStyle"
                  v-if="item.OrderStatus == '3'"
				   @click="goExpressHandler(orders)"
                  >查看物流</u-button
                > -->
                <u-button
                  shape="circle"
                  size="medium"
                  :custom-style="customStyle"
                  v-if="item.OrderStatus == '3'"
                  @click="shouhuoHandler(item.OrderId)"
                  >确认收货</u-button
                >
              </view>
            </view>
          </view>
        </view>
       <u-loadmore
         :status="status"
         :load-text="loadText"
         :font-size="24"
         :margin-top="20"
         :margin-bottom="20"
         bg-color="#f3f4f6"
       />
      </scroll-view>
    </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='item.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>
    
    <good-list
      :list="goodData"
      v-if="showGoodList"
      @close="closeGoodListHandler"
    ></good-list>
	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo"  @gbAuth= 'goback'></auth>
	<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>
  </view>
</template>

<script>
	import payCom from '@/components/pay/pay';
import goodList from "@/components/goods/order-good-list2";
import auth from "../../../components/auth/index.vue";
export default {
  components: {
    goodList,
	auth,
	payCom
  },
  data() {
    return {
      pageTitle: "我的订单",
      current: 0,
      list: [],
      mainColor: "",
      contentHeight: 0,
      
	  payBtn:false,
	  payExit:false,
      page_count: 1,
      g: [],
      submitId:0,
      showModal: false,
      item: "",
      index: 0,
      goodData: [],
      showGoodList: false,
      showReviceModal: false,
	  showAuth:false,
	  u: {},
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
      themCustomStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
	  msg:{
		  pageIndex:1,
		  pageSize:15,
		  OrderId:0,
		  OrderType:0,
		  DeliveryMethod:0,
		  StartTime:'',
		  EndTime:'',
		  OrderStatus:0,
		  OrderNo:'',
	  },
	  Cancelmsg:{
		  OrderId:0,
		  Type:1,
		  Remark:'',
	  },
	  payInfo: {
	  	OpenId: '',
	  	OrderId: '',
	  	OrderPayType: 1,
	  	GoodsName: ''
	  },
	  status: "loadmore",
	  loadText: {
	    loadmore: "轻轻上拉，加载更多",
	    loading: "努力加载中",
	    nomore: "没有更多了",
	  },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    this.themCustomStyle.color = this.mainColor;
    this.themCustomStyle.borderColor = this.mainColor;
  },
  mounted() {
    let currentPages = getCurrentPages();
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = wx.getStorageSync("basedata")
      ? wx.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.current = option.status || -1;
	
	this.u = uni.getStorageSync("mall_UserInfo");
	if (!this.u) {
	  this.u = {
		nickName: "未登录",
		avatarUrl: ""
	  };
	  this.showAuth = true;
	}else{
		this.getOrderStatus();
		
	}
  
  },
  methods: {
	  getOrderStatus() {
		  this.msg.pageIndex = 1;
		  this.g = [];
		  this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
	  		this.request2(
	  			{
	  				url: '/api/order/GetOrderStatusEnumList',
	  				data: {}
	  			},
	  			res => {
	  				uni.hideNavigationBarLoading();
	  				if(res.resultCode==1){
	  					this.isloading = false;
	  					this.list = res.data;
	  					let obj={
	  						Name:'全部',
	  						Id:0,
	  					}
	  					this.list.unshift(obj)
						this.msg.OrderStatus=this.list[this.current].Id;
						this.init();
	  				}
	  			}
	  		);
	  	},
    redirectToDetail(id) {
      uni.navigateTo({
        url: "/pages/order/order-detail?id=" + id,
      });
    },
    shouhuoHandler(id) {
      this.showReviceModal = true;
      this.submitId = id;
	  
    },
    submitReviceGoodHandler() { //确认收货
      let that = this
      // uni.requestSubscribeMessage({
      //   tmplIds: that.g[0].template_message_list,
      //   complete(res) {
          that.request2(
            {
            	url: '/api/AppletOrder/SetAppletOrderGoodsReceiving',
            	data: {
					OrderId: that.submitId
				}
            },
            (res) => {
			  uni.showToast({
			  	title:res.message
			  })
              that.change(4);
            }
          );
      //   },
      // });
    },
    change(index) {
		this.current = index;
		this.msg.OrderStatus=this.list[index].Id;
		this.msg.pageIndex = 1;
		this.g = [];
		
		this.init();
    },
    init() {
		
      uni.showLoading({
          title: '加载中'
      });
	  this.request2(
		{
			url: '/api/AppletOrder/GetAppletGoodsMyOrderPageList',
			data: this.msg
		},
		res => {
			uni.hideLoading();
			if(res.resultCode==1){
				
				this.g = this.g.concat(res.data.pageData);
				 this.page_count = res.data.pageCount;
				 if (this.page_count == 1) {
				   this.status = "nomore";
				 }
			}
		}
	  );
 
    },
	 lower(e) {
		 if (this.msg.pageIndex < this.page_count) {
		this.msg.pageIndex++;
		this.status = "loading";
		this.init();
		 } else {
		this.status = "nomore";
		 }
	   },
    cancel(e, index) {
      this.showModal = true;
	  this.Cancelmsg.Remark= '',
      this.index = index;
      this.item = e;
	  this.Cancelmsg.OrderId = e.OrderId;
	  this.Cancelmsg.Type = e.OrderStatus==1?1:2;
	  
    },
	payment(e){
		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;
	},
    confirm() { //取消订单
	let that = this
      // that.showModal = false;
	  if(that.Cancelmsg.Type==2 && that.Cancelmsg.Remark==''){
		  uni.showToast({
			  title:'备注不能为空',
			  icon:'none'
		  })
		  return 
	  }
	  uni.requestSubscribeMessage({
	    tmplIds: that.g[0].template_message_list,
	    complete (res) { 
			that.request2(
			  {
			  	url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
			  	data: that.Cancelmsg
			  },
			  (res) => {
				  that.showModal = false;
				if(that.Cancelmsg.Type==1){
					uni.showToast({
						title:res.message,
								icon:'none'
					})
					that.g.splice(that.index, 1);
				}else{
					uni.showToast({
					  title: "取消成功，请等待审核",
					  position: "bottom",
					  icon: "none",
					  duration: 2000,
					});
					that.msg.pageIndex = 1;
					that.g = [];
					that.init();
				}
			  }
			);
		}
	  })
    
    },
    closeGoodListHandler() {
      this.goodData = [];
      this.showGoodList = false;
    },
    showGoodListHandler(i) {
      this.goodData = this.g[i].DetailList;
      console.log(this.goodData);
      this.showGoodList = true;
    },
    buy(y) {
     let ShoppingCartIdList=[];
      let forms = {};
	  let good = {
	  	// MallId: y.MallId,
	  	DetailList: [],
	  	Use_Integral: 0,
	  	User_Coupon_Id: 0,
	  	DeliveryMethod:0,
	  	AddressId:0,
	  };
      y.DetailList.forEach((x) => {
         ShoppingCartIdList.push(x.Id)
          let g = {
          	GoodsId: x.GoodsId,
          	Number: x.Number,
          	SpecificationSort: x.SpecificationSort,
          };
          good.DetailList.push(g);
      });
      forms=good;
      uni.navigateTo({
      	url: '/pages/order-submit/order-submit?formData=' + encodeURIComponent(JSON.stringify(forms))+'&IsFormShoppingCart=2&ShoppingCartIdList='+JSON.stringify(ShoppingCartIdList)
      });
    },
	reloadUserinfo() {
	  this.u = uni.getStorageSync("mall_UserInfo");
	  this.showAuth = false;
	  this.getOrderStatus();
	},
	goback(){
		uni.navigateBack()
	},
  },
};
</script>
<style>
.orderindexStyle {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}
.orderindexStyle .orderList {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.orderList .listBox {
  /* width: 94%; */
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  margin-top: 30rpx;
}
.orderList .listBox .listBox_t {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 20px;
  color: #000;
}
.orderList .listBox .listBox_c {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.orderList .listBox .box_bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.orderList .handle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10rpx;
}
.orderList .handle_item {
  padding: 0 24rpx;
  border: 1px solid #c8c9cc;
  margin-left: 20rpx;
  height: 50rpx;
  border-radius: 25rpx;
  line-height: 50rpx;
}

.listBox_c .goodboxmore {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  align-items: center;
}
.listBox_c .goodboxmore .good-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
}
.listBox_c .goodboxmore .good-list .item {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 10px;
}
.listBox_c .goodboxmore .infos {
  margin-left: 15px;
}
.listBox_c .goodboxmore .infos .text {
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}
.listBox_c .left {
  flex: 1;
  color: #232323;
  font-size: 16px;
  flex: 1;
  font-family: "oswald";
}
.listBox_c .small {
  font-size: 13px;
}
.listBox_c .topic_cont_text {
  font-size: 30rpx;
  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; /** 显示的行数 **/
}
</style>
