<template>
  <!-- 报警历史 -->
  <div class="alarmHistoryPage flex-col">
    <s-header :name="$t('alarmHistory.alarmHistory')" :noback="false"></s-header>
    <div class="alarmHistoryBox flex-col">
      <van-list v-model:loading="loading" v-model:error="error" error-text="{{$t('alarmHistory.requestFailed')}}"
        :finished="finished" :finished-text="$t('alarmHistory.noMore')" offset="300" :immediate-check="false"
        @load="onLoad">
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4"></div>
              <span class="flex-col txt2">{{ $t('alarmHistory.common') }}<span class="discountNumber">{{ alarmHistoryTotal
              }}</span>{{ $t('alarmHistory.recordsTotal') }}</span>
            </div>
          </div>
          <div class="flex-col">
            <div class="main5 flex-row justify-between" @click="searchClick">
              <img class="label2 o-mr-5" src="../../assets/device/searchIcon.png" />
            </div>
          </div>
        </div>
        <div class="listBox">
          <div v-for="(item, index) in alarmHistoryList" :key="index" class="listItem">
            <div class="itemBox">
              <div class="itemRow">
                <span class="itemTitle">{{ $t('alarmHistory.affiliatedMerchants') }}:&nbsp;</span>{{ item.adminUserName }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('alarmHistory.equipmentNo') }}:&nbsp;</span>{{ item.clientId }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('alarmHistory.equipmentName') }}:&nbsp;</span>{{
                  showDeviceName(item.equipmentId)
                }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('alarmHistory.creationTime') }}:&nbsp;</span>{{
                  showDateTime(item.occurrenceTime)
                }}
              </div>
              <div class="itemRow">
                <span class="itemTitle">{{ $t('alarmHistory.alarmContent') }}:&nbsp;</span>{{ item.alarmContent }}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <historySearch ref="searchRef" @search="search($event)"></historySearch>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import historySearch from './historySearch.vue';
import { getAlarmHistoryList, getEquipmentList } from "@/service/alarmHistory";
import { getLoginUser } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";
import { showFailToast } from "vant";
import { useI18n } from 'vue-i18n';
import { styleUrl } from "../../common/js/utils";

export default {
  components: { sHeader, historySearch },
  setup() {
    const { t } = useI18n();
    const user = getLoginUser();
    const searchRef = ref(null);
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    const alarmHistoryList = ref([]); // 列表集合
    const alarmHistoryTotal = ref(0); // 列表总数
    let searchParams = reactive({
      adminId: "", // 当前登录账户的id
      clientId: "", // 设备编号
      current: 1, // 当前页
      size: 20, // 页大小
      name: "", // 机器名称
      // startDate: null, // 开始时间
      // endDate: null, // 结束时间
    });
    const equipmentSourceList = ref([]); // 列表集合
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('alarmHistory');
      getDeviceListFun();
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
      }
    });
    // 获取设备列表
    const getDeviceListFun = async () => {
      const { data } = await getEquipmentList({ adminId: user.id });
      if (data.code === "00000") {
        // deviceList.value = data.data.map(item => {
        //   return item.name
        // });
        // deviceList.value.unshift('所有设备');
        equipmentSourceList.value = data.data;
        equipmentSourceList.value.unshift({ name: t('alarmHistory.allDevices'), id: null });
        console.log(equipmentSourceList);
      }
    };
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 查询列表
    const searchGetList = () => {
      alarmHistoryList.value = [];
      searchParams.current = 1;
      getList();
    };
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
      }
    };
    // 获取报警列表数据
    const getList = async () => {
      const { data } = await getAlarmHistoryList(
        Object.assign({}, searchParams)
      );
      if (data.code === "00000") {
        // 列表值叠加
        alarmHistoryList.value = alarmHistoryList.value.concat(
          data.data.records
        );
        alarmHistoryTotal.value = data.data.total;
        if (alarmHistoryList.value.length === data.data.total) {
          finished.value = true;
        }
        loading.value = false;
      } else {
        showFailToast(data.message);
      }
    };
    const showDateTime = (date) => {
      // return date
      //   ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
      //   : "";
      if (!date) {
        return "";
      }
      const currentDate = new Date(dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss"));
      return dateUtil.timeZoneDate(currentDate);
    };
    const showDeviceName = (id) => {
      const device = equipmentSourceList.value.filter((v) => v.id === id);
      if (device && device.length > 0) {
        return device[0].name;
      }
      return id;
    };
    // 搜索点击
    const searchClick = () => {
      searchRef.value.showSearch();
    };
    return {
      search,
      searchRef,
      searchClick,
      loading,
      error,
      finished,
      onLoad,
      alarmHistoryList,
      alarmHistoryTotal,
      showDateTime,
      showDeviceName,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>
