<style>
.order_Content {
  width: 100%;
}

.order_Inner {
  width: 100%;
  padding: 20px;
  margin-bottom: 10px;
  background-color: #fff;
}

.order_NContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #121212;
}

.order_Status {
  color: #ff4048;
  color: 12px;
}

.order_Car {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.order_Price {
  color: #121212;
  font-size: 15px;
}

.order_carImg image {
  width: 200rpx;
  height: 130rpx;
}

.order_middle {
  font-size: 13px;
  color: #121212;
  width: 53%;
}

.order_carName {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  width: 100%;
}

.order_guidIndfo {
  width: 100%;
  height: 45px;
  background-color: #faf8f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #121212;
  padding: 0 20px;
  margin-top: 15px;
  border-radius: 7px;
  font-weight: bold;
}

.order_BtnList {
  margin-top: 20px;
  position: relative;
  height: 30px;
}

.order_Btn_inner {
  width: 70%;
  position: absolute;
  right: 0;
}

.order_Btn_Com {
  padding: 5px 10px;
  border: 1px solid #888888;
  border-radius: 14px;
  color: #888888;
  font-size: 12px;
  float: right;
  margin-right: 15px;
}

.order_Btn_inner .order_Btn_Com:first-child {
  margin-right: 0;
}
</style>
<template>
	<view class="quick-box" style="height:100vh;">
		<view class="guid-head">
			<u-tabs name="Name" :list="headData" :is-scroll="true" :current="current"  :font-size="28" height="100"
			 :active-color="mainColor" @change="getChild" :show-bar="showBar"></u-tabs>
		</view>
		<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
		<scroll-view v-else :scroll-y="true" style="background-color: #f0f4f7;" :enable-back-to-top="true" :enable-flex="true"
		 @scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
			<view class="order_Content">
				<view class="order_Inner" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
					<view class="order_NContent">
						<view>订单号：{{item.OrderNo}}</view>
						<view class="order_Status">{{item.OrderStatusName}}</view>
					</view>
					<view class="order_Car">
						<view class="order_carImg">
							<image mode="aspectFit" :src="item.DetailList[0].CoverImagePath" />
							</image>
						</view>
						<view class="order_middle">
							<view class="order_carName">{{item.DetailList[0].GoodsName}}</view>
							<view style="margin-bottom:5px;">
								{{item.DetailList[0].TripSTime}}
							</view>
							<view>
								出行{{item.DetailList[0].Number}}人
							</view>
						</view>
						<view style="width:50px;text-align: right;">
							<view class="order_Price">¥{{item.Income}}</view>
						</view>
					</view>
					<view class="order_guidIndfo">
						<view>匹配导游：{{item.GuideName}}·<text style="font-weight: normal;">{{item.GuideTelephone}}</text></view>
						<view style="margin-top:6px;">
							<u-avatar mode="circle" size="60" :src="item.GuidePhoto"></u-avatar>
						</view>
					</view>
					<view class="order_BtnList" v-if="item.OrderStatus==1||item.OrderStatus==2||item.OrderStatus==3">
						<view class="order_Btn_inner">
							<view class="order_Btn_Com" v-if="item.OrderStatus==1" @click.stop="payment(item)" style="color:#FF4048;border-color:#FF4048;">立即支付</view>
							<!-- <view class="order_Btn_Com">评价晒单</view> -->
							<view class="order_Btn_Com" @click.stop="cancel(item,index)" v-if="item.OrderStatus==1||item.OrderStatus==2||item.OrderStatus==3">取消订单</view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding:10px 0;">
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
			</view>
		</scroll-view>

		<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='subItem.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>
		<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 auth from "@/components/auth/index";
import tabbar from "@/components/tabbar/index";
export default {
  components: {
    auth,
    payCom,
  },
  data() {
    return {
      pageTitle: "司导订单",
      loading: true,
      mainColor: "",
      u: {},
      msg: {
        pageIndex: 1,
        pageSize: 5,
        OrderId: 0,
        StartTime: "",
        EndTime: "",
        OrderStatus: 0,
        OrderNo: "",
        OrderType: 11, //默认写死
      },
      scrollHeight: 0,
      pageCount: 1,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      headData: [], //头部切换数据
      current: 0,
      //内容数据
      dataList: [],
      showModal: false,
      subItem: {},
      index: 0,
      Cancelmsg: {
        OrderId: 0,
        Type: 1,
        Remark: "",
      },
      payInfo: {
        OpenId: "",
        OrderId: "",
        OrderPayType: 1,
        GoodsName: "",
      },
      payBtn: false,
      payExit: false,
      showBar: true,
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    // #ifdef MP-ALIPAY
    this.showBar = false;
    // #endif
  },
  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,
    });
    setTimeout(() => {
      this.getHeadHeight();
    }, 1000);
  },
  onLoad(option) {
    this.current = option.status || 0;
    this.getHeadList();
    this.payInfo.OpenId = uni.getStorageSync("mall_UserInfo").OpenId;
    this.u = uni.getStorageSync("mall_UserInfo");
  },
  methods: {
    getHeadHeight() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".guid-head")
        .boundingClientRect((data) => {
          that.scrollHeight = data.height + "px";
        })
        .exec();
    },
    //获取头部数据
    getHeadList() {
      this.request2(
        {
          url: "/api/AppletGCOrder/GuidCarOrderStatusEnumList",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.headData = res.data;
            var obj = {
              Id: 0,
              Name: "全部",
            };
            this.headData.unshift(obj);
            this.msg.OrderStatus = this.headData[this.current].Id;
            this.getContent();
          }
        }
      );
    },
    //点击头部切换
    getChild(i) {
      this.current = i;
      this.msg.OrderStatus = this.headData[this.current].Id;
      this.getContent(1);
    },
    //获取内容
    getContent(num) {
      if (num == 1) {
        this.dataList = [];
      }
      uni.showLoading({
        title: "加载中",
      });
      this.request2(
        {
          url: "/api/AppletGCOrder/GetAppletGoodsGuidecarOrderPageList",
          data: this.msg,
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            this.dataList = this.dataList.concat(res.data.pageData);
            this.pageCount = res.data.pageCount;
          }
        }
      );
    },
    //滚动加载
    lower(e) {
      if (this.msg.pageIndex < this.pageCount) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getContent();
      } else {
        this.status = "nomore";
      }
    },
    //跳转
    goUrl(item) {
      if (item.LinkUrl && item.LinkUrl.length > 0) {
        uni.navigateTo({
          url: item.LinkUrl,
        });
      }
    },
    //取消订单
    cancel(e, index) {
      this.showModal = true;
      (this.Cancelmsg.Remark = ""), (this.index = index);
      this.subItem = e;
      this.Cancelmsg.OrderId = e.OrderId;
      this.Cancelmsg.Type = e.OrderStatus == 1 ? 1 : 2;
    },
    //确认订单
    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.dataList[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.dataList.splice(that.index, 1);
              } else {
                uni.showToast({
                  title: "取消成功，请等待审核",
                  position: "bottom",
                  icon: "none",
                  duration: 2000,
                });
                that.msg.pageIndex = 1;
                that.dataList = [];
                that.getContent();
              }
            }
          );
        },
      });
    },
    //再次购买
    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),
      });
    },
    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;
    },
    //跳转到详情
    goDetail(item) {
      uni.navigateTo({
        url: "/pages/guidecar/orderDetail?OrderId=" + item.OrderId,
      });
    },
  },
};
</script>
