<template>
  <view>
    <view style="margin: 20px; text-align: center;">
      <text>姓名：{{ displayName }}</text>
    </view>
    <view class="container">
      <view class="item" :class="item.temperature == 1 ? 'abnormal' : 'normal'" v-for="item of displayResult">
        <view>
          <view class="record_time">
            <!-- 填报时间： -->
            {{ item.time }}
          </view>
          <view class="record_address">
            <!-- 地址： -->
            {{ item.address }}
          </view>
        </view>
        <view class="statusText">{{ item.temperature == 1 ? "异常" : "正常" }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import utils from '../../utils/utils'

export default {
  data() {
    return {
      ...Taro.getApp().globalData,
      userInfo: null,
      displayName: '',
      displayResult: [],
    }
  },

  onShow() {
    console.log('onShow')
    this.userInfo = Taro.getStorageSync("userInfo")
    this.displayName = this.userInfo.realname

    // 获取用户填报历史
    Taro.showLoading({ title: '加载中' })
    var that = this;
    Taro.request({
      url: `${this.baseUrl}/access/report/getRecordList`,
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded" //用于post
      },
      data: {
        userId: this.userInfo.id
      },
      success: function (d) {
        Taro.hideLoading()
        let result = d.data
        console.log("result", result)
        if (result.success) {
          console.log("result.data", result.data)
          that.displayResult = result.data.map(item => {
            // 时间友好化显示
            let t = new Date(item.time).getTime() + 8 * 3600 * 1000
            item.time = new Date(t).toISOString().substring(0, 19).replace("T", " ")
            return item
          })
        } else {
          Taro.showToast({
            title: "加载填报信息失败",
            icon: 'error',
            duration: 2000
          })
        }
      },
      fail: function () {
        Taro.hideLoading()
        Taro.showToast({
          title: "请求失败",
          icon: 'error',
          duration: 2000
        })
      },
      complete: function () {
        Taro.hideNavigationBarLoading();
      }
    })
  },

  onHide() {
    console.log('onHide')
  },

  methods: {
  }
}
</script>

<style>
.item {
  /* background-color: #dedede; */
  border-radius: 8px;
  margin: 20px 32px;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 130px;
  place-items: center;
  color: white;
}

.item.normal {
  background-color: green;
}

.item.abnormal {
  background-color: red;
}

.record_time {
  font-size: 30px;
}

.record_address {
  font-size: 25px;
}

.statusText {
  font-size: large;
  font-weight: bold;
}
</style>
