<template>
  <view class="list-view">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      :title="title"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="content-view">
      <scroll-view
        @scrolltolower="reachBottom"
        scroll-anchoring
        enable-back-to-top
        refresher-background="#F4F5F7"
      >
        <view class="loading-view" v-if="!loaded">
          <u-loading mode="flower"></u-loading>
        </view>
        <NoOrder
          v-else-if="noMore"
          imageName="zwdd.png"
          :customStyle="noOrderCustomStyle"
        />
        <template v-else>
          <view v-for="item in orderList" :key="item.orderId">
            <OrderCell
              :orderData="item"
              :location="dataValue"
              @click="handleClick"
              @action="handleClickCellButton"
            >
            </OrderCell>
          </view>
          <view
            class="load-more-view"
            v-show="(pageNumber == 1 && loaded) || pageNumber > 1"
          >
            <u-loadmore :status="loadStatus" bgColor="#F4F5F7"></u-loadmore>
          </view>
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import OrderCell from '@/components/order/index.vue'
import NoOrder from '@/components/order/noOrder.vue'

export default {
  components: {
    OrderCell,
    NoOrder,
  },
  data() {
    return {
      pageNumber: 0,
      pageSize: 10000, // 因为需要排序，所以暂时去掉分页
      orderList: [],
      loadStatus: 'loading',
      dataValue: [],
      loaded: false,
      title: '',
      orderType: '',
      timeParam: {},
    }
  },
  computed: {
    noMore() {
      return this.orderList.length == 0 && this.loaded
    },
    noOrderCustomStyle() {
      return 'margin-top: 100rpx;background-color: #F4F5F7'
    },
    sortType() {
      return {
        take: 'acceptOrderDateTime',
        checkin: 'checkInDateTime',
        finish: 'orderFinishDatetime',
      }
    },
    currentSorTtype() {
      return this.sortType[this.orderType]
    },
  },
  onLoad(e) {
    getApp().trackPage('订单首页')
    if (e && e.title) {
      this.title = decodeURIComponent(e.title)
    }
    if (e && e.orderType) {
      this.orderType = e.orderType
    }
    if (e && e.start && e.end) {
      this.timeParam = { start: e.start, end: e.end }
    }
    this.reloadOrderList()
  },

  methods: {
    reachBottom(e) {
      if (this.loadStatus != 'loadmore') return
      this.loadStatus == 'loading'
      this.getOrderList()
    },
    // 页面数据
    getOrderList() {
      // 状态处理
      this.pageNumber += 1
      if (this.pageNumber == 1) {
        this.loaded = false
      }
      var param = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        keyword: '',
        type: this.orderType,
        ...this.timeParam,
      }
      this.$u.api.manageOrderList(param).then((res) => {
        if (res.code == 200) {
          if (this.pageNumber == 1) {
            this.orderList = []
          }
          if (res.data.list) {
            this.orderList.push(...res.data.list)

            this.orderList.sort((x, y) => {
              return (x[this.currentSorTtype] || 0) <
                (y[this.currentSorTtype] || 0)
                ? 1
                : -1
            })

            this.loadStatus =
              res.data.total > this.orderList.length &&
              res.data.list.length == this.pageSize
                ? 'loadmore'
                : 'nomore'
          }
        } else {
          console.log(res.message, '获取订单数量失败！')
        }
        this.loaded = true
      })
    },

    handleClickCellButton(item) {
      // 去完工
      uni.navigateTo({
        url:
          'pages/order/complete?orderId=' +
          item.orderId +
          '&categoryId=' +
          item.categoryId +
          '&orderServiceType=' +
          item.orderServiceType +
          '&inGuaranteePeriod=' +
          item.inGuaranteePeriod +
          '&partnerCompanyId=' +
          item.partnerCompanyId +
          '&maintainStep=' +
          item.maintainStep +
          '&orderStatus=' +
          item.orderStatus +
          '&brandId=' +
          item.lianbaoBrandId +
          '&auditResults=' +
          (item.auditResults ? item.auditResults.join() : '') +
          '&orderNumber=' +
          item.orderNumber,
      })
    },
    handleClick(item, type, showCountTime) {
      // type:类型，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
      //type类型
      // 'waitAccept': 待接单、待抢单;'waitAppointment': 待预约;'waitCheckIn': 待签到;'waitFinish': 待完工;'audit': 审核中;'exception': 异常单;'finish': 已完工;'other': 工单结算信息
      uni.navigateTo({
        url:
          'pages/order/detail?id=' +
          item.orderId +
          '&type=' +
          type +
          '&showCountTime=' +
          showCountTime,
      })
    },
    reloadOrderList() {
      this.pageNumber = 0
      this.loadStatus = 'loading'
      this.getOrderList()
    },
  },
}
</script>

<style lang="scss" scoped>
.list-view {
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .content-view {
    height: 100%;
    overflow: auto;
    padding: 20rpx 30rpx;
    .load-more-view {
      padding-bottom: 44rpx;
    }
    .loading-view {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      margin-top: 300rpx;
      position: absolute;
    }
  }
}
</style>
