<!--
 * @Description: 设备异常记录
 * @Author: 空白格
 * @Date: 2022-08-04 23:10:11
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-23 14:01:25
 * @FilePath: \parking_operation\pages\patrolManagement\deviceAbnormalRecords\deviceAbnormalRecords.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
<template>
  <view class="records">
    <view class="records-tabs">
      <view class="records-tabs-item" v-for="(tab, index) in tabList" :key="index" :class="{ active: tabCur === tab.value }" @click="tabClick(tab)">
        <view class="records-tabs-item-text">{{ tab.label }}</view>
      </view>
    </view>
    <scroll-view class="records-scroll" :scroll-y="true">
      <view class="records-list" v-if="recordList.length">
        <view class="records-list-item" v-for="(item, index) in recordList" :key="index">
          <view class="records-list-item-top">
            <template v-if="tabCur === 3">
              <view class="rlit-item"
                >停车场：<text>{{ item.roadName }}</text></view
              ></template
            >
            <template v-else>
              <view class="rlit-item"
                >路段：<text>{{ item.roadName }}</text></view
              >
              <view class="rlit-item"
                >泊位号：<text>{{ item.roadNo }}</text></view
              >
            </template>
            <view class="rlit-item"
              >异常详情：<text>{{ item.exceprionDes }}</text></view
            >
          </view>
          <view class="records-list-item-bottom">
            <view class="rlib-left">上报：{{ $u.timeFormat(item.createTime, 'mm月dd日hh:MM') }}</view>
            <view class="rlib-right" @click="viewDetails(item)">查看</view>
          </view>
        </view>
      </view>
      <view class="records-empty" v-else>
        <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
      </view>
      <u-loadmore v-if="recordList.length" :status="status" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { label: '地磁', value: 1 },
        { label: '车位锁', value: 2 },
        { label: '停车场', value: 3 }
      ],
      recordList: [],
      status: 'loadmore',
      page: 1,
      tabCur: 1
    };
  },
  onShow() {
    this.page = 1;
    this.recordList = [];
    this.getRecordList();
  },
  methods: {
    getRecordList() {
      uni.$u.api.deviceAbnormalApi
        .getDeviceAbnormalListApi({
          pageNum: this.page,
          pageSize: 15,
          deviceType: this.tabCur
        })
        .then((res) => {
          if (res.code === 200) {
            this.recordList = this.recordList.concat(res.data.rows);
            setTimeout(() => {
              if (this.page >= res.data.pages) this.status = 'nomore';
              else this.status = 'loading';
            }, 1000);
          }
        });
    },
    recordClick(item) {
      uni.$u.route({
        url: 'pages/patrolManagement/deviceAbnormalRecords/recordsDetails/recordsDetails',
        params: {
          id: item.id
        }
      });
    },
    tabClick(item) {
      this.tabCur = item.value;
      this.page = 1;
      this.recordList = [];
      this.getRecordList();
    },
    viewDetails(item) {
			uni.$u.route({
        url: 'pages/patrolManagement/deviceAbnormalRecords/recordsDetails/recordsDetails',
        params: {
          id: item.id,
					type: this.tabCur
        }
      });
		}
  },
  onPullDownRefresh() {
    this.recordList = [];
    this.page = 1;
    this.status = 'loading';
    this.getRecordList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.page >= 100) return;
    this.status = 'loading';
    this.page = ++this.page;
    this.getRecordList();
  }
};
</script>

<style lang="scss">
page {
  min-height: calc(100vh - 44px);
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
@import './deviceAbnormalRecords.scss';
</style>
