<template>
  <!-- 求助记录 -->
  <view class="help-record" :class="{'help-record--elder':$uiStyle==='elder'}">
    <view class="records">
      <view class="wrap" v-for="(item, index) in recordList" :key="index" @tap="helpDetail(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="info">求助时间：{{item.createTime}}</view>
        <view class="info">求助分类：{{item.msgTypeCn}}</view>
        <view class="info">求助门牌：{{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 { getHelpRecords } from '@/api/help';

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.getHelpRecords();
  },

  methods: {
    /* 查询求助记录 */
    getHelpRecords() {
      const data = {
        placeId: this.doorId,
        userId: this.userInfo.uuid,
        current: this.pageIndex,
        size: this.pageSize
      };
      getHelpRecords(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.getHelpRecords();
    },

    /* 跳转到求助详情页面 */
    helpDetail(val) {
      uni.navigateTo({
        url: `/subPages/pages/help/helpDetail?uuid=${val}`
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.help-record {
  padding: 20rpx;
  height: calc(100% - 50rpx);
  .records {
    height: calc(100% - 50rpx);
    overflow: auto;
    .wrap {
      padding: 30rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      .title {
        padding: 10rpx 0;
        .status {
          padding: 0 10rpx;
          margin-right: 10rpx;
          color: #ffffff;
          background-color: #e54e4e;
          opacity: 0.5;
          border-radius: 5rpx;
        }
        .content {
          color: #333333;
        }
      }
      .info {
        padding: 3rpx 0;
        color: #999999;
      }
    }
  }
}

.help-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>
