<template>
  <oa-scroll
    customClass="alarmMessage-container scroll-height"
    :pageSize="state.pageSize"
    :total="state.total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>
      <view class="content-area">
        <view :id="ind == allInfoList.length - 1 ? 'bottomInfo' : ''" v-for="(el, ind) in allInfoList" :key="ind" v-show="allInfoList.length > 0" @click="goContentDetails(el)">
          <view class="content-area-time font12">{{ el.time }}</view>
          <view class="content-area-center radius bg-white">
            <image class="content-area-center-img radius mb10" v-if="el.sitePhoto" :src="el.sitePhoto" />
            <view class="content-area-center-title mb10">{{ el.deviceName }}</view>
            <view class="content-area-center-cont">
              <span class="label">设备号：</span>
              {{ el.deviceId }}
            </view>
            <view class="content-area-center-cont">
              <span class="label">告警类型：</span>
              {{ proxy.$common.mapping("typeName", "typeCode", el.alarmType, alarmTypeData) }}
            </view>
            <view class="content-area-center-cont">
              <span class="label">告警时间：</span>
              {{ el.alarmTime }}
            </view>
            <view class="content-area-center-buttom font12">查看详情 </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { infoList } from "@/api/common/message.js";
import { baseAlarmList, getTypePage } from "@/api/business/fireIot/alarmManage.js";

const { proxy } = getCurrentInstance();

const state = reactive({
  loading: false,
  pageSize: 20,
  current: 1,
  total: 0,
  allInfoList: [],
  alarmTypeData: [],
});

const { allInfoList, alarmTypeData } = toRefs(state);

/**
 * @初始化
 */
function init() {
  getTypePage({
    current: 1,
    size: 1000,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      state.alarmTypeData = requset.data.records;
    }
  });

  state.loading = true;
  baseAlarmList({
    productCode: "",
    current: state.current,
    size: state.pageSize,
  })
    .then((requset) => {
      if (requset.status === "SUCCESS") {
        requset.data.records.forEach((el) => {
          state.allInfoList.push({
            sitePhoto: el.sitePhoto,
            time: proxy.$time.jktTimes(el.alarmTime),
            deviceId: el.deviceId,
            deviceName: el.deviceName,
            alarmType: el.alarmType,
            alarmTime: el.alarmTime,
          });
        });
        state.total = requset.data.total;
        state.loading = false;
      }
    })
    .catch((err) => {
      state.loading = false;
    });
}

/**
 * @跳转
 */
function goContentDetails(e) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/alarmManage/alarmDetails/index?deviceName=${e.deviceName}&alarmTime=${e.alarmTime}`);
}

/**
 * @scrollView加载数据
 */
function load() {
  state.pageSize += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.pageSize = 20;
  init();
}

onLoad((options) => {
  init();
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss" scoped>
.alarmMessage-container {
  .content-area {
    padding-bottom: 1px;

    &-time {
      padding: 10px 0;
      text-align: center;
      color: #909399;
    }

    &-center {
      margin: 0 10px 20px 10px;
      padding: 15px;
      overflow: hidden;

      &-img {
        display: flex;
        max-width: 100%;
        max-height: 100px !important;
        margin: 0 auto 15px auto;
      }

      &-title {
        margin: 0 0 15px 0;
        font-weight: 600;
        color: #000000;
      }

      &-cont {
        color: #909399;
      }

      &-buttom {
        float: right;
        color: #2a98ff;
      }
    }
  }
}
</style>
