<style>
.jz_MyOrder {
  height: 100vh;
  background-color: #ecf1f4;
}

.jz_OrderList {
  width: 100%;
  min-height: 334rpx;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 15px;
  position: relative;
}

.jz_OrderList:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.jz_OrderTop {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 27rpx;
  border-bottom: 1px solid #e6e6e6;
}

.jz_Oleft {
  color: #111111;
  font-size: 32rpx;
  font-weight: bold;
  width: 70%;
  height: 24px;
  overflow: hidden;
}

.jz-Oright {
  color: #111111;
  font-size: 24rpx;
  position: absolute;
  right: 0;
}

.jz_MyOrder_img {
  width: 100rpx;
  height: 100rpx;
  margin-top: 20px;
  border-radius: 20rpx;
  overflow: hidden;
}

.jz_MyOrder_img img {
  width: 100%;
  height: 100%;
}

.jz_XiaDan {
  margin-left: 25rpx;
  color: #333333;
  font-size: 24rpx;
  margin-top: 20px;
}

.jz_Zailai {
  background-color: #111111;
  border-radius: 16px;
  width: 150rpx;
  height: 60rpx;
  text-align: center;
  color: #fff;
  line-height: 60rpx;
  font-size: 24rpx;
}

.isShowAll {
  height: auto;
}
.jz_BtnContent {
  margin-top: 15px;
  right: 40rpx;
  bottom: 20rpx;
  display: flex;
  justify-content: flex-end;
}
</style>
<template>
  <view class="jz_MyOrder">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      :active-color="mainColor"
      :show-bar="showBar"
      @change="change"
      bar-height="4"
      height="100"
    ></u-tabs>
    <u-empty v-if="dataList.length == 0" text="暂无数据" mode="data"></u-empty>
    <template v-else>
      <view
        class="jz_MyOrderMain"
        style="height: calc(100vh - 44px); overflow: hidden"
      >
        <scroll-view
          :scroll-y="true"
          :enable-back-to-top="true"
          :enable-flex="true"
          @scrolltolower="lower"
          :style="{ height: '100%' }"
        >
          <view
            class="jz_OrderList"
            v-for="(item, index) in dataList"
            :key="index"
            @click="goOrderDetail(item)"
          >
            <view class="jz_OrderTop">
              <view class="jz_Oleft" :class="{ isShowAll: !item.isShowHalf }">
                {{ item.title }}
              </view>
              <view style="margin-left: 10px">
                <u-icon
                  name="arrow-down"
                  @click.native.stop="getShow(item)"
                  v-if="item.isShowHalf"
                  color="#2979ff"
                  size="28"
                ></u-icon>
                <u-icon
                  name="arrow-up"
                  @click.native.stop="getShow(item)"
                  v-else
                  color="#2979ff"
                  size="28"
                ></u-icon>
              </view>
              <view class="jz-Oright">
                {{
                  item.orderStateName == "占位" ? "待付款" : item.orderStateName
                }}
              </view>
            </view>
            <view style="display: flex">
              <view class="jz_MyOrder_img">
                <img
                  mode="aspectFill"
                  :src="getFirstImg(item.imgCover)"
                  alt=""
                />
              </view>
              <view class="jz_XiaDan">
                <view>下单时间：{{ item.createDate }}</view>
                <view style="margin-top: 22rpx"
                  >付款总额：¥{{ item.preferPrice }}</view
                >
              </view>
            </view>
            <view
              v-if="item.isApplyForCancel == 1"
              style="color: red; font-size: 24rpx; margin-left: 122rpx"
              >订单取消，正在确认中！</view
            >
            <view class="jz_BtnContent">
              <view
                class="jz_Zailai"
                style="margin-right: 10rpx"
                @click="gojz_List"
                >再来一单</view
              >
              <view
                v-if="item.orderState == 2"
                class="jz_Zailai"
                style="width: 110rpx; margin-right: 10rpx"
                @click="goZhifu(item)"
                >付款</view
              >
              <view
                v-if="item.isApplyForCancel != 1"
                class="jz_Zailai"
                style="width: 110rpx"
                @click="goCancel(item)"
                >取消</view
              >
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      pageTitle: "线路订单",
      msg: {
        pageIndex: 1,
        pageSize: 15,
        MiniAppUserId: 0,
        orderState: -1,
      },
      mainColor: "",
      list: [
        {
          name: "全部",
          Id: -1,
        },
        {
          name: "待付款",
          Id: 2,
        },
        {
          name: "已完成",
          Id: 1,
        },
        {
          name: "已取消",
          Id: 4,
        },
      ],
      current: 0,
      dataList: [],
      page_count: 0,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      status: "加载中",
      price: 0,
      showBar: true,
    };
  },
  created() {
    // #ifdef MP-ALIPAY
    this.showBar = false;
    // #endif
    this.getOrderInfo();
  },
  onLoad(option) {
    this.current = option.status || 0;
    this.mainColor = this.$uiConfig.mainColor;

    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,
    });
  },
  methods: {
    goOrderDetail(item) {
      console.log(item);
      uni.redirectTo({
        url: "/pages/jiuzhai/jz_SureOrder?orderId=" + item.orderId,
      });
    },
    change(i) {
      this.current = i;
      this.msg.orderState = this.list[i].Id;
      this.research();
    },
    //获取第一张图
    getFirstImg(obj) {
      if (obj) {
        let objArr = JSON.parse(obj);
        return objArr[0].Url;
      }
    },
    getShow(item) {
      item.isShowHalf = !item.isShowHalf;
      this.$forceUpdate();
    },
    //跳转
    gojz_List() {
      uni.navigateTo({
        url: "/pages/jiuzhai/jz_Line",
      });
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getOrderInfo();
      } else {
        this.status = "nomore";
      }
    },
    research() {
      this.msg.pageIndex = 1;
      this.getOrderInfo(1);
    },
    getOrderInfo(type) {
      uni.showLoading({
        title: "加载中",
        icon: "none",
      });
      if (type == 1) {
        this.dataList = [];
      }
      this.userInfo = uni.getStorageSync("mall_UserInfo");
      this.msg.MiniAppUserId = this.userInfo.UserId;
      this.apipost(
        "sellorder_post_GetMiniAppTravelOrderList",
        this.msg,
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            console.log(res, "数据");
            if (type == 1) {
              this.dataList = res.data.pageData;
            } else {
              this.dataList = this.dataList.concat(res.data.pageData);
            }

            this.dataList.forEach((x) => {
              x.isShowHalf = true;
            });
            this.page_count = res.data.pageCount;
          } else {
          }
        },
        null
      );
    },
    //取消订单
    goCancel(item) {
      //未付款-调用后台取消
      if (
        (item.paymentTime == null || item.paymentTime == "") &&
        item.orderState == 2
      ) {
        this.apipost(
          "sellorder_post_B2BRemoveOrder",
          {
            ID: item.orderId,
          },
          (res) => {
            if (res.resultCode == 1) {
              uni.showToast({
                title: "操作成功",
                icon: "success",
              });
              this.research();
            }
          },
          (err) => {}
        );
      } else {
        let msg = {
          OrderId: item.orderId,
          UserId: uni.getStorageSync("mall_UserInfo").UserId,
        };
        //已付款取消申请
        this.apipost(
          "sellorder_post_AppletUserCancelOrder",
          msg,
          (res) => {
            if (res.resultCode == 1) {
              uni.showToast({
                title: "操作成功",
                icon: "success",
              });
              this.research();
            } else {
            }
          },
          null
        );
      }
    },
    //付款
    goZhifu(item) {
      console.log(item, "item");
      let url = "/api/WeChatPay/GetTravlePayInfo";
      let GoodsName = item.title;
      GoodsName = GoodsName.slice(0, 10);
      this.price = item.preferPrice;
      this.request2(
        {
          url: url,
          data: {
            OrderId: item.orderId,
            GoodsName: GoodsName,
            OrderPayType: 1,
            OpenId: uni.getStorageSync("mall_UserInfo").OpenId,
          },
        },
        (res) => {
          let orderInfo = JSON.parse(res.data);
          this.goPay(orderInfo);
        }
      );
    },
    goPay(orderInfo) {
      let that = this;
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: orderInfo.timeStamp,
        nonceStr: orderInfo.nonceStr,
        package: orderInfo.package,
        signType: orderInfo.signType,
        paySign: orderInfo.sign,
        success: function (res) {
          console.log("success", res);
          uni.showToast({
            title: "支付成功",
          });
          //todo
          uni.redirectTo({
            url:
              "/pages/jiuzhai/paysuccess?PreferPrice=" +
              that.price +
              "&isFrom=1",
          });
        },
        fail: function (err) {
          console.log("fail:", err);
          uni.showToast({
            title: "支付失败",
          });
        },
      });
    },
  },
};
</script>
