<template>
  <div class="data-list-container">
    <div class="search-card" :bordered="false">
      <a-row :gutter="4" align="middle" class="search-row">
        <!-- 下拉框 -->
        <a-col :span="3" :sm="4" :xs="24" class="select-col">
          <a-select 
            placeholder="下拉框" 
            style="width: 100%"
            :bordered="false"
            class="custom-select"
            v-model:value="selectValue"
          >
            <a-select-option 
			  v-for="option in selectOptions" 
			  :key="option.value" 
			  :value="option.value"
			  :disabled="option.disabled"
			>
			  {{ option.label }}
			</a-select-option>
          </a-select>
        </a-col>
        <!-- 输入框 -->
        <a-col :span="15" :sm="14" :xs="24" class="input-col">
          <a-input 
            placeholder="输入框" 
            style="width: 100%; padding: 0 8px;"
            :bordered="false"
            class="custom-input"
            v-model:value="inputValue"
            clearable
          />
        </a-col>
        <!-- 按钮区域 -->
        <a-col :span="6" :sm="6" :xs="24" class="button-col">
          <div class="search-buttons">
            <a-button type="primary" class="search-btn" @click="handleSearch">搜索</a-button>
            <a-button class="reset-btn" @click="handleReset">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <a-spin size="large" />
    </div>

    <!-- 数据列表 -->
    <div v-else class="data-cards">
      <a-card class="data-card" v-for="(item, index) in dataList" :key="index" :bordered="true">
        <a-row class="card-header">
          <a-col :span="16">
            <div class="data-name" @click="handleNameClick(item)">{{ item.targetTable }}</div>
          </a-col>
          <a-col :span="4">
			<div class="data-storage"><span class="label">数据库: </span>{{ item.dbType }}</div>
            <div class="data-storage"><span class="label">存储量: </span>{{ item.successRows }} 条</div>
          </a-col>
          <a-col :span="4" class="time-info">
            <div class="create-time">创建时间: {{ item.createTime }}</div>
            <div class="update-time">更新时间: {{ item.updateTime }}</div>
          </a-col>
        </a-row>
        <a-row class="card-body">
          <a-col :span="24">
            <div class="data-description"><span class="label">描述: </span>{{ item.taskName }}</div>
          </a-col>
        </a-row>
        <a-row class="card-footer">
          <a-col :span="24" class="card-actions">
            <a-button size="small" class="favorite-btn" @click="handleFavoriteToggle(item)" :disabled="item.isActive">
              {{ item.isActive ? '已收藏' : '收藏' }}
            </a-button>
            <a-button size="small" type="primary" class="apply-btn" @click="handleApplyClick(item)">申请</a-button>
          </a-col>
        </a-row>
      </a-card>
      
      <!-- 无数据提示 -->
      <div v-if="dataList && dataList.length === 0" class="no-data">
        暂无数据
      </div>
    </div>

    <ApplyModal v-if="applyModalVisible" :visible="applyModalVisible" :task-name="currentItem?.taskName" :task-id="currentItem?.taskId" @close="applyModalVisible = false" @confirm="handleApplyConfirm" />
    <NameDetailModal v-if="nameModalVisible" :visible="nameModalVisible" :task-name="currentItem?.taskName" :task-id="currentItem?.taskId" @close="nameModalVisible = false" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Card, Row, Col, Select, Input, Button, Spin } from 'ant-design-vue';
import ApplyModal from './Apply.vue';
import NameDetailModal from './NameDetai.vue';
import { getDbList, DbItem, SyncTables, getSyncTables  } from '@/api/data';

// 搜索框数据绑定
const selectValue = ref('');
const inputValue = ref('');

const selectOptions = ref<DbItem[]>();
const selectLoading = ref(false);

// 数据列表和加载状态
const dataList = ref<SyncTables[]>([]);
const loading = ref(false);

// 重置事件
const handleReset = () => {
  selectValue.value = '';
  inputValue.value = '';
  // 重置后重新加载数据
  fetchData();
};

