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

const tableData = ref([])
const input = ref('')
const value = ref('')
const dataFormat = ref('')
const inputPassWord = ref('')
const router = useRouter()
var rowOut: any
const dedupObjectVisible = ref(false)
const dataFormatVisible = ref(false)
const inputNotes = ref("")
const NotesVisible = ref(false)
const options = [
  {
    value: 'uid',
  },
  {
    value: 'secid',
  },
  {
    value: 'pid',
  },
  {
    value: 'comment_id',
  },
  {
    value: 'dyid',
  }
]

const dataFormatOptions = [
  {
    value: 'uid----secid----pid----comment_id',
  }, {
    value: 'uid----secid',
  }, {
    value: 'dyid',
  }
]


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

const addToken = () => {
  axios.post('/api/token', {}, {
    params: {
      token: input.value,
      dedup_object: value.value,
      data_format: dataFormat.value,
      notes: inputNotes.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)
  })
}

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

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,
      data_format: rowOut.data_format,
      notes: rowOut.notes,
    }
  }).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 dialogDataFormatVisible = (row: any) => {
  rowOut = row
  dataFormatVisible.value = true
}

const updateDataFormat = () => {
  dataFormatVisible.value = false
  axios.put('/api/token', {}, {
    params: {
      token: rowOut.token,
      dedup_object: rowOut.dedup_object,
      data_format: dataFormat.value,
      notes: rowOut.notes,
    }
  }).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 dialogNotesVisible = (row: any) => {
  rowOut = row
  NotesVisible.value = true
}

const updateNotes = () => {
  NotesVisible.value = false
  axios.put('/api/token', {}, {
    params: {
      token: rowOut.token,
      dedup_object: rowOut.dedup_object,
      data_format: rowOut.data_format,
      notes: inputNotes.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)
  })
}

const checkPassword = () => {
  if (inputPassWord.value == "haha") {
    ElMessage({
      message: '密码正确',
      type: 'success',
    })
    useCounterStore().isAdmin = true
  } else {
    ElMessage.error('密码错误')
  }
}
</script>

<template>
  <!--非管理员-->
  <div v-if="!useCounterStore().isAdmin" style="margin: auto auto; max-width: 400px">
    <el-alert title="您没有权限访问此页面，输入管理员密码" type="error" :closable="false" show-icon/>
    <p></p>
    <el-input v-model="inputPassWord" style="width: 400px" placeholder="请输入管理员密码" @change="checkPassword"/>
    <p></p>
    <el-button type="primary" @click="checkPassword">确认</el-button>
  </div>

  <!--管理员-->
  <div v-if="useCounterStore().isAdmin">
    <!--添加Token-->
    <el-input v-model="input" style="width: 150px" placeholder="请输入Token名称"/>
    <el-select v-model="value" placeholder="选择去重对象" style="width: 150px">
      <el-option
          v-for="item in options"
          :key="item.value"
          :value="item.value"
      />
    </el-select>
    <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 280px">
      <el-option
          v-for="item in dataFormatOptions"
          :key="item.value"
          :value="item.value"
      />
    </el-select>
    <el-input v-model="inputNotes" style="width: 200px" placeholder="请输入备注"/>
    <el-button type="primary" @click="addToken">添加Token</el-button>

    <!--Token列表-->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="token" label="Token" width="150"/>
      <el-table-column prop="dedup_object" label="去重对象" width="150"/>
      <el-table-column prop="data_format" label="上传数据格式" width="280"/>
      <el-table-column prop="notes" label="备注" width="200"/>
      <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-button @click="dialogDataFormatVisible(scope.row)" type="primary">更改数据格式</el-button>
          <el-button @click="dialogNotesVisible(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"
            :value="item.value"
        />
      </el-select>
      <template #footer>
        <el-button type="primary" @click="updateDedupObject">
          确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="dataFormatVisible" title="更改数据格式" width="400">
      <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 280px">
        <el-option
            v-for="item in dataFormatOptions"
            :key="item.value"
            :value="item.value"
        />
      </el-select>
      <template #footer>
        <el-button type="primary" @click="updateDataFormat">
          确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="NotesVisible" title="更改备注" width="400">
      <el-input v-model="inputNotes" style="width: 200px" placeholder="请输入备注"/>
      <template #footer>
        <el-button type="primary" @click="updateNotes">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>