<template>
  <el-card class="generate-sdk" shadow="never">
    <div class="instructions-section">
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="header">
            <h3 class="title">SDK生成说明</h3>
          </div>
          <div class="description">
            <p>1、每个实例可以同时生成10个SDK密钥串，用于SDK启动时候调用。</p>
            <p class="indent">启用中:该SDK生效，可正常使用。</p>
            <p class="indent">已停用:停用的SDK无法获得调度信息，停用超过24小时可删除。</p>

            <p>2、开场动画</p>
            <p class="indent">移动端SDK接入无开场动画，开场动画仅作为PC版开启显示。</p>
            <p class="indent">如套餐已购买跳过开场动画，请在开启功能后生成新的SDK，将自动跳过。</p>

            <p>3、端口冲突</p>
            <p class="indent">当发生端口冲突时，SDK的处理方式选择，推荐为【提示】</p>

            <p>4、调度区域</p>
            <p class="indent">您的用户主要分布于国内，请选择国内，如果大部分分布于海外，请选择全球。</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="header">
            <h3 class="title">SDK名词解释</h3>
          </div>
          <div class="description">
            <p>Q:SDK是什么:</p>
            <p>A:SDK是软件开发工具包(Software Development Kit)</p>
            <p class="indent">接入SDK需要有程序的源代码，比如登录器，插件辅助等等。</p>
            <p class="indent">如果您是软件的开发者，我们推荐您通过SDK的方式接入游戏盾。</p>
            <p class="indent">游戏盾还为开发者们保留权限推荐人功能，持续长久收益，欢迎接入。</p>
            <p>Q:登录器生成器上有填写SDK的位置，可以生成后填写吗?</p>
            <p>A:请与开发者确认是否该SDK属于游戏盾。</p>
          </div>

          <div class="actions-right">
            <el-button type="primary" class="is-gradient">一键生成SDK</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="divider"></div>

    <el-table :data="tableData" style="width: 100%" class="sdk-table">
      <el-table-column prop="id" label="#" width="60" />
      <el-table-column prop="animationType" label="动画类型" width="100" />
      <el-table-column prop="dispatchRegion" label="调度区域" width="100" />
      <el-table-column prop="portConflict" label="端口冲突" width="100" />
      <el-table-column prop="followExit" label="跟随退出" width="100" />
      <el-table-column prop="generateTime" label="生成时间" width="180" />
      <el-table-column prop="secretKey" label="密钥" show-overflow-tooltip />
      <el-table-column label="SDK状态" width="260" fixed="right">
        <template #default="{ row }">
          <el-button v-if="row.status === 'enabled'" class="status-btn" size="small" @click="toggleStatus(row)">
            启用(点击切换禁用)
          </el-button>
          <el-button v-else type="danger" size="small" @click="toggleStatus(row)">
            已禁用(点击切换启用)
          </el-button>
          <el-button type="primary" size="small" class="is-gradient" @click="copyKey(row.secretKey)">
            复制密钥
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const tableData = ref([
  {
    id: 31,
    animationType: '静态',
    dispatchRegion: '全球',
    portConflict: '静默',
    followExit: '关闭',
    generateTime: '2026-02-25 20:34:30',
    secretKey: 'Prrwr5SO86ft73mvPqblp/g1cjfV16eyw+PlVvhjSl3FuR+kL26qN1jN7CLz7BkxggGDES//3bl',
    status: 'enabled'
  }
])

const toggleStatus = (row: any) => {
  row.status = row.status === 'enabled' ? 'disabled' : 'enabled'
  ElMessage.success(`SDK状态已${row.status === 'enabled' ? '启用' : '禁用'}`)
}

const copyKey = (key: string) => {
  navigator.clipboard.writeText(key).then(() => {
    ElMessage.success('密钥已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}
</script>

<style lang="scss" scoped>
.generate-sdk {
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border-color);
  border-radius: 8px;
  color: var(--admin-text-primary);

  :deep(.el-card__body) {
    padding: 32px;
  }

  .instructions-section {
    .header {
      margin-bottom: 24px;

      .title {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
        color: var(--admin-text-primary);
      }
    }

    .description {
      font-size: 13px;
      color: var(--admin-text-secondary);
      line-height: 1.8;

      p {
        margin: 0 0 4px 0;
      }

      .indent {
        padding-left: 12px;
        margin-bottom: 8px;
      }
    }

    .actions-right {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }
  }

  .divider {
    height: 1px;
    background-color: var(--admin-border-color);
    margin: 32px 0;
  }

  .sdk-table {
    :deep(th.el-table__cell) {
      background-color: transparent;
      color: var(--admin-text-secondary);
      border-bottom: 1px solid var(--admin-border-color);
      font-weight: 500;
    }

    :deep(td.el-table__cell) {
      border-bottom: 1px solid var(--admin-border-color);
      background-color: transparent;
    }

    :deep(.el-table__inner-wrapper::before) {
      display: none;
    }

    .status-btn {
      background-color: #06b6d4;
      border-color: #06b6d4;
      color: #fff;

      &:hover {
        background-color: #0891b2;
        border-color: #0891b2;
      }
    }
  }
}
</style>
