<template>
  <el-dialog class="api-view" v-model="showDialog" title="API详情" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="API名称" :span="2">{{ apiData.name }}</el-descriptions-item>
      <el-descriptions-item label="API路径" :span="2">
        <div class="api-path-container">
          <span class="domain">{{ originUrl }}/apihub/</span>
          <span class="path">{{ apiData.path }}</span>
          <el-tooltip content="复制API完整路径" placement="top">
            <el-icon class="copy-icon" @click="copyApiPath"><CopyDocument /></el-icon>
          </el-tooltip>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="请求方法">
        <el-tag :type="getMethodTagType(apiData.method)" size="small">{{ apiData.method }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag size="small" v-if="apiData.status === 'Draft'">草稿</el-tag>
        <el-tag size="small" type="success" v-else-if="apiData.status === 'Published'">已发布</el-tag>
        <el-tag size="small" type="info" v-else-if="apiData.status === 'Deprecated'">已废弃</el-tag>
        <span v-else>{{ apiData.status }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="数据源">{{ apiData.dataSourceName }}</el-descriptions-item>
      <el-descriptions-item label="版本">{{ apiData.version }}</el-descriptions-item>
      <el-descriptions-item label="SQL类型">
        <el-tag size="small" type="info" v-if="apiData.sqlType === 'query'">查询</el-tag>
        <el-tag size="small" type="warning" v-else-if="apiData.sqlType === 'procedure'">存储过程</el-tag>
        <span v-else>{{ apiData.sqlType }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="返回格式">{{ apiData.returnFormat }}</el-descriptions-item>
      <el-descriptions-item label="SQL内容" :span="2">
        <div class="code-block">{{ apiData.sqlContent }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="描述" :span="2">{{ apiData.description || "暂无描述" }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ apiData.createdAt }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ apiData.updatedAt }}</el-descriptions-item>
    </el-descriptions>

    <div class="section-title">参数定义</div>
    <el-table :data="apiData.parameters || []" style="width: 100%" border v-if="apiData.parameters && apiData.parameters.length">
      <el-table-column prop="name" label="参数名" width="150"></el-table-column>
      <el-table-column prop="type" label="类型" width="100"></el-table-column>
      <el-table-column label="必填" width="80">
        <template #default="scope">
          <el-tag size="small" type="success" v-if="scope.row.required">是</el-tag>
          <el-tag size="small" type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="defaultValue" label="默认值" width="120"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
    </el-table>
    <el-empty description="暂无参数" v-else></el-empty>

    <div class="section-title" v-if="apiData.plugins && apiData.plugins.length">关联插件</div>
    <el-table :data="apiData.plugins || []" style="width: 100%" border v-if="apiData.plugins && apiData.plugins.length">
      <el-table-column prop="pluginId" label="插件ID" width="100"></el-table-column>
      <el-table-column prop="config" label="插件配置"></el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="testApi">测试API</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import getOrigin from "/@/utils/origin";
import { CopyDocument } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const emit = defineEmits(["test"]);
const showDialog = ref(false);
const apiData = reactive({
  id: undefined,
  name: "",
  path: "",
  method: "",
  dataSourceId: undefined,
  dataSourceName: "",
  sqlType: "",
  sqlContent: "",
  parameters: [],
  returnFormat: "",
  version: "",
  status: "",
  plugins: [],
  description: "",
  createdAt: "",
  updatedAt: "",
});
const originUrl: string = getOrigin("");

// 根据请求方法返回不同的标签类型
const getMethodTagType = (method: string) => {
  switch (method?.toUpperCase()) {
    case "GET":
      return "success";
    case "POST":
      return "primary";
    case "PUT":
      return "warning";
    case "DELETE":
      return "danger";
    default:
      return "info";
  }
};

// 关闭对话框
const closeDialog = () => {
  showDialog.value = false;
};

// 测试API
const testApi = () => {
  closeDialog();
  emit("test", apiData);
};

// 复制API完整路径
const copyApiPath = () => {
  // 实现复制功能
  const fullPath = `${originUrl}/apihub/${apiData.path}`;

  // 使用Clipboard API复制到剪贴板
  navigator.clipboard.writeText(fullPath)
      .then(() => {
        ElMessage.success('已复制API完整路径到剪贴板');
      })
      .catch(() => {
        ElMessage.error('复制失败，请手动复制');
      });
};

// 打开对话框
const open = async (row: any) => {
  // 清空数据
  Object.keys(apiData).forEach((key) => {
    apiData[key] = undefined;
  });

  showDialog.value = true;

  // 实际使用时，应该调用API获取详细信息
  // const res = await api.apihub.getDetail({ id: row.id })
  // Object.assign(apiData, res)

  // 这里模拟直接使用传入的行数据
  Object.assign(apiData, row);
};

defineExpose({ open });
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.section-title {
  font-weight: bold;
  margin: 20px 0 10px;
  font-size: 16px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.code-block {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
/* 深色主题下的样式 */
[data-theme='dark'] .code-block {
  background-color: #2f3030;
  border: 1px solid #575656;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}


.api-path-container {
  display: inline-block;
  text-decoration: none;
  color: black; /* 设置整体文字颜色 */
  align-items: center; /* 垂直居中对齐 */
}
/* 深色主题下的样式 */
[data-theme='dark'] .api-path-container {
  display: inline-block;
  text-decoration: none;
  color: #fff; /* 设置整体文字颜色 */
}
.api-path-container .domain {
  background-color: #eee; /* 设置域名部分的背景颜色 */
  color: black; /* 设置域名部分的文字颜色 */
  padding: 2px 4px; /* 添加一些内边距 */
  display: inline-block;
  border-radius: 15px; /* 增加圆角 */
}
/* 深色主题下的样式 */
[data-theme='dark'] .api-path-container .domain{
  background-color: #3c3b3b; /* 设置域名部分的背景颜色 */
  color: white; /* 设置域名部分的文字颜色 */
  padding: 2px 4px; /* 添加一些内边距 */
  display: inline-block;
  border-radius: 15px; /* 增加圆角 */
}
.api-path-container .path {
  display: inline-block;
}
.copy-icon {
  cursor: pointer;
  color: var(--el-color-primary);
  transition: all 0.2s;
  font-size: 24px;
  margin-left: 8px;
  padding: 4px;
  border-radius: 4px;
}

.copy-icon:hover {
  transform: scale(1.1);
  color: var(--el-color-primary-dark-2);
  background-color: var(--el-color-primary-light-9);
}
</style>
