<script setup lang="ts">
import {useCounterStore} from "@/stores/counter.ts";
import {ref, watch} from 'vue'
import axios from "@/axios.ts";

const result = ref()
const value = ref('')

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

const deleteDedup = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      dedup_bf: true
    }
  }).then(res => {
    getInfo()
  })
}
const deleteRedis = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      cache_list: true
    }
  }).then(res => {
    getInfo()
  })
}

getInfo()
setInterval(getInfo, 5000)

watch(value, (newValue) => {
  console.log(newValue)
  getInfo()
})

interface optionsType {
  value: string
}

const options = ref([] as optionsType[])
value.value = useCounterStore().token

axios.get('/api/token').then(res => {
  if (res.status == 200) {
    res.data.result.forEach((item: any) => {
      options.value.push({"value": item.token})
    })
  }
})
</script>


<template>
  <b>当前Token：</b>
  <el-select v-model="value" placeholder="选择Token" style="width: 240px">
    <el-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
    />
  </el-select>


  <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?.dedup_items_number }}</el-descriptions-item>
    <el-descriptions-item label="Redis中数据条数">{{ result?.cache_list_number }}</el-descriptions-item>
  </el-descriptions>

  <div v-if="useCounterStore().isAdmin">
    <p><b>管理</b></p>

    <el-button type="danger" @click="deleteDedup">删除去重记录值</el-button>
    <el-button type="danger" @click="deleteRedis">删除Redis数据</el-button>
  </div>
</template>

<style scoped>

</style>