<template>
  <oa-scroll
    customClass="scroll-height"
    :pageSize="state.pageSize"
    :total="state.total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    @load="load"
    @refresh="refresh"
  >
    <template #default>
      <view class="loginLog-container" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
        <view class="container-area">
          <view class="container-area-content bg-white" v-for="data in state.dataList" :key="data">
            <view class="container-area-content-img">
              <image style="width: 35px; height: 35px" :src="'http://192.168.123.165:9300/statics/images/404.png'" mode="aspectFill"></image>
            </view>
            <view class="container-area-content-center">
              <view
                :style="{
                  fontSize: '14px',
                  fontWeight: 600,
                  color: data.status == '0' ? '#16bf00' : 'red',
                }"
                >{{ data.status == "0" ? "登录成功" : "登录失败" }}</view
              >
              <view>登陆时间：{{ data.accessTime }}</view>
              <view>访问IP：{{ data.ipaddr }}</view>
              <!-- <view>登录地址：未知</view>
              <view>登录方式：未知</view>
              <view>系统型号：未知</view> -->
              <view v-if="data.status == '1'">登录失败原因：{{ data.msg }}</view>
            </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 { loginLogList } from "@/api/mine/secure/loginLog.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataList: [],
  pageNum: 1,
  pageSize: 20,
  total: 0,
});

/**
 * @初始化
 */
function init() {
  selectListApi();
}

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

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

/**
 * @通知公告列表
 * @api接口调用
 */
function selectListApi() {
  loginLogList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    userName: useStore.user.userName,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      state.dataList = requset.data.rows;
      state.total = requset.data.total;
    }
  });
}

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

onReady(() => {});

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

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>
<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.loginLog-container {
  padding-bottom: 1px;

  .container-area {
    &-content {
      display: flex;
      border-bottom: 0.5px solid #d6d7d9;

      &-img {
        margin: auto 15px auto 15px;
      }

      &-center {
        width: 100%;
        font-size: 12px;
        color: #909399;
        padding: 15px 0 15px 0;
      }
    }
  }
}
</style>
