<template>
  <view class="content">
    <scroll-view
      scroll-y
      style="height: 100%; width: 100%"
      @scrolltolower="reachBottom"
      @scroll="handleScroll"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      scroll-anchoring
      @refresherrestore="onRestore"
      @refresherpulling="triggered = true"
    >
      <u-swiper
        :height="250"
        :list="list"
        :indicator-pos="indicatorPos"
        :mode="mode"
        :interval="3000"
        @click="clickSwiper"
      >
      </u-swiper>
      <view>
        <text class="title">最新消息</text>
        <view v-for="(item, index) in messageList" :key="index">
          <text class="title">{{ item.body }}</text>
        </view>
        <view class="order-view">
          <!-- 订单推荐吸顶 -->
          <u-sticky>
            <view class="sticky">
              <text>订单推荐</text>
            </view>
          </u-sticky>
          <!-- 入驻成功之后显示推荐订单列表 -->
          <view v-if="status == 7 && orderList.length > 0">
            <view v-for="(item, index) in orderList" :key="index">
              <OrderCell :orderData="item"> </OrderCell>
            </view>
            <u-loadmore
              :status="currentLoadStatus"
              bgColor="#f2f2f2"
            ></u-loadmore>
          </view>
          <!-- 入驻成功之后无推荐订单 -->
          <view v-else-if="status == 7 && orderList.length <= 0">
            暂无订单
          </view>
          <!-- 入驻前-->
          <view v-else-if="loaded">
            <text class="title"
              >当前订单{{ count }}笔\n入驻通过后，平台将向您推荐订单</text
            >
            <u-button
              class="settle-button"
              type="primary"
              shape="circle"
              @click="immediatelyIn"
              :custom-style="buttonStyle"
            >
              立即入驻
            </u-button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import util from "@/utils/util.js";

const app = getApp();
import OrderCell from "@/components/order/index.vue";

export default {
  components: {
    OrderCell,
  },
  data() {
    return {
      status: 0, // 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试',9=>'待提交'
      triggered: false,
      list: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
        },
      ],
      title: false,
      mode: "round",
      indicatorPos: "bottomCenter",
      title: "Hello",
      loaded: false,
      count: 0, // 推荐订单数量
      messageList: [
        {
          id: 1234,
          type: "",
          level: "",
          title: "",
          url: "",
          body: "好消息",
        },
        {
          id: 1234,
          type: "",
          level: "",
          title: "",
          url: "",
          body: "好消息",
        },
        {
          id: 1234,
          type: "",
          level: "",
          title: "",
          url: "",
          body: "好消息",
        },
      ],
      loadStatus: ["more", "loading", "noMore"],
      currentLoadStatus: "loading",
      orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      bottomLoading: false,
    };
  },
  computed: {
    buttonStyle() {
      return {
        width: "300rpx",
      };
    },
  },
  onLoad() {
    this._freshing = false;
    this.triggered = false;
  },
  onShow() {
    // 每次进入页面都刷新入驻状态
    if (app.globalData.token) {
      // 获取是否显示入驻按钮
      this.initSettleInfo();
    }
  },
  methods: {
    async initSettleInfo() {
      if (this.status == 7) return;
      const callBack = (vm, result) => {
        // 后台自动判断入驻流程是否完成，前台通过status确定状态
        if (result && result.record) {
          vm.loaded = true;
          vm.status = Number(result.record.status);
          // vm.status = 1
        }
      };
      await app.getBaseInfo(this, callBack);
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;

      // 获取入驻状态
      this.initSettleInfo();
      // 获取推荐订单及数量
      // ....

      setTimeout(() => {
        // 数据加载完成更新入驻状态和推荐列表
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore";
    },
    reachBottom() {
      console.log("-----bottom will-----");
      if (this.bottomLoading || this.currentLoadStatus == this.loadStatus[2]) {
        return;
      }
      console.log("-----bottom did-----");

      this.bottomLoading = true;

      setTimeout(() => {
        // 加载更多数据
        // ...
        this.orderList.push(...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);

        // 加载完成
        this.currentLoadStatus = false /*是否还有*/
          ? this.loadStatus[1]
          : this.loadStatus[2];
        this.$nextTick(function () {
          this.bottomLoading = false;
        });
      }, 1000);
    },
    clickSwiper(index) {},
    handleScroll() {
      console.log("-----scroll-------");
    },
    immediatelyIn() {
      if (util.getToken()) {
        uni.navigateTo({
          url: this.status > 0 ? "/pages/settle/prompt" : "/pages/settle/index",
        });
      } else {
        uni.navigateTo({
          url: "pages/login/index",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
}

.logo {
  height: 200 rpx;
  width: 100%;
  margin: 0 rpx auto 50 rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36 rpx;
  color: #8f8f94;
}

.sticky {
  height: 120 rpx;
  background-color: #2979ff;
  color: #fff;
  padding: 24 rpx;
  text-align: left;
}

.order-view {
  text-align: center;
}
</style>
