<template>
    <div class="main">
                <el-card shadow="hover" style="margin-bottom: 20px;"> 
                    <div class="mid">
                        <img src="../../../assets/images/chatgpt-next-web.svg" width="100" height="100"/>
                        <div style="padding: 14px; margin-left: 10px; line-height: 15px;">
                            <div>ChatGPT Next Web</div>
                            <div style="margin-top: 20px;font-size: 13px;">最常用的GPT Web客户端，只需填入本平台KEY即可使用</div>
                            <el-button style="margin-top: 20px;"   @click="goGptWeb()">直接使用</el-button><br>
                            <span style="font-size:12px;color:gray;">(KEY已经复制进剪切板，直接在设置中粘贴即可)</span>
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover"  style="margin-bottom: 20px;"> 
                    <div class="mid">
                        <img src="../../../assets/images/AMA.png" width="100" height="100"/>
                        <div style="padding: 14px; margin-left: 10px; line-height: 15px;">
                            <div>AMA</div>
                            <div style="margin-top: 20px;font-size: 13px;">全平台客户端，Your AI helping hand</div>
                            <el-button style="margin-top: 20px;"  @click="goAMA()">官网下载</el-button><br>
                            <el-button style="margin-top: 20px;"  @click="goAMASet()">一键配置</el-button><br>
                            <span style="font-size:12px;color:gray;">(请先安装好AMA，再点击此按钮，可一键设置AMA的serverUrl和key，免去手动配置)</span>
                        </div>
                    </div>
                </el-card>
    </div>
  </template>
  
  <script setup name="Index">
  import { getCertIndex } from '@/api/cert/index'
  import { ref } from 'vue';
  
  const { proxy } = getCurrentInstance();
  const modelList = ref([]);
  const serverUrl = ref("");
  const serverUrl2 = ref("");
  const userKey = ref("");
  const userBalance = ref(0);
  const userBalanceMonth = ref(0);
  
  function getIndex() {
    getCertIndex().then(response => {
      serverUrl.value = response.data.serverUrl
      serverUrl2.value = response.data.serverUrl2
      userKey.value = response.data.userKey
      userBalance.value = response.data.userBalance
      userBalanceMonth.value = response.data.userBalanceMonth
      modelList.value = response.data.modelList
    })
  }
  
  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("复制成功");
  }
  
  function NumFilter (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
  }

  function NumFilter4 (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(4)
    return realVal
  }

  function goGptWeb() {
    // 获取需要复制的元素以及元素内的文本内容
    const text = userKey.value;
    // 添加一个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("复制成功");
    window.open("https://next.api2gpt.com/")
  }

  function goAMA() {
    window.open("https://bytemyth.com/zh-CN/ama")
  }

  function goAMASet() {
    window.open("ama://set-api-key?key="+userKey.value+"&server="+serverUrl.value)
  }
  
  getIndex()
  </script>
  
  <style scoped lang="scss">
  .main {
    padding: 20px;
  }
  .main2 {
    margin-top: 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;
   }

   .mid {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
   }
  </style>
  
  