<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="tab-container">
        <u-tabs
          :scrollable="true"
          :list="tabList"
          :current="curTab"
          @click="changeTab"
          lineColor="#3D8FFD"
          :activeStyle="{
            color: '#3D8FFD'
          }"
          :inactiveStyle="{
            color: '#666666'
          }"
          itemStyle="height: 88rpx;"
        >
        </u-tabs>
      </view>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toDetail(item)">
        <view class="row">
          <view class="label">申请单号</view>
          <view class="value">{{ item.orderId }}</view>
          <view class="status">{{ item.examineStatus | statusFilter }}</view>
        </view>
        <view class="row">
          <view class="label">项目名称</view>
          <view class="value">{{ item.rpProjectRepairName }}</view>
        </view>
        <view class="row">
          <view class="label">工单编号</view>
          <view class="value">{{ item.workerOrderId }}</view>
        </view>
        <view class="row">
          <view class="label">下单人员</view>
          <view class="value">{{ item.workerName }} {{ item.workerMobile }}</view>
        </view>
        <view class="row">
          <view class="label">下单时间</view>
          <view class="value">{{ item.createTime }}</view>
        </view>
        <view class="row">
          <view class="label">申请人员</view>
          <view class="value">{{ item.workerName }} {{ item.workerMobile }}</view>
        </view>
        <view class="row">
          <view class="label">申请时间</view>
          <view class="value">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="dataList" />
  </zj-page-layout>
  <!-- #endif -->

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

<script>
// #ifdef H5
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待审批',
        OK: '审批通过',
        FAIL: '审批驳回',
        NO: '已取消',
        PAID: '已现场支付',
      }
      return MAP[val];
    }
  },

  data() {
    return {
      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false,
      tabList: [
      	{key: '', name: '全部', badge: { value: 0 }},
      	{key: 'WAIT', name: '待审批', badge: { value: 0 }},
      	{key: 'OK', name: '审批通过', badge: { value: 0 }},
      	{key: 'FAIL', name: '审批驳回', badge: { value: 0 }},
      	{key: 'NO', name: '已取消', badge: { value: 0 }},
      	{key: 'PAID', name: '已现场支付', badge: { value: 0 }},
      ],
      tabCurrent: '',
    }
  },

  computed:{
  	curTab() {
  		return this.tabList.map(item => item.key).indexOf(this.tabCurrent) || 0;
  	}
  },

  onLoad() {
    this.getCount();
    this.getList();

    this.crossPage.$on('refreshMaintenanceList', () => {
      this.getCount();
      this.refreshList();
    })
  },

  // onUnload() {
  //   this.crossPage.$off('refreshMaintenanceList');
  // },

  methods: {
    getCount() {
    	this.$api.post('/engin/material/list/pageCount')
      .then(res => {
        if(!res.data) return false;
    		this.tabList[0].badge.value = res.data.qb || 0;
    		this.tabList[1].badge.value = res.data.dsp || 0;
    		this.tabList[2].badge.value = res.data.sptg || 0;
    		this.tabList[3].badge.value = res.data.spbh || 0;
    		this.tabList[4].badge.value = res.data.yqx || 0;
    		this.tabList[5].badge.value = res.data.yxczf || 0;
    	})
    },

    getList() {
    	this.loadStatus = 1;
    	this.$api.post('/engin/material/list/page', {
        pageNum: this.pageNum,
        pageSize: 10,
        examineStatus: this.tabCurrent
    	}).then(res => {
    		this.loadStatus = 0;
    		let list = res.data.records;
    		if (list.length < 10) {
    		  this.loadStatus = 2;
    		}
    		this.dataList = this.dataList.concat(list);
    	}).catch(() => {
    		this.loadStatus = 2;
    	}).finally(res => {
    		this.refresherTriggered = false;
    	})
    },

    refreshList() {
    	this.dataList = [];
    	this.pageNum = 1;
    	this.getList();
    },

    // 滚动到底部
    scrolltolower(e) {
    	if (this.loadStatus === 0) {
    		this.pageNum++;
    		this.getList();
    	}
    },

    // 触发下拉刷新
    refresherrefresh(e) {
    	this.refresherTriggered = true;
      this.getCount();
    	this.refreshList();
    },

    // 切换类型
    changeTab(item) {
    	this.tabCurrent = item.key;
      this.getCount();
    	this.refreshList();
    },

    toDetail(item) {
      this.$navToPage({
        url: `/packageHome/pages/maintenance/applyDetail?id=${item.orderId}`
      })
    }
  },
}

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

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}
.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    padding: 30rpx;
    .row {
      display: flex;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        flex: 1;
        font-size: 28rpx;
      }
      .status {
        font-size: 28rpx;
        color: $theme-color;
      }
    }
  }
}
</style>
