<template>
    <div class="main">
         <el-card class="box-card">
             <template #header>
                 <div class="card-header">
                     <span>KEY 管理</span>
                     <div><el-button type="success" style="margin-right: 10px;" @click="handleAdd()">添加一个</el-button></div>
                 </div>
             </template>
             <div style="margin-top: 10px; margin-bottom: 10px;" v-for="(obj,index) in keyList" :obj="obj" :index="index" :key="obj.id">
                <el-input :value="'AK-'+ obj.id"  size="large" readonly @click.stop="handleCopy('AK-'+obj.id)">
                <template #prepend>Api Server{{ index + 1 }}:</template>
                <template #append>
                    <el-button @click="handleDel(obj.id)">删除</el-button>
                </template>
                </el-input>
             </div>
           </el-card>
    </div>
  </template>
  
  <script setup name="key">
    import { ref } from 'vue';
    import { delKey,getKeyList,generateKey } from "@/api/cert/apiToken";

    const { proxy } = getCurrentInstance();
    const keyList = ref([]);

    function Init(){
        getKeyList().then(response => {
            keyList.value = response.data
        })
    }

    function handleAdd(){
        generateKey().then(response => {
            proxy.$modal.msgSuccess("添加成功");
            Init();
        })
    }

    function handleDel(key){
        proxy.$modal.confirm('是否确认删除KEY:AK-'+key+'？').then(function() {
            return delKey(key);
        }).then(() => {
            Init();
            proxy.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    }

    function handleCopy(id){
        // 获取需要复制的元素以及元素内的文本内容
        const text = id;
        // 添加一个input元素放置需要的文本内容
        const input = document.createElement("input");
        input.value = text;
        document.body.appendChild(input);
        // 选中并复制文本到剪切板
        input.select();
        document.execCommand("copy");
        // 移除input元素
        document.body.removeChild(input);
        proxy.$modal.msgSuccess("复制成功");
    }


    Init();
  </script>
  
  <style scoped lang="scss">
  .main {
     padding: 20px;
  }
    .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .text {
    font-size: 14px;
    }

    .item {
    margin-bottom: 18px;
    }

    .info {
        font-size: 15px;
        color: #606266;
    }
</style>


  
  