<template>
  <!-- 反映记录 -->
  <view class="alarm-record" :class="{'alarm-record--elder':$uiStyle==='elder'}">
    <view class="records">
      <view class="wrap" v-for="(item, index) in recordList" :key="index" @tap="alarmDetail(item.uuid)">
        <view class="title">
          <text class="status" style="background:#e54e4e" v-if="item.dataStatus===0">待处理</text>
          <text class="status" style="background:#3ea545" v-else>已处理</text>
          <text class="content">{{ item.context }}</text>
        </view>
        <view class="way">
          <text>反映渠道：{{item.telephone}}</text>
          <text>反映方式：{{item.callType===1?'电话反映':'静默反映'}}</text>
        </view>
        <view class="time">反映时间：{{ item.createTime }}</view>
        <view class="doorplate">反映门牌：{{ item.address }}</view>
      </view>
      <view v-if="total===0" class="noContent">暂无反映记录</view>
    </view>
    <view class="page" v-if="showPage">
      <uni-pagination
        :total="total"
        :current="pageIndex"
        :pageSize="pageSize"
        @change="handelPageChanged"/>
    </view>
  </view>
</template>

<script>
import { getAlarmRecords } from '@/api/alarm';

export default {
  data() {
    return {
      userInfo: {},
      doorId: '',
      recordList: [],
      showPage: false,
      pageIndex: 1,
      pageSize: 5,
      total: 0,
    };
  },

  onLoad(options) {
    this.userInfo = uni.getStorageSync('userInfo') || {};
    const globalData = getApp().globalData;
		this.doorId = globalData.doorInfo.baseInfo.doorplateCode;
    this.getAlarmRecords();
  },

  methods: {
    /* 查询反映记录 */
    getAlarmRecords() {
      const data = {
        placeId: this.doorId,
        userId: this.userInfo.uuid,
        current: this.pageIndex,
        size: this.pageSize
      };
      getAlarmRecords(data).then(res =>{
        this.total = res.total;
        this.recordList = res.data;
        if (this.total >= 3) {
          this.showPage = true;
        }
      })
    },

    /* 修改页码 */
    handelPageChanged(event) {
      this.pageIndex = event.current;
      this.getAlarmRecords();
    },

    /* 跳转到反映详情页面 */
    alarmDetail(val) {
      uni.navigateTo({
        url: `/subPages/pages/alarm/alarmDetail?uuid=${val}`
      });
    }
  }
};
</script>

<style>
  @import './alarmRecord.css';
</style>

<style lang="scss" scoped>
  .alarm-record--elder {
    .wrap {
      .title {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
      .way, .time, .doorplate {
        font-size: calc(11px * $zlb-elder-font-scale);
      }
    }
    .noContent {
      font-size: calc(13px * $zlb-elder-font-scale);
    }
  }
</style>
