<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">
    <view class="list-container">
      <view class="item" v-for="(item,index) in orderList" :key="index" @click="toDetail(item.id)">
        <view class="top">
          <view class="title">{{item.type == 1?'延保':'清洗'}}服务</view>
          <text class="iconfont icon-jinru"></text>
        </view>
        <view class="text">{{item.intro}}</view>
      </view>
    </view>
		<Loading
			:loadStatus="loadStatus"
			:dataList="orderList"
		/>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/addvalue/explainList`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        orderList: [], // 订单列表
        loadStatus: 0,
        refresherTriggered: false, // 下拉刷新状态
        pageNum: 1,
      }
    },

    onLoad() {
		this.getOrderList();
    },

    methods: {
      getOrderList() {
      	this.loadStatus = 1;
      	let url = '';
      	this.$api.post('/increConfig/list', {
      		pageNum: this.pageNum,
      		pageSize: 10,
      	}).then(res => {
      		this.loadStatus = 0;
      		let list = res.data.records;
      		if (list.length < 10) {
      			this.loadStatus = 2;
      		}
      		this.orderList = this.orderList.concat(list);
      	}).catch(() => {
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },
      
      // 滚动到底部
      scrolltolower(e) {
      	if (this.loadStatus === 0) {
      		this.pageNum++;
      		this.getOrderList();
      	}
      },
      
      // 触发下拉刷新
      async refresherrefresh(e) {
      	this.refresherTriggered = true;
      	this.refreshList();
      },
      
      refreshList() {
      	this.orderList = [];
      	this.pageNum = 1;
      	this.getOrderList();
      },
	  
	  toDetail(id){
		  this.$navToPage({
			  url: `/packageHome/pages/addvalue/explainDetail?id=` + id
		  });
	  }
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.list-container {
  .item {
	min-height: 120rpx;
    background: #ffffff;
    margin-top: 20rpx;
    padding: 30rpx;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-weight: 600;
      }
      .iconfont {
        color: $sec-font;
      }
    }
    .text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: $sec-font;
    }
  }
}
</style>
