<template>
  <div class="gpu-list">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <el-select
        v-model="selectedBucket"
        placeholder="请选择知识库"
        @change="handleBucketChange"
      >
        <el-option
          v-for="item in buckets"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <el-select
        v-model="selectedType"
        placeholder="请选择目录"
        :disabled="!selectedBucket"
        class="ml-15"
      >
        <el-option
          v-for="item in types"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <el-button
        type="primary"
        :loading="isSyncing"
        :disabled="!selectedType"
        class="ml-15"
        @click="handleSyncData"
      >
        {{ isSyncing ? "同步中..." : "同步数据" }}
      </el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 原有的文献列表 tab -->
      <el-tab-pane label="文献列表" name="first">
        <!-- 添加搜索表单 -->
        <div class="search-form">
          <el-form
            :inline="true"
            :model="searchForm"
            class="demo-form-inline"
            label-width="100px"
            ><el-form-item label="名称:">
              <el-input
                v-model="searchForm.name"
                clearable
                placeholder="请输入文献名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="searchForm.createTimeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
            <!-- <el-form-item label="文本时间:">
              <el-date-picker
                v-model="searchForm.textTimeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item> -->
            <el-form-item label="标签:">
              <el-select
                v-model="searchForm.id"
                multiple
                filterable
                remote
                reserve-keyword
                :remote-method="searchFormTags"
                :loading="searchTagsLoading"
                placeholder="请输入标签关键词"
                clearable
              >
                <el-option
                  v-for="tag in searchTagOptions"
                  :key="tag.id"
                  :label="tag.name"
                  :value="tag.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="batch-operations">
          <el-button
            type="primary"
            @click="handleBatchTag"
            :disabled="selectedRows.length == 0"
            >批量绑定标签</el-button
          >
        </div>
        <!-- 数据表格区域 -->
        <el-table
          v-loading="isLoading"
          :data="gpuList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="名称">
            <!-- <template #default="{ row }">
              <el-link @click="handleNameClick(row)">{{ row.name }}</el-link>
            </template> -->
          </el-table-column>
          <el-table-column prop="tags" label="已绑定标签">
            <template #default="{ row }">
              <el-tag
                v-for="(item, index) in row.tags"
                :key="index"
                type=""
                :style="index !== 0 ? 'margin-left: 5px;' : ''"
              >
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="文档类型" width="100" />
          <el-table-column prop="create_time" label="创建时间" width="200" />
          <el-table-column prop="status" label="处理状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-dropdown trigger="click">
                <el-button
                  type="text"
                  size="small"
                  circle
                  class="operation-button"
                  style="font-size: 15px; margin-left: 10px"
                  icon="el-icon-more"
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click.native="handleNameClick(row)">
                      <i class="el-icon-view"></i> 查看
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native="handlePreview(row)"
                    >
                      <i class="el-icon-tickets"></i> 预览
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native="firstHandleUpload(scope.$index, scope.row)"
                    >
                      <i class="el-icon-refresh"></i> 批量处理
                    </el-dropdown-item>
                    <!--  <el-dropdown-item
                      @click.native="firstHandleDelete(scope.$index, scope.row)"
                    >
                      <i class="el-icon-delete"></i> 删除
                    </el-dropdown-item> -->
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </el-tab-pane>

      <!-- 添加 SOTA详情 tab -->
      <el-tab-pane label="SOTA详情" name="second">
        <el-table :data="sotaDetailsList" style="width: 100%">
          <el-table-column label="Identifier" prop="identifier" />
          <el-table-column label="Device" prop="device" />
          <el-table-column label="Outcomes" prop="outcomes" />
          <el-table-column label="Unit for analysis" prop="unit" />
          <el-table-column label="Mean" prop="mean" />
          <!-- 操作列与原有类似 -->
        </el-table>
      </el-tab-pane>

      <!-- 添加 SOTA汇总表 tab -->
      <el-tab-pane label="SOTA汇总表" name="third">
        <el-table :data="sotaSummaryList" style="width: 100%">
          <el-table-column label="Summary" prop="summary" />
          <el-table-column label="EqMD" prop="eqmd" />
          <el-table-column label="Pain:VAS" prop="painVas" />
          <!-- 操作列与原有类似 -->
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加标签对话框 -->
    <el-dialog
      title="批量绑定标签"
      :visible.sync="tagDialogVisible"
      width="800px"
    >
      <el-form :model="tagForm" label-width="150px">
        <el-form-item label="标签:">
          <el-select
            style="width: 350px"
            v-model="tagForm.tags"
            multiple
            filterable
            remote
            reserve-keyword
            :remote-method="searchTags"
            :loading="tagsLoading"
            placeholder="请输入关键词搜索标签"
          >
            <el-option
              v-for="tag in tagOptions"
              :key="tag.id"
              :label="tag.name"
              :value="tag.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tagDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBatchTag">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
