<template>
  <div class="db-manage-container">
    <el-row :gutter="20">
      <!-- 左侧数据库表列表 -->
      <el-col :span="4">
        <div class="table-list">
          <h3>数据库表</h3>
          <el-scrollbar height="400px">
            <el-tree
              :data="tables"
              node-key="name"
              :props="defaultProps"
              @node-click="handleTableClick"
            />
          </el-scrollbar>
        </div>
      </el-col>

      <!-- 右侧主内容区 -->
      <el-col :span="20">
        <!-- 顶部下拉选择框 -->
        <el-row :gutter="20" class="mb-20">
          <el-col :span="12">
            <el-select
              v-model="selectedDatabase"
              filterable
              placeholder="请选择数据库"
              class="w-100"
            >
              <template #prefix>
                <el-icon><search /></el-icon>
              </template>
              <el-option
                v-for="item in databases"
                :key="item.ID"
                :label="item.Name"
                :value="item.ID"
              >
                <span>{{ item.Name }}</span>
                <span class="option-actions">
                  <el-icon @click.stop="editDatabase(item)"><edit /></el-icon>
                  <el-icon @click.stop="deleteDatabase(item)"><delete /></el-icon>
                </span>
              </el-option>
              <template #append>
                <el-button icon="plus" @click="showAddDatabaseDialog" />
              </template>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              v-model="selectedConnection"
              filterable
              placeholder="请选择连接"
              class="w-100"
            >
              <template #prefix>
                <el-icon><search /></el-icon>
              </template>
              <el-option
                v-for="item in connections"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span>{{ item.name }}</span>
                <span class="option-actions">
                  <el-icon @click.stop="editConnection(item)"><edit /></el-icon>
                  <el-icon @click.stop="deleteConnection(item)"><delete /></el-icon>
                </span>
              </el-option>
              <template #append>
                <el-button icon="plus" @click="showAddConnectionDialog" />
              </template>
            </el-select>
          </el-col>
        </el-row>

        <!-- SQL输入框和执行按钮 -->
        <el-row class="mb-20">
          <el-col :span="20">
            <el-input
              v-model="sqlQuery"
              type="textarea"
              :rows="3"
              placeholder="请输入SQL语句"
            />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="executeSql" class="w-100" :loading="executing">
              执行
            </el-button>
          </el-col>
        </el-row>

        <!-- 结果表格 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="400px"
          v-horizontal-scroll="'always'"
          v-loading="loading"
        >
          <el-table-column
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          />
        </el-table>
      </el-col>
    </el-row>

    <!-- 添加/编辑数据库对话框 -->
    <el-dialog
      v-model="databaseDialogVisible"
      :title="isEditDatabase ? '编辑数据库' : '添加数据库'"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form :model="databaseForm" label-width="100px">
        <el-form-item label="数据库名称" required>
          <el-input v-model="databaseForm.name" placeholder="请输入数据库名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="databaseDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDatabase">保存</el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑连接对话框 -->
    <el-dialog
      v-model="connectionDialogVisible"
      :title="isEditConnection ? '编辑连接' : '添加连接'"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form :model="connectionForm" label-width="100px">
        <el-form-item label="连接名称" required>
          <el-input v-model="connectionForm.name" placeholder="请输入连接名称" />
        </el-form-item>
        <el-form-item label="连接地址" required>
          <el-input v-model="connectionForm.host" placeholder="请输入连接地址" />
        </el-form-item>
        <el-form-item label="端口" required>
          <el-input v-model="connectionForm.port" placeholder="请输入端口" />
        </el-form-item>
        <el-form-item label="用户名" required>
          <el-input v-model="connectionForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="connectionForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="connectionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveConnection">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import {FindDBManageListService,AddDBManageService,UpdateDBManageService,RunSQLService,GetSQLRunHistoryService } from '@/api/dbm';
import {DatabaseConfig} from '@/types/dbm';

import horizontalScroll from 'el-table-horizontal-scroll'
import {
  Search, Edit, Delete, Plus
} from '@element-plus/icons-vue';


