<template>
  <div class="tagclass" style="display:inline;">
    <el-tag type="info">总日志数</el-tag>
    <span>&nbsp;</span>
    <el-tag type="success">{{ allLogsCount }}</el-tag>
    <span>&nbsp;</span>
    <el-input-number v-model="nowPage" min="1" :max="maxPage" size="small"
                     step-strictly="true"
                     @change="onChangeStepper">
      <template #suffix>
        <span>/{{ maxPage }}</span>
      </template>
    </el-input-number>
  </div>
  <t-list>
    <div v-for="user in logs" :key="user.ID" class="user-list-div"
         style="position: relative; width: auto; padding: 3px; height:48px; border-radius: 3px; margin: 2px;">

      <span class="user-name" style="position: absolute; top: 3px; left: 4px; font-size: 12px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        {{ user.ID }}:
        <span style="font-size: 14px; font-weight: 500">{{ user.UserName }} | {{ user.Database }}</span>
      </span>

      <span class="user-ip" style="position: absolute; top: 25px; left: 4px; font-size: 12px; "></span>

      <span class="user-time" style="position: absolute; bottom: 3px; left: 4px; font-size: 11px; ">{{ user.Ip }} | {{ user.Location }}</span>

      <span class="user-location" style="position: absolute; top: 3px; right: 4px; font-size: 11px; ">
        <span>
          <icon name="logo-android-filled" v-if="user.Device == 'Android'" />
          <icon name="logo-windows-filled" v-else-if="user.Device == 'windows'" />
          <icon name="logo-apple-filled" v-else-if="user.Device == 'ios' || user.Device == 'Mac'" />
          <icon name="help-circle-filled" v-else />
          <!-- {{user.Device}}-->
        </span>
        | {{ user.Browser }}
      </span>

      <span class="user-location" style="position: absolute; bottom: 3px; right: 4px; font-size: 11px; ">
        {{ user.CreationTime }}
      </span>

    </div>

  </t-list>
</template>
<script setup>
  import { ref, reactive, onMounted, inject } from 'vue';
  import { Toast } from 'tdesign-mobile-vue';
  import { Icon } from 'tdesign-icons-vue-next';

  const $http = inject('$http')


  onMounted(() => {
    getPage();
    loading("");
  })
  const maxPage = ref(1)
  const nowPage = ref(1)
  const allLogsCount = ref(null)
  const logs = ref([])
  const lastId = ref(0)
  // 翻页
  const onChangeStepper = (value) => {
    if (value == 1) {
      nowPage.value = 1
      lastId.value = 0
      loading('')
    } else {
      nowPage.value = value
      loading(lastId.value)
    }
  }
  const getPage = () => {
    let requestBody = {
      key: "getLoginLogCount",
      CmdType: "sys",
      DBQueryData: [],
    }
    $http.post('DataHandle/R_InfoCommon', requestBody)
      .then(rs => {
        //console.log(rs)
        if (rs.data.isok) {
          allLogsCount.value = rs.data.response[0].LogCount
          maxPage.value = Math.ceil(rs.data.response[0].LogCount / 25)
        } else {
          Toast(rs.data.message)
        }
      })
      .catch(error => {
        // 处理错误情况
        console.error(error);
      })
  }
  // 加载页面
  const loading = (last_id) => {
    let requestBody = {
      key: "getLoginLog",
      CmdType: "",
      DBQueryData: [],
      isFunction: true,
      FunParameters: [last_id == 0 ? "" : "" + last_id]
    }
    //console.log(JSON.stringify(requestBody))
    $http.post('DataHandle/R_InfoCommon', JSON.stringify(requestBody))
      .then(rs => {
        //console.log(rs)
        if (rs.data.isok) {
          logs.value = rs.data.response.map(item => {
            return {
              ...item,
              CreationTime: formatDateTime(item.CreationTime)
            }
          })
          if (rs.data.response.length == 25) {
            lastId.value = rs.data.response[24].ID
          }
          //console.log(lastId.value)
        } else {
          Toast(rs.data.message)
        }
      })
      .catch(error => {
        // 处理错误情况
        console.error(error);
      })
  }
  const formatDateTime = (isoString) => {
    const date = new Date(isoString);

    // 使用padStart确保时间部分是两位数
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');

    // 拼接成指定的格式
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

</script>

<style scoped>
  .user-list-div {
    border: 1px solid #E9E9E960;
    background-color: #80808030;
    transition: all 0.3s ease;
  }

    .user-list-div:hover {
      border-color: #409eff;
      background-color: #80808010;
      /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  可选阴影 */
    }

  @media (min-width: 1024px) {
    .tagclass {
      margin-top: 5px
    }
  }
</style>
