<template>
  <view class="v-order-list">
    <mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
      <view class="list_item container-fluid m-b-24" v-for="(item,index) in orderList"
      >
        <view class="item_title">{{item.merchantName}}</view>
        <view class="row" @click="toHomeStayDetailPage(item.id)">
          <view class="item_image">
            <image class="img" :src="item.picUrls" mode="widthFix"></image>
          </view>
          <view class="item_content col">
            <!--						<view class="content-title">{{item.merchantName}}</view>-->
            <view class="content-date">{{item.goodsName}}¥{{item.goodsPrice}}
              *
              <!-- <image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-data-line.png"
                mode="widthFix">
              </image> -->
              {{item.goodsNum}}
            </view>
            <view class="content-price">总价：¥{{item.orderAmount}}</view>
          </view>
        </view>
        <view class="item_content">
          <view class="content-bottom">
            <view class="btn" v-if="item.orderStatus=='0'" @click="payOrder(item)">去支付</view>
            <view class="btn" v-if="item.orderStatus !='0' && item.orderStatus !='1'"
                  @click="toHomeStayBookingPage(item.hotelId)">再次购买</view>
            <view class="btn" v-if="item.refundDisplay =='1'" @click="toRefundPage(item.id)">退款进度</view>
          </view>
        </view>
        <view class="tip-bage"></view>
        <view class="tip-state m-t-12" v-if="item.orderStatus=='1'">等待商家接单中，请及时关注订单状态</view>
        <view class="state" :class="'type'+item.orderStatus">{{stateMessage(item.orderStatus)}}</view>
      </view>
    </mescroll-uni>
    <u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
      <f-pay :show-title="false" :show="isPayPopup" :order="orderInfo" :payMoney="orderInfo.orderAmount"
             :tradeNo="orderInfo.orderNumber" @payResult="payResult"></f-pay>
    </u-popup>

  </view>
</template>

<script>
import fPay from "../components/f-pay/f-pay";
import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";

import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
export default {
  components: {
    MescrollUni,
    fPay,
    uPopup
  },
  data() {
    return {
      rootPath: this.$config.ROOTPATH,
      //是否支付弹窗
      isPayPopup: false,
      //滚动
      downOption: {
        auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
      },
      upOption: {
        auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
      },
      mescroll: '',
      param: {
        pageSize: 10,
        pageNo: 1,
        noData: false,
        loading: false,
        finished: false,
        openid: undefined,
        appid: undefined,
      },
      orderList: [],
      list: [], //商品数据
      orderInfo: undefined,
    }
  },
  onLoad() {
    //TODO:
    this.judgeLogin()
  },
  onShow() {
    this.param.pageNo = 1
    this.loadData()
  },
  methods: {
    stateMessage: function(val) {
      //订单状态 0未支付 1已支付 2已取消 3 预定失败 4预定成功 5 已入住 6已离店 7 退款中 8已退款
      switch (val) {
        case "0":
          return "待支付"
          break;
        case "1":
          return "待确认"
          break;
        case "2":
          return "已取消"
          break;
        case "3":
          return "退款中"
          break;
        case "4":
          return "已退款"
          break;
        case "5":
          return "商家接单"
          break;
        case "6":
          return "交易完成"
          break;
      }
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    /*下拉刷新的回调 */
    downCallback(mescroll) {
      this.mescroll = mescroll
      this.param.pageNo = 1
      this.loadData();
      // #ifdef H5
      this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏
      // #endif
      // #ifndef H5
      this.top = uni.upx2px(100) + 'px'; // 非H5不必加
      // #endif
      setTimeout(() => {
        this.mescroll.endSuccess();
        this.top = 0;
      }, 2500);
    },
    upCallback(mescroll) {
      this.mescroll = mescroll
      this.param.pageNo = this.mescroll.num
      this.loadData();
    },
    //支付结果
    payResult(data) {
      if (data.payStatus == 1) {
        uni.showToast({
          title: '支付成功',
          icon: 'none'
        });
        setTimeout(() => {
          this.isPayPopup = false
          this.param.pageNo = 1
          this.loadData()
        }, 1000)
      } else {
        uni.showToast({
          title: '支付失败',
          icon: 'none'
        });
        this.isPayPopup = false
      }
      //uni.showToast({title: data.detail.errMsg,icon:'none'});
    },
    // 下拉刷新
    loadData() {
      // TODO: 需从缓存获取appId openId
      const userInfo = uni.getStorageSync("userInfo");
      const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
      let appId = extConfig.app_id
      this.param.openid = userInfo.openid
      this.param.appid = appId
      // this.param.openid = "oohzD5b7g4hNA1qJyAwlSA5H4NCY"
      // this.param.appid = 23
      this.$Request.get(this.$config.getMerchantOrderList, this.param, null, null, false, true).then((res) => {
        const curPageData = res.data.list || [] // 当前页数据
        if (this.mescroll.num == 1) this.orderList = []; // 第一页需手动制空列表
        curPageData.forEach((item, index) => {
          this.orderList.push(item)
        })

        setTimeout(() => {
          this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
        }, 1000);
      }).catch(() => {
        this.mescroll.endErr(); // 请求失败, 结束加载
      });
    },
    // 支付
    payOrder(val) {
      this.orderInfo = val
      console.log("订单==========", this.orderInfo)
      this.isPayPopup = true
    },
    closePay() {
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定取消支付？',
        cancelText: '再想想',
        showCancel: true,
        success: function(res) {
          if (res.confirm) {
            that.isPayPopup = false
          } else if (res.cancel) {
            console.log('用户点击取消');
            this.isPayPopup=false
          }
        }
      })
    },
    // 跳转民宿订单详情页
    toHomeStayDetailPage(id) {
      uni.navigateTo({
        url: "/subPageC/orderShop/orderDetail?id=" + id
      });
    },
    //跳转预订页面
    toHomeStayBookingPage(hotelId) {
      uni.navigateTo({
        url: "/subPageB/Homestay/homestaydetail/homestaydetail?guid=" + hotelId
      });
    },
    //跳转退款页面
    toRefundPage(orderId) {
      uni.navigateTo({
        url: "/subPageC/orderHomestay/cancelStep?orderId=" + orderId
      });
    }
  }
}
</script>