// 搜索事件
const handleSearch = () => {
  fetchData();
};

// 弹窗控制
const currentItem = ref<SyncTables | null>(null);
const applyModalVisible = ref(false);
const nameModalVisible = ref(false);

// 获取数据列表
const fetchData = async () => {
  loading.value = true;
  try {
    // 构建查询参数
    const params = {
      dbId: selectValue.value,
      targetTable: inputValue.value
    };
    console.log(params)
    // 调用接口获取数据
    const result = await getSyncTables(params);
    dataList.value = result || [];
	
	console.log(result)
	
  } catch (e) {
    console.error('获取数据失败:', e);
    dataList.value = [];
  } finally {
    loading.value = false;
  }
};

onMounted(async () => {
  // 加载下拉框选项
  selectLoading.value = true;
  try {
    selectOptions.value = await getDbList();
  } catch (e) {
    console.error('获取数据库列表失败:', e);
  } finally {
    selectLoading.value = false;
  }
  
  // 页面加载时默认获取数据
  fetchData();
});

// 事件处理
const handleFavoriteToggle = (item: SyncTables) => { 
  item.isFavorite = !item.isFavorite; 
};
const handleApplyClick = (item: SyncTables) => { 
  currentItem.value = item; 
  applyModalVisible.value = true; 
};
const handleNameClick = (item: SyncTables) => { 
  currentItem.value = item; 
  nameModalVisible.value = true; 
};
const handleApplyConfirm = () => { 
  console.log('申请提交：', currentItem.value?.taskName); 
  applyModalVisible.value = false; 
};
</script>

<style scoped lang="scss">
.data-list-container { padding: 2px; min-height: 80vh; }
.search-card { background-color: #f0f7ff; padding: 16px; margin-bottom: 16px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 10; }
.search-row { white-space: nowrap; width: 100%; display: flex; align-items: center; }
.select-col, .input-col, .button-col { display: inline-block; vertical-align: middle; }
.custom-select, .custom-input { width: 100%; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #fff; height: 32px; }
.custom-select .a-select-selector, .custom-input .a-input-inner { border: none !important; box-shadow: none !important; background-color: transparent !important; height: 100% !important; line-height: 32px !important; }
.search-buttons { display: flex; gap: 8px; margin: 0; padding: 0; height: 32px; align-items: center; }
.search-btn, .reset-btn { height: 32px; padding: 0 16px; }
.data-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.data-card { background-color: #fff; border-radius: 4px; overflow: hidden; transition: all 0.3s ease; }
.data-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.card-header { padding: 16px 16px 8px; border-bottom: 1px solid #f0f0f0; }
.data-name { font-size: 16px; font-weight: 500; color: #1890ff; word-break: break-all; cursor: pointer; text-decoration: underline; }
.time-info { text-align: right; font-size: 12px; color: #666; }
.time-info .create-time, .time-info .update-time { margin-bottom: 4px; }
.card-body { padding: 12px 16px 16px; }
.data-description, .data-storage { margin-bottom: 8px; font-size: 14px; }
.data-description .label, .data-storage .label { color: #666; font-weight: 500; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.card-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.08); background-color: rgba(255,255,255,0.8); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.favorite-btn { border-color: #1890ff; color: #1890ff; }
.favorite-btn:hover { background-color: #e6f7ff; }
.favorite-btn.ant-btn-disabled { color: #52c41a !important; border-color: #52c41a !important; background-color: rgba(82,196,26,0.1) !important; cursor: default !important; }
.apply-btn { background-color: #1890ff; border-color: #1890ff; }
.apply-btn:hover { background-color: #096dd9; }
.loading-container { display: flex; justify-content: center; padding: 40px 0; }
.no-data { text-align: center; padding: 40px 0; color: #666; }

@media (max-width: 576px) {
  .search-row { flex-wrap: wrap; gap: 8px; }
  .select-col, .input-col, .button-col { width: 100% !important; margin-bottom: 8px; }
  .button-col { margin-bottom: 0; }
}
</style>
