<script setup lang="ts">
import {ref} from 'vue'
import axios from "@/axios.ts";
import {useRoute} from "vue-router"
import {ElMessage} from "element-plus";

const token = ref(useRoute().query.token)
const input = ref(useRoute().query.token)
const result = ref()

const inputChange = () => {
  if (input.value != null && input.value != '') {
    axios.get('/api/token/info', {
      params: {
        token: input.value
      }
    }).then(res => {
      result.value = res.data.result
      token.value = input.value
      ElMessage({
        message: '更改成功',
        type: 'success',
      })
    }).catch(error => {
      ElMessage({
        message: 'Token输入错误',
        type: 'error',
      })
    })
  }
}

const getInfo = () => {
  if (token.value != null && token.value != '') {
    axios.get('/api/token/info', {
      params: {
        token: token.value
      }
    }).then(res => {
      result.value = res.data.result
    })
  }
}

getInfo()
setInterval(getInfo, 5000)
</script>


<template>
  <b>当前Token：</b>
  <el-input
      v-model="input"
      style="width: 240px"
      placeholder="输入Token"
      clearable
      @change="inputChange"
  />

  <el-divider/>
  <b>Token信息（每5秒刷新）</b>
  <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
  <el-descriptions
      direction="vertical"
      :column="4"
      border
  >
    <el-descriptions-item label="去重对象">{{ result?.dedup_object }}</el-descriptions-item>
    <el-descriptions-item label="上传数据格式">{{ result?.data_format }}</el-descriptions-item>
    <el-descriptions-item label="去重记录值">{{ result?.dedup_items_number }}</el-descriptions-item>
    <el-descriptions-item label="Redis中数据条数">{{ result?.cache_list_number }}</el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>

</style>