import {
  GET_list,
  GET_sync,
  listBuckets,
  selectTypeList,
  getDetail,
  search_tags,
  edit_tags,
  search,
} from "@/api/knowledge";
import axios from "axios";
// 状态映射表
const STATUS_MAP = {
  1: { text: "未处理", type: "info" },
  2: { text: "已审核", type: "warning" },
  3: { text: "已处理", type: "success" },
  4: { text: "已作废", type: "danger" },
  5: { text: "使用中", type: "primary" },
};

export default {
  name: "GpuList",

  data() {
    return {
      gpuList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isLoading: false,
      isSyncing: false,
      buckets: [],
      types: [],
      selectedBucket: null,
      selectedType: null,
      activeName: "first", // 当前激活的tab
      sotaDetailsList: [], // SOTA详情列表数据
      sotaSummaryList: [], // SOTA汇总表数据
      searchForm: {
        name: "",
        createTimeRange: [],
        textTimeRange: [],
        id: [],
      },
      selectedRows: [], // 选中的行
      tagDialogVisible: false, // 标签对话框显示状态
      tagForm: {
        tags: [], // 选中的标签ID数组
      },
      tagOptions: [], // 标签选项
      tagsLoading: false, // 标签加载状态

      searchTagOptions: [], // 搜索表单的标签选项
      searchTagsLoading: false, // 搜索表单的标签加载状态
    };
  },

  created() {
    // 使用防抖处理数据加载
    this.debouncedFetchGpuList = debounce(this.fetchGpuList, 300);
  },

  mounted() {
    this.initialize();
  },

  methods: {
    /* 搜索栏模糊查找 */
    /* 搜索表单的标签搜索 */
    async searchFormTags(query) {
      if (query !== "") {
        this.searchTagsLoading = true;
        try {
          const { data } = await search_tags({ keyword: query });
          this.searchTagOptions = data.data.items;
        } catch (error) {
          this.$message.error("搜索标签失败");
          console.error(error);
        } finally {
          this.searchTagsLoading = false;
        }
      } else {
        this.searchTagOptions = [];
      }
    },
    // 处理表格选择变化
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },

    // 处理批量标签
    handleBatchTag() {
      this.tagDialogVisible = true;
    },

    /* 模糊搜索 */
    async searchTags(query) {
      if (query !== "") {
        this.tagsLoading = true;
        try {
          const { data } = await search_tags({
            keyword: query,
          });
          this.tagOptions = data.data.items;
        } catch (error) {
          this.$message.error("搜索标签失败");
          console.error(error);
        } finally {
          this.tagsLoading = false;
        }
      } else {
        this.tagOptions = []; // 当搜索词为空时清空选项
      }
    },

    // 修改提交方法
    async submitBatchTag() {
      try {
        const ids = this.selectedRows.map((row) => row.id);
        // 这里需要添加实际的API调用
        /* await edit_tags({
          ids,
          tagIds: this.tagForm.tags, // 现在传递的是标签ID数组
        }); */
        const idObject = { literature_ids: ids, tag_ids: this.tagForm.tags };
        const response = await axios.post(
          `${process.env.VUE_APP_BASE_API}/literature-tags/relation_tags/`,
          idObject,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        if (response.status !== 200) return;
        console.log(this.tagForm.tags);
        this.$message.success("标签更新成功");
        this.tagDialogVisible = false;
        this.fetchGpuList(); // 刷新列表
      } catch (error) {
        this.$message.error("标签更新失败");
      }
    },
    // 处理搜索
    handleSearch() {
      this.currentPage = 1; // 重置页码
      this.fetchGpuList();
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        name: "",
        createTimeRange: [],
        textTimeRange: [],
        id: [],
      };
      this.handleSearch();
    },

    // 初始化数据
    async initialize() {
      try {
        await this.fetchBuckets();
        await this.fetchGpuList();
      } catch (error) {
        this.$message.error("初始化数据失败");
        console.error("初始化失败:", error);
      }
    },

    // 获取状态文本
    getStatusText(status) {
      return STATUS_MAP[status]?.text || "未知状态";
    },

    // 获取状态样式类型
    getStatusType(status) {
      return STATUS_MAP[status]?.type || "info";
    },

    // 获取知识库列表
    async fetchBuckets() {
      try {
        const { data } = await listBuckets();
        this.buckets = data;
      } catch (error) {
        this.$message.error("获取知识库列表失败");
        console.error("获取知识库失败:", error);
      }
    },

    // 处理知识库变更
    async handleBucketChange(val) {
      this.selectedType = null;
      this.types = [];

      if (!val) return;

      try {
        const { data } = await selectTypeList({ kb_id: val });
        this.types = data.dataList;
        this.debouncedFetchGpuList();
      } catch (error) {
        this.$message.error("获取目录列表失败");
      }
    },

    // 同步数据处理
    async handleSyncData() {
      if (!this.selectedType) {
        this.$message.warning("请先选择目录");
        return;
      }

      this.isSyncing = true;
      try {
        await GET_sync({ doc_type_id: this.selectedType });
        this.$message.success("同步成功");
        await this.fetchGpuList();
      } catch (error) {
        this.$message.error("同步失败");
      } finally {
        this.isSyncing = false;
      }
    },

    // 获取GPU列表数据
    async fetchGpuList() {
      this.isLoading = true;
      try {
        // 构建基础参数
        const params = {
          page: this.currentPage,
          page_size: this.pageSize,
          doc_type_id: this.selectedType || 36,
          keyword: this.searchForm.name,
          tag_names: this.searchForm.id,
        };

        // 只有当日期范围存在且有效时才添加日期参数
        if (
          this.searchForm.createTimeRange &&
          this.searchForm.createTimeRange.length === 2
        ) {
          params.create_time_start = this.searchForm.createTimeRange[0];
          params.create_time_end = this.searchForm.createTimeRange[1];
        }

        const response = await axios.post(
          `${process.env.VUE_APP_BASE_API}/literature-data/search/`,
          params,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );

        if (response.status !== 200) return;

        this.gpuList = response.data.data.list.map((item) => {
          const nameParts = item.name.split(".");
          return {
            ...item,
            name: nameParts[0],
            type: nameParts.length > 1 ? nameParts.pop() : "未知",
          };
        });

        this.total = response.data.data.total;
        this.currentPage = response.data.data.current_page;
        this.pageSize = response.data.data.page_size;
      } catch (error) {
        console.error("获取列表数据失败:", error); // 添加错误日志输出
        this.$message.error("获取列表数据失败");
      } finally {
        this.isLoading = false;
      }
    },

    // 处理每页数量变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.debouncedFetchGpuList();
    },

    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.debouncedFetchGpuList();
    },
    /* 预览 */
    handlePreview(row) {
      console.log(row);
      let _this = this;
      let a = document.createElement("a");
      a.href = `#/infoList?id=${row.id}&type=${row.type.toLowerCase()}`; // 使用 hash
      a.target = "_blank";
      a.click();
    },
    // 处理名称点击
    async handleNameClick(row) {
      try {
        /* const res = await getDetail({ id: row.id })
        console.log('详情数据:', res) */
        this.$router.push({
          path: "/knowledge/middPage/index",
          query: { id: row.id, name: row.name, tag: JSON.stringify(row.tags) },
        });
        // 这里可以添加详情处理逻辑
      } catch (error) {
        this.$message.error("获取详情失败");
      }
    },
    // Tab切换处理
    handleClick(tab) {
      // 根据tab加载相应数据
      switch (tab.name) {
        case "second":
          this.loadSotaDetails();
          break;
        case "third":
          this.loadSotaSummary();
          break;
      }
    },

    // 加载SOTA详情数据
    async loadSotaDetails() {
      try {
        // 这里调用API获取SOTA详情数据
        const response = await getSotaDetails();
        this.sotaDetailsList = response.data;
      } catch (error) {
        this.$message.error("获取SOTA详情失败");
        console.error(error);
      }
    },

    // 加载SOTA汇总表数据
    async loadSotaSummary() {
      try {
        // 这里调用API获取SOTA汇总数据
        const response = await getSotaSummary();
        this.sotaSummaryList = response.data;
      } catch (error) {
        this.$message.error("获取SOTA汇总数据失败");
        console.error(error);
      }
    },
  },
};
</script>

<style scoped>
.gpu-list {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.ml-15 {
  margin-left: 15px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>