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

const tableData = ref([])

axios.get("/api/token").then(res => {
  tableData.value = res.data.result
})

const input = ref('')
const value = ref('')
const options = [
  {
    value: 'token',
    label: 'token',
  },
  {
    value: 'uid',
    label: 'uid',
  },
  {
    value: 'pid',
    label: 'pid',
  },
  {
    value: 'secid',
    label: 'secid',
  },
  {
    value: 'dyid',
    label: 'dyid',
  },
  {
    value: 'key',
    label: 'key',
  },
  {
    value: 'comment_id',
    label: 'comment_id',
  }
]

const addToken = () => {
  axios.post('/api/token', {}, {
    params: {
      token: input.value,
      dedup_object: value.value
    }
  }).then(response => {
    if (response.data.result == "ok") {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      axios.get('/api/token').then(res => {
        tableData.value = res.data.result
      })
    }
  }).catch(error => {
    ElMessage.error(error.response?.data?.error)
  })
}

import {useCounterStore} from "@/stores/counter.ts";
import {useRouter} from "vue-router";

const router = useRouter()
const viewDetails = (row: any) => {
  useCounterStore().token = row.token
  router.push({
    name: "TokenDetail"
  })
}

var rowOut: any
const dedupObjectVisible = ref(false)
const dialogDedupObjectVisible = (row: any) => {
  rowOut = row
  dedupObjectVisible.value = true
}
const updateDedupObject = () => {
  dedupObjectVisible.value = false
  axios.put('/api/token', {}, {
    params: {
      token: rowOut.token,
      dedup_object: value.value
    }
  }).then(res => {
    if (res.data.result == "ok") {
      ElMessage({
        message: '更改成功',
        type: 'success',
      })
      axios.get('/api/token').then(res => {
        tableData.value = res.data.result
      })
    }
  }).catch(error => {
    ElMessage.error(error.response?.data?.error)
  })

}

const deleteToken = (row: any) => {
  axios.delete('/api/token', {
    params: {
      token: row.token
    }
  }).then(res => {
    if (res.data.result == "ok") {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      axios.get('/api/token').then(res => {
        tableData.value = res.data.result
      })
    }
  }).catch(error => {
    ElMessage.error(error.response?.data?.error)
  })
}
</script>

<template>
  <!--添加Token-->
  <el-input v-model="input" style="width: 200px" placeholder="请输入Token名称"/>
  <el-select v-model="value" placeholder="选择去重对象" style="width: 200px">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
  <el-button type="primary" @click="addToken">添加Token</el-button>

  <!--Token列表-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="token" label="Token" width="180"/>
    <el-table-column prop="dedup_object" label="去重对象" width="180"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="viewDetails(scope.row)">查看详细</el-button>
        <el-button @click="dialogDedupObjectVisible(scope.row)" type="primary">更改去重对象</el-button>
        <el-popconfirm
            width="180"
            title="确认删除此Token吗"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="deleteToken(scope.row)"
        >
          <template #reference>
            <el-button type="danger">删除此Token</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>
  
  <el-dialog v-model="dedupObjectVisible" title="更改去重对象" width="400">
    <el-select v-model="value" placeholder="选择去重对象" style="width: 200px">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <template #footer>
      <el-button type="primary" @click="updateDedupObject">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>