<style lang="scss">
/*每个页面公共css */
@import '@/static/css/common.scss';

.v-order-list {
  padding: 0;

  .list_item {
    position: relative;
    z-index: 9;
    overflow: hidden;
    box-sizing: border-box;
    padding: 30rpx 24rpx 20rpx 24rpx;
    background-color: #fff;
    border-radius: 10rpx;

    .item_title {
      margin-top: -5rpx;
      margin-bottom: 10rpx;
      padding-left: 30rpx;
      font-size: 32rpx;
      color: #1B1B1B;
      font-weight: bold;
    }

    .item_image {
      width: 180rpx;
      height: 150rpx;
      margin-right: 20rpx;
      overflow: hidden;

      .img {
        width: 200rpx;
      }
    }

    .tip-bage {
      position: absolute;
      left: 0;
      top: 20rpx;
      width: 40rpx;
      height: 36rpx;
      background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-homestay.png');
      background-repeat: no-repeat;
      background-position: left 4rpx;
      background-size: 40rpx;
    }

    .state {
      position: absolute;
      right: 0;
      top: 30rpx;
      font-size: 26rpx;
      color: #0983FF;
      padding: 8rpx 30rpx 8rpx 20rpx;
      border-radius: 30rpx 0 0 30rpx;
      background: linear-gradient(to right, rgba(9, 131, 255, .2), transparent);


      &.type0 {
        color: #FF850A;
        padding: 8rpx 30rpx 8rpx 20rpx;
        border-radius: 30rpx 0 0 30rpx;
        background: linear-gradient(to right, rgba(255, 133, 10, .2), transparent);
      }

      &.type1 {
        color: #0983FF;
        padding: 8rpx 30rpx 8rpx 20rpx;
        border-radius: 30rpx 0 0 30rpx;
        background: linear-gradient(to right, rgba(9, 131, 255, .2), transparent);
      }

      &.type2 {
        color: #666666;
        padding: 8rpx 30rpx 8rpx 20rpx;
        border-radius: 30rpx 0 0 30rpx;
        background: linear-gradient(to right, rgba(102, 102, 102, .2), transparent);
      }

      &.type3 {
        color: #666666;
        padding: 8rpx 30rpx 8rpx 20rpx;
        border-radius: 30rpx 0 0 30rpx;
        background: linear-gradient(to right, rgba(102, 102, 102, .2), transparent);
      }
    }

    .tip-state {
      margin-left: -24rpx;
      margin-bottom: -24rpx;
      color: #0983FF;
      padding: 10rpx 30rpx;
      font-size: 24rpx;
      background: linear-gradient(to right, rgba(9, 131, 255, .15), transparent);
    }

    .item_content {

      .content-title,
      .content-date,
      .content-price {
        margin: 8rpx;
        color: #666666;
        font-size: 28rpx;
      }

      .content-date {
        image {
          width: 24rpx;
          height: 22rpx;
          margin: 0 10rpx;
        }
      }

      .content-bottom {
        text-align: right;

        .btn {
          display: inline-block;
          margin: 0 10rpx;
          padding: 0 20rpx;
          border: 1rpx solid #CCCCCC;
          color: #1B1B1B;
          font-size: 28rpx;
          text-align: center;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 60rpx;
        }
      }
    }


  }
}
</style>