export default defineComponent({
  name: 'DbManage',
  components: {
    Search, Edit, Delete, Plus,horizontalScroll
  },
  setup() {
    // 数据库下拉框数据
    const databases = ref<DatabaseConfig[]>([]);
    const selectedDatabase = ref('');

    // 连接下拉框数据
    const connections = ref([
      { id: 1, name: '本地开发环境' },
      { id: 2, name: '测试环境' },
      { id: 3, name: '生产环境' },
    ]);
    const selectedConnection = ref('');

    // SQL查询相关
    const sqlQuery = ref('');
    const executing = ref(false);
    const tableData = ref([]);
    const tableColumns = ref([]);
    const loading = ref(false);

    // 数据库表列表
    const tables = ref([
      { name: 'users', children: [{ name: 'id' }, { name: 'username' }, { name: 'email' }] },
      { name: 'products', children: [{ name: 'id' }, { name: 'name' }, { name: 'price' }] },
    ]);
    const defaultProps = {
      children: 'children',
      label: 'name',
    };

    // 数据库对话框相关
    const databaseDialogVisible = ref(false);
    const isEditDatabase = ref(false);
    const databaseForm = reactive({
      id: 0,
      name: '',
    });

    // 连接对话框相关
    const connectionDialogVisible = ref(false);
    const isEditConnection = ref(false);
    const connectionForm = reactive({
      id: 0,
      name: '',
      host: '',
      port: '',
      username: '',
      password: '',
    });

    // 方法定义
    const showAddDatabaseDialog = () => {
      isEditDatabase.value = false;
      databaseForm.id = 0;
      databaseForm.name = '';
      databaseDialogVisible.value = true;
    };

    const editDatabase = (item) => {
      isEditDatabase.value = true;
      databaseForm.id = item.id;
      databaseForm.name = item.name;
      databaseDialogVisible.value = true;
    };

    const GetDBManageList = async () => {
        let req = {"get_type":0, "token":localStorage.getItem("token"), "id":localStorage.getItem("userId")}
        await FindDBManageListService(req).then((res: any) => {
            if (res.code === 0) {
                databases.value = res.data;
                for (let i = 0; i < databases.value.length; i++) {
                    let type = "MySQL";
                    switch(databases.value[i].DB_Type) {
                        case 0:
                            type = "MySQL";
                            break;
                        case 1:
                            type = "PostgreSQL";
                            break;
                    }
                    databases.value[i].Name = type + " - "+ databases.value[i].DB_IP + ":" + databases.value[i].DB_Port + " - " + databases.value[i].DB_NAME;
                }
            } else {
                console.error('获取数据库列表失败:', res.message);
            }
        }).catch((error: any) => {
            console.error('请求错误:', error);
        });
    };
    GetDBManageList();

    const deleteDatabase = (item) => {
      // 实际项目中这里应该调用API删除
      databases.value = databases.value.filter(db => db.ID !== item.id);
    };

    const saveDatabase = () => {
      if (isEditDatabase.value) {
        // 更新
        const index = databases.value.findIndex(db => db.ID === databaseForm.id);
        if (index !== -1) {
          databases.value[index].Name = databaseForm.name;
        }
      } else {
        // 新增
        // databases.value.push({
        //   id: databases.value.length + 1,
        //   name: databaseForm.name,
        // });
      }
      databaseDialogVisible.value = false;
    };

    const showAddConnectionDialog = () => {
      isEditConnection.value = false;
      connectionForm.id = 0;
      connectionForm.name = '';
      connectionForm.host = '';
      connectionForm.port = '';
      connectionForm.username = '';
      connectionForm.password = '';
      connectionDialogVisible.value = true;
    };

    const editConnection = (item) => {
      isEditConnection.value = true;
      connectionForm.id = item.id;
      connectionForm.name = item.name;
      connectionForm.host = item.host || '';
      connectionForm.port = item.port || '';
      connectionForm.username = item.username || '';
      connectionForm.password = item.password || '';
      connectionDialogVisible.value = true;
    };

    const deleteConnection = (item) => {
      // 实际项目中这里应该调用API删除
      connections.value = connections.value.filter(conn => conn.id !== item.id);
    };

    const saveConnection = () => {
      if (isEditConnection.value) {
        // 更新
        const index = connections.value.findIndex(conn => conn.id === connectionForm.id);
        if (index !== -1) {
          connections.value[index] = { ...connectionForm };
        }
      } else {
        // 新增
        connections.value.push({
          id: connections.value.length + 1,
          ...connectionForm,
        });
      }
      connectionDialogVisible.value = false;
    };

    const executeSql = () => {
      executing.value = true;
      loading.value = true;
        let req = {
          "token":localStorage.getItem("token"),
          "id":localStorage.getItem("userId"),
          "sql":sqlQuery.value,
          "db_id":selectedDatabase.value,
        };
        try{
            RunSQLService(req).then((res: any) => {
                if (res.code === 0) {
                    tableData.value = res.data;
                    // tableColumns.value = res.columns;
                    let first = res.data[0];
                    let keys = Object.keys(first);
                    tableColumns.value = keys.map((key) => {
                        return { prop: key, label: key };
                    });
                    console.log(res.data);
                } else {
                    console.error('执行SQL失败:', res.message);
                }
            }).catch((error: any) => {
                console.error('请求错误:', error);
            });
        } catch (e) {
            console.log(e);
        }
        
        executing.value = false;
        loading.value = false;
    };

    const handleTableClick = (data) => {
      // 点击表名时自动生成查询语句
      if (!data.children) {
        sqlQuery.value = `SELECT * FROM ${data.name}`;
      }
    };

    return {
      databases,
      selectedDatabase,
      connections,
      selectedConnection,
      sqlQuery,
      executing,
      tableData,
      tableColumns,
      loading,
      tables,
      defaultProps,
      databaseDialogVisible,
      isEditDatabase,
      databaseForm,
      connectionDialogVisible,
      isEditConnection,
      connectionForm,
      showAddDatabaseDialog,
      editDatabase,
      deleteDatabase,
      saveDatabase,
      showAddConnectionDialog,
      editConnection,
      deleteConnection,
      saveConnection,
      executeSql,
      handleTableClick,
    };
  },
});
</script>

<style scoped>
.db-manage-container {
  padding: 20px;
}

.table-list {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.mb-20 {
  margin-bottom: 20px;
}

.w-100 {
  width: 100%;
}

.option-actions {
  float: right;
}

.option-actions .el-icon {
  margin-left: 10px;
  cursor: pointer;
}
</style>