<template>
  <div class="midd-page" v-loading="loading" element-loading-text="加载中...">
    <div class="header">
      <div class="h_left">
        <p class="current-doc">
          <strong>当前文献</strong>:
          <span style="color: #97a8be">{{ firstForm.currentDocument }}</span>
        </p>

        <p>
          <strong>文献编号:</strong
          ><span style="color: #97a8be">{{ doc_identifier }}</span>
        </p>
        <p>
          <strong>所属标签</strong>:
          <template v-if="firstForm.tag && firstForm.tag.length">
            <el-tag
              v-for="(item, index) in firstForm.tag"
              :key="index"
              type=""
              :style="index !== 0 ? 'margin-left: 5px;' : ''"
            >
              {{ item.name }}
            </el-tag>
          </template>
          <span v-else style="color: #97a8be">暂无标签</span>
        </p>
      </div>
    </div>
    <div><el-button @click="handlePreview">预览</el-button></div>
    <el-table :data="firstTableData.filter(item => item.project_name !== 'outcomes')" style="width: 100%">
      <el-table-column
        label="项目"
        prop=""
        :filters="firstForm.projectFilters"
        :filter-method="firstFilterProject"
        filter-placement="bottom-end"
        width="140"
        ><!-- name -->
        <template #default="scope">
          <el-input
            v-model="scope.row.project_name"
            v-if="scope.row.isEdit"
          ></el-input>
          <span v-else>{{ scope.row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="说明" prop="project_description"
        ><!-- description -->
        <template #default="scope">
          <span v-if="!scope.row.isEdit">
            {{ scope.row.project_description }}
            <i
              class="el-icon-edit"
              @click="openDescriptionDialog(scope.row)"
              style="cursor: pointer; margin-left: 5px"
            ></i>
          </span>
          <el-input v-else v-model="scope.row.project_description"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="范例" prop="project_example"
        ><!-- example -->
        <template #default="scope">
          <el-input
            v-model="scope.row.project_example"
            v-if="scope.row.isEdit"
          ></el-input>
          <span v-else>
            {{ scope.row.project_example }}
            <i
              class="el-icon-edit"
              @click="openExampleDialog(scope.row)"
              style="cursor: pointer; margin-left: 5px"
            ></i>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="模型生成1"
        prop="generation_1"
        class-name="model-gen-1"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.generation_1"
            v-if="scope.row.isEdit"
          ></el-input>
          <span v-else>
            {{ scope.row.generation_1 }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="模型生成"
        prop="generation_2"
        class-name="model-gen-2"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.generation_2"
            v-if="scope.row.isEdit"
          ></el-input>
          <span v-else>
            {{ scope.row.generation_2 }}
            <!--  <i
              class="el-icon-refresh"
              @click="openModel2Dialog(scope.row)"
              style="cursor: pointer; margin-left: 5px"
            ></i> -->
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <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="firstHandleEdit(scope.$index, scope.row)"
                  v-if="!scope.row.isEdit"
                >
                  <i class="el-icon-edit"></i> 编辑
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="firstHandleSave(scope.$index, scope.row)"
                  v-if="scope.row.isEdit"
                >
                  <i class="el-icon-check"></i> 保存
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="firstHandleConfig(scope.$index, scope.row)"
                >
                  <i class="el-icon-refresh"></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-dialog :visible.sync="dialogVisible" title="编辑范例" width="30%">
      <el-input v-model="currentExample" type="textarea" :rows="4"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveExample">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="firstForm.dialogVisible"
      title="内容更新"
      width="40%"
    >
      <!-- 应用选择 -->
      <el-form :model="firstForm.firstAiForm" label-width="120px">
        <el-form-item label="应用">
          <el-select
            v-model="firstForm.firstAiForm.application"
            placeholder="请选择应用"
            disabled
          >
            <el-option
              v-for="(item, index) in configArr"
              :key="index"
              :label="item.chat_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 字数限制 -->
        <el-form-item label="MAX-token数">
          <el-input-number
            v-model="firstForm.firstAiForm.wordCount"
            :min="1"
            :max="9999"
            placeholder="请输入字数限制"
          >
          </el-input-number>
        </el-form-item>

        <!-- 说明 -->
        <el-form-item label="说明">
          <el-input
            v-model="firstForm.firstAiForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入说明"
          >
          </el-input>
        </el-form-item>

        <!-- 提示词 -->
        <el-form-item label="提示词">
          <el-input
            v-model="firstForm.firstAiForm.prompt"
            type="textarea"
            :rows="3"
            placeholder="请输入提示词"
          >
          </el-input>
        </el-form-item>

        <!-- 生成的内容 -->
        <el-form-item label="生成内容">
          <el-input
            v-model="firstForm.firstAiForm.modelValue"
            type="textarea"
            :rows="4"
            readonly
          >
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveConfig">保存配置</el-button>
          <el-button @click="generateContent">生成内容</el-button>
          <el-button @click="firstForm.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="firstSaveExample">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 配置生成 -->
    <el-dialog
      :visible.sync="firstForm.configVisible"
      title="配置模型"
      width="40%"
    >
      <el-form :model="firstForm.configForm" label-width="120px">
        <!-- <el-form-item label="模型1">
          <el-select
            v-model="firstForm.configForm.model_a_config"
            placeholder="请选择应用"
          >
            <el-option
              v-for="(item, index) in configArr"
              :key="index"
              :label="item.chat_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="模型">
          <el-select
            v-model="firstForm.configForm.model_b_config"
            placeholder="请选择应用"
          >
            <el-option
              v-for="(item, index) in configArr"
              :key="index"
              :label="item.chat_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 字数限制 -->
        <el-form-item label="MAX-token数">
          <el-input-number
            v-model="firstForm.configForm.max_tokens"
            :min="1"
            :max="2048"
            placeholder="请输入字数限制"
          >
          </el-input-number>
        </el-form-item>

        <!-- 说明 -->
        <el-form-item label="说明">
          <el-input
            v-model="firstForm.configForm.project_description"
            type="textarea"
            :rows="4"
            placeholder="请输入说明"
          >
          </el-input>
        </el-form-item>
        <!-- 范例 -->
        <el-form-item label="范例">
          <el-input
            v-model="firstForm.configForm.project_example"
            type="textarea"
            :rows="4"
            placeholder="请输入范例"
          >
          </el-input>
        </el-form-item>
        <!-- 提示词 -->
        <el-form-item label="提示词">
          <el-input
            v-model="firstForm.configForm.project_name"
            type="textarea"
            :rows="3"
            placeholder="请输入提示词"
          >
          </el-input>
        </el-form-item>
        <!-- 生成方法 -->
        <el-form-item label="生成方法">
          <el-input
            v-model="firstForm.configForm.generation_method"
            type="textarea"
            :rows="3"
            placeholder="请输入生成方法"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="firstForm.dialogVisible = false">取消</el-button>
          <el-button @click="saveConfig" type="primary">保存配置</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加新的对话框 -->
    <el-dialog
      :visible.sync="descriptionDialogVisible"
      title="编辑说明"
      width="30%"
    >
      <el-input
        v-model="currentDescription"
        type="textarea"
        :rows="4"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="descriptionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDescription">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  getDetail,
  saveConfig,
  configList,
  listProConfig,
  updateConfig,
  deleteConfig,
  result,
} from "@/api/knowledge";
export default {
  name: "MiddPage",
  data() {
    return {
      loading: false, // Add loading state
      activeName: "first",
      firstForm: {
        tableData: [
          /* {
            workType: "复制",
            project: "indication",
            description:
              "器械在文献中使用的适应症，按照器械分析，也需要添加器械使用部位以区分",
            example: "t1d: n=191;",
            model1: "t1d: n=191;",
            model2: "t1d: n=191;",
            isEdit: false,
          },
          {
            workType: "总结",
            project: "Study Design/ Method",
            description:
              "患者/试验者的人种，国家地区,以查阅是否存在数据上人种差异",
            example:
              "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
            model1:
              "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
            model2:
              "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
            isEdit: false,
          },
          {
            workType: "总结和数据提取；",
            project: "Alternative device（treatment)",
            description:
              "Device name + model name如无，可写疗法（以评价的器械的替代疗法）",
            example:
              "Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法）",
            model1:
              "Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法）",
            model2:
              "Capillary blood by BMG;Venous blood by YSI(此处为CGM的替代疗法）",
            isEdit: false,
          }, */
        ],
        workTypeFilters: [
          { text: "类型1", value: "type1" },
          { text: "类型2", value: "type2" },
          { text: "类型3", value: "type3" },
        ],
        projectFilters: [],
        activeFilters: {
          workType: [],
          project: [],
        },
        dialogVisible: false,
        configVisible: false,
        firstAiForm: {
          application: "",
          wordCount: 100,
          description: "",
          prompt: "",
          modelValue: "",
        },
        /* 配置应用表单 */
        configForm: {
          id: "",
          project_name: "提取第一作者",
          max_tokens: 1024,
          project_description: "从文献中提取第一作者信息，并进行格式化处理",
          generation_method: "extract_first_author",
          model_a_config: 20,
          model_b_config: 22,
          project_example: "",
        },
        currentDocument: "AED数据表", // 当前文档名称
        tag: [],
        searchQuery: "", // 搜索关键词
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 3, // 总条数
      },
      /*  secondForm: {
        tableData: [
          {
            workType: "SOTA-E1-01",
            project: "Ultrasounic knife",
            description: "Pain: VAS (day3)",
            example: "37",
            isEdit: false,
          },
          {
            workType: "SOTA-E1-02",
            project: "EqMD",
            description: "Quality of life: xx scale (week 2)",
            example: "66",
            isEdit: false,
          },
          {
            workType: "SOTA-E1-03",
            project: "EqMD",
            description: "Pain: VAS (day7)",
            example: "35",
            isEdit: false,
          },
        ],
        workTypeFilters: [
          { text: "类型1", value: "type1" },
          { text: "类型2", value: "type2" },
          { text: "类型3", value: "type3" },
        ],
        projectFilters: [],
        activeFilters: {
          workType: [],
          project: [],
        },
      },
      thirdForm: {
        tableData: [
          {
            workType: "SOTA-E1-01",
            project: "EqMD",
            description: "Pain: VAS (day3)",
            example: "t1d: n=191;",
            isEdit: false,
          },
          {
            workType: "SOTA-E1-02",
            project: "EqMD",
            description: "Pain: VAS (day3)",
            example:
              "white non-hispanic: n=247;african american:n=25;hispanic or latino: n=34",
            isEdit: false,
          },
        ],
        workTypeFilters: [
          { text: "类型1", value: "type1" },
          { text: "类型2", value: "type2" },
          { text: "类型3", value: "type3" },
        ],
        projectFilters: [],
        activeFilters: {
          workType: [],
          project: [],
        },
      }, */
      configArr: [],
      dialogVisible: false,
      currentExample: "",
      currentRow: null,
      doc_identifier: "",

      /* 说明编辑 */
      descriptionDialogVisible: false,
      currentDescription: "",
      currentDescriptionRow: null,
    };
  },
  computed: {
    firstTableData() {
      return this.firstForm.tableData
        .filter((data) => {
          return (
            (!this.firstForm.activeFilters.workType.length ||
              this.firstForm.activeFilters.workType.includes(data.workType)) &&
            (!this.firstForm.activeFilters.project.length ||
              this.firstForm.activeFilters.project.includes(data.project))
          );
        })
        .reverse();
    },
  },
  mounted() {
    this.doc_identifier = this.$route.query.identifier;
    this.firstForm.currentDocument = this.$route.query.name;
    this.firstForm.tag = JSON.parse(this.$route.query.tag);
    this.firstInit();
    this.updateProjectFilters();
  },
  methods: {
    /* 预览 */
    handlePreview(row) {
      console.log(row);
      let _this = this;
      let a = document.createElement("a");
      a.href = `#/infoList?id=${this.$route.query.id}&type=${this.$route.query.type.toLowerCase()}`; // 使用 hash
      a.target = "_blank";
      a.click();
    },
    /* 说明编辑 */
    openDescriptionDialog(row) {
      this.descriptionDialogVisible = true;
      this.currentDescriptionRow = row;
      this.currentDescription = row.project_description;
    },

    saveDescription() {
      if (this.currentDescriptionRow && this.currentDescription) {
        // 更新当前行的说明内容
        this.currentDescriptionRow.project_description =
          this.currentDescription;

        // 调用更新API
        updateConfig({
          ...this.currentDescriptionRow,
          project_description: this.currentDescription,
        }).then((res) => {
          if (res.status === 200) {
            this.$message.success("说明更新成功");
            this.firstInit();
          }
        });
      }
      this.descriptionDialogVisible = false;
      this.currentDescriptionRow = null;
      this.currentDescription = "";
    },
    /* 配置模型 */
    firstHandleConfig(index, row) {
      this.firstForm.configForm = row;
      console.log(row);
      /* this.firstForm.configForm.model_a_config = row.model_a_config.id; */
      this.firstForm.configForm.model_b_config = row.model_b_config.id;
      /* this.firstForm.configForm.id=row.id
      this.firstForm.configForm.project_description = row.description; */
      this.firstForm.configVisible = true;
    },
    /* 保存配置JSON.stringify() */
    saveConfig() {
      if (!this.firstForm.configForm.id) {
        saveConfig(this.firstForm.configForm).then((res) => {
          if (res.status !== 200) return;
          this.firstForm.configVisible = false;
          this.firstInit(); // 刷新列表数据
        });
      } else {
        updateConfig(this.firstForm.configForm).then((res) => {
          if (res.status !== 200) return;
          this.firstForm.configVisible = false;
          this.$message.success("修改成功!");
          this.firstInit(); // 刷新列表数据
        });
      }
    },
    /* AED数据表(第一) 操作事件*/
    openExampleDialog(row) {
      this.dialogVisible = true;
      this.currentRow = row;
      this.currentExample = row.project_example; // 将当前行的范例赋值给弹窗输入框
    },

    saveExample() {
      if (this.currentRow && this.currentExample) {
        // 更新当前行的范例内容
        this.currentRow.project_example = this.currentExample;

        // 如果需要同步更新到后端，可以调用更新API
        updateConfig({
          ...this.currentRow,
          project_example: this.currentExample,
        }).then((res) => {
          if (res.status === 200) {
            this.$message.success("范例更新成功");
            this.firstInit();
          }
        });
      }
      this.dialogVisible = false;
      this.currentRow = null;
      this.currentExample = "";
    },
    /* 生成内容 */
    // 更新内容处理方法
    firstHandleUpload(index, row) {
      // 这里假设你有一个获取更新内容的API
      const updatedContent = this.getUpdatedContent(row);

      // 更新两个模型的内容
      this.$set(row, "model1", updatedContent.model1);
      this.$set(row, "model2", updatedContent.model2);

      // 可以添加提示
      this.$message({
        type: "success",
        message: "内容已更新",
      });
    },

    // 打开模型1对话框
    openModel1Dialog(row) {
      this.firstForm.firstAiForm.application = "app1";
      this.firstForm.firstAiForm.description = row.description;
      this.firstForm.dialogVisible = true;
    },

    // 打开模型2对话框
    openModel2Dialog(row) {
      this.firstForm.firstAiForm.application = "app2";
      this.firstForm.firstAiForm.description = row.description;
      this.firstForm.dialogVisible = true;
    },

    // 获取更新内容的方法（需要根据实际API进行修改）
    getUpdatedContent(row) {
      // 这里应该调用实际的API
      return {
        model1: "更新后的模型1内容",
        model2: "更新后的模型2内容",
      };
    },
    async generateContent() {
      try {
        // 这里替换为实际的API调用
        const response = await this.yourApiCall({
          application: this.firstForm.firstAiForm.application,
          wordCount: this.firstForm.firstAiForm.wordCount,
          description: this.firstForm.firstAiForm.description,
          prompt: this.firstForm.firstAiForm.prompt,
        });

        // 将获取的内容更新到modelValue
        this.firstForm.firstAiForm.modelValue = response.data;

        // 注意这里不关闭弹窗
      } catch (error) {
        this.$message.error("生成内容失败");
      }
    },
    /* 内容更新确定 */
    firstSaveExample() {
      this.firstForm.dialogVisible = false;
    },
    firstHandleUpload(index, row) {
      this.firstForm.dialogVisible = true;
    },
    firstHandleEdit(index, row) {
      this.firstForm.configForm = row;
      this.firstForm.configForm.model_a_config = row.model_a_config.id;
      this.firstForm.configForm.model_b_config = row.model_b_config.id;
      row.isEdit = true;
    },
    firstHandleSave(index, row) {
      row.isEdit = false;
      updateConfig(this.firstForm.configForm).then((res) => {
        if (res.status !== 200) return;
        this.$message.success("修改成功!");
        this.firstInit();
      });
      // 在这里可以添加保存到后端的逻辑
    },
    // 修改删除方法
    async firstHandleDelete(index, row) {
      try {
        await this.$confirm("确认删除该记录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const res = await deleteConfig({ id: row.id });
        if (res.status === 200) {
          this.$message.success("删除成功");
          this.firstInit(); // 重新加载数据
        }
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败");
        }
      }
    },
    firstHandleAdd() {
      this.firstForm.tableData.push({
        workType: "",
        project: "",
        description: "",
        example: "",
        isEdit: true,
      });
    },
    firstFilterWorkType(value, row) {
      return row.workType === value;
    },
    firstFilterProject(value, row) {
      return row.project === value;
    },
    updateProjectFilters() {
      const projects = [
        ...new Set(this.firstForm.tableData.map((item) => item.project)),
      ];
      this.projectFilters = projects.map((project) => ({
        text: project,
        value: project,
      }));
    },
    /* 搜索逻辑 */
    handleSearch() {
      // 实现搜索逻辑
      const query = this.firstForm.searchQuery.toLowerCase();
      const filteredData = this.firstForm.tableData.filter((item) => {
        return Object.values(item).some((value) =>
          String(value).toLowerCase().includes(query)
        );
      });
      this.total = filteredData.length;
      // 更新表格数据
    },

    handleSearchClear() {
      this.firstForm.searchQuery = "";
      this.handleSearch();
    },

    handleSizeChange(val) {
      this.firstForm.pageSize = val;
      this.handleSearch();
    },

    handleCurrentChange(val) {
      this.firstForm.currentPage = val;
      this.handleSearch();
    },

    handleClick() {},
    /* 获取详细信息 */
    async firstInit() {
      this.loading = true; // Start loading
      try {
        // Get config list first to ensure we have the models data
        const [configRes, proConfigRes] = await Promise.all([
          configList(),
          listProConfig(),
        ]);

        if (configRes.status === 200) {
          this.configArr = configRes.data;
        }

        if (proConfigRes.status === 200) {
          const tableData = proConfigRes.data.data.map((el) => ({
            ...el,
            isEdit: false,
            generation_1: "N/A",
            generation_2: "N/A",
          }));
          this.firstForm.tableData = tableData;
        }

        // Get results only if we have a literature_id
        if (this.$route.query.id) {
          const resultRes = await result({
            id: this.$route.query.id,
          });
          console.log(resultRes);
          if (resultRes.status === 200 && resultRes.data.data) {
            this.firstForm.tableData = this.firstForm.tableData.map((row) => {
              const fieldName = row.project_name;
              const fieldData = resultRes.data.data.datalist[fieldName];
              if (fieldData?.text) {
                console.log(fieldData);
                return {
                  ...row,
                  generation_1: fieldData.text || "N/A",
                  generation_2: fieldData.text || "N/A",
                };
              }
              return row;
            });
          }
        }
      } catch (error) {
        console.error("Error in firstInit:", error);
        this.$message.error("加载数据失败");
      } finally {
        this.loading = false; // End loading regardless of success/failure
      }

      /* const res = await getDetail({ id: this.$route.query.id });

      // 定义字段映射关系
      const fieldMappings = {
        identifier: {
          description: "SOTA-Xx-Xx",
          example: "文献唯一标识符",
        },
        literature_type: {
          description:
            "1-Meta-Analysis 2-Systematic Review（Systematic Review有非常严格的检索、选择、评价标准）3-Review 4-Randomized Controlled Trials 5-Cohort Study 6-Case-Report 7-Background Information/Expert Opinion 8-Animal Research/Lab Studies 可以从文献的：标题（1，2在标题出现的概率高），abstract，method中识别文献类型",
          example: "4-Randomized Controlled Trials",
        },
        first_author: {
          description: "第一作者",
          example: "",
        },
        study_design: {
          description:
            "可以从文献的method部分提取实验设计/方法可以是Randomized controlled方式.文献搜索，数据库提取文献，干预分组……",
          example:
            "searched Medline, Embase, the Web of Science, and the Cochrane Library for randomized trials and observational studies",
        },
        population: {
          description:
            "Population information; including： patient quantify（N, N of male/female）； age（mean，range） Adult/children eg：60 adults with T1D (mean age 38years), 20 male",
          example:
            "Type II Diabetes: n=10282 Age: ≥18 years; Naive to CGM; Between 2017 to 2019",
        },
        region_country: {
          description:
            "患者/试验者的人种，国家地区,以查阅是否存在数据上人种差异",
          example:
            "white non-hispanic: n=247; african american:n=25; hispanic or latino: n=34",
        },
        indication: {
          description:
            "器械在文献中使用的适应症，按照器械分析，也需要添加器械使用部位以区分",
          example: "t1d: n=191;t2d: n=152;",
        },
        intervention: {
          description:
            "Group 1: xx; Group 2: xx 写清对照组和实验组分组的情况，如：有无干预，分适应症，分部位……",
          example:
            "CGM(N=XX) vs. SMBG(N=XX); CGM (N=XX) vs. venous blood glucose test(N=XX); CGM+SMBG(N=XX) vs. SMBG(N=XX)",
        },
        subject_device: {
          description:
            "Device name + model name 如无，可写疗法（以评价的器械所用疗法为主）",
          example: "Dexcom G6(此处为CGM器械名字)",
        },
        alternative_device: {
          description:
            "Device name + model name 如无，可写疗法（以评价的器械的替代疗法）",
          example:
            "Capillary blood by BMG; Venous blood by YSI (此处为CGM的替代疗法）",
        },
        outcomes: {
          description: "Scope: tools (follow-up); such as 'Pain: VAS (day 3)'",
          example: "a1c;tir;tbr;tar",
        },
        risk_adverse_event: {
          description: "Type of side effect",
          example: "Serious Hypoglycemia (SH);Diabetic Ketoacidosis (DKA)",
        },
        follow_up: {
          description: "随访时间",
          example: "8 weeks",
        },
        clinical_benefit: {
          description:
            "临床收益（文献中提到研究器械的好处，或者可以达到什么效果，可以摘抄过来可以从result，discussion中提取detailed can be refer to MEDDEV 2.7.1 rev4，b. Evaluation of the device’s benefits to the patient",
          example:
            "the pediatric age span who used a CGM have improved glycemic control compared with patients who did patients who use insulin pumps along with CGM did achieve a lower HbA1c and better CGM metrics compared with the reference groups.",
        },
        disadvantage: {
          description:
            "临床劣势（文献中提到研究器械的劣势，比如在什么情况下疗效不好）eg：导致出血，导致uncomfortable，导致预后不好……可以从result，discussion中提取",
          example: "/",
        },
        conclusion: {
          description: "结论",
          example:
            "CGM use was associated with a lower HbA1c in both MDI and pump users. Pump use was only associated with a lower HbA1c if used with CGM. HCL was associated with the lowest HbA1c. Spanish language and minority race/ethnicity were associated with lower rates of pump and CGM use, highlighting the need to reduce disparities.",
        },
        clinical_guidelines: {
          description: "识别文献中提到的临床实践指南",
          example: "",
        },
        clinical_background: {
          description: "描述有关器械的临床背景，包括发展的概述等",
          example: "",
        },
        medical_field: {
          description:
            "识别该器械是用于哪个医疗领域？例如骨科，外科，牙科，放射诊断等，包括已确定的医疗领域的历史方面的概述",
          example: "",
        },
        associated_conditions: {
          description:
            "1 讨论该设备拟治疗的疾病的所有方面，包括但不限于流行病学、发病机制、临床表现和共病2 临床条件的描述，如：2.1 自然病程和结果。2.2 医疗条件是否有不同的临床方式、阶段和严重性。2.3 总体人群中的频率，通过年龄、性别、种族划分，熟悉的诱因、遗传方面等。",
          example: "",
        },
        suitability_criteria: {
          description:
            "D1 Actual device D2 Equivalent device D3 Other device A1 Same use A2 Minor deviation A3 Major deviation P1 Applicable P2 Limited P3 Different population R1 High quality R2 Minor deficiencies R3 Insufficient information",
          example: "D2,A1,P1,R1",
        },
        contribution_criteria: {
          description:
            "1 Yes； 2 No T：Was the design of the study appropriate? O：Do the outcome measures reported reflect the intended purpose of the device? F:Is the duration of the follow-up long enough to access whether duration of treatment effects and identify complications? S:Has a statistical analysis of the data been provided and is it appropriate?  C:Was the magnitude of the treatment effect observed clinically significant?  ",
          example: "T1,O1,F1,S1,C1",
        },
        oxford_evidence: {
          description:
            "根据Literature type，对照Oxford Centre for Evidence-Based Medicine, Levels of Evidence (2011)填写基本level 1：Systematic review of randomized trials level 2：Randomized trial or observational study level 3：Non-randomized controlled cohort/follow-upstudy (PMS) level 4：Case report level 5：Mechanism-based reasoning",
          example: "level 2",
        },
        overall_quality: {
          description:
            "将前面数字加起来的总和 9-14 Accepted and Pivotal 15-23 Accepted but not Pivotal 24-27 Excluded",
          example: "12",
        },
      };

      // Transform data into array of objects with name property
      const processedData = Object.entries(res.data.data.datalist)
        .filter(([key]) => !["id", "create_time", "update_time"].includes(key))
        .map(([key]) => ({
          name: key,
          isEdit: false,
          description: fieldMappings[key]?.description || "",
          example: fieldMappings[key]?.example || "",
          generation_1: "", // 为模型生成1预留空间
          generation_2: "", // 为模型生成2预留空间
        }));

      this.firstForm.tableData = processedData; */
    },
  },
  watch: {
    tableData: {
      handler() {
        this.updateProjectFilters();
      },
      deep: true,
    },
  },
};
</script>
  
  <style scoped>
.midd-page {
  padding: 20px;
}
.el-icon-edit {
  font-size: 14px;
  color: #409eff;
}
/* 浅蓝色背景 */
::v-deep .model-gen-1 {
  background-color: #e6f3ff !important;
}
::v-deep .model-gen-1.el-table__cell {
  background-color: #e6f3ff !important;
  color: #333333 !important; /* 深色文字确保可读性 */
}

/* 浅紫色背景 */
::v-deep .model-gen-2 {
  background-color: #f0e6ff !important;
}
::v-deep .model-gen-2.el-table__cell {
  background-color: #f0e6ff !important;
  color: #333333 !important; /* 深色文字确保可读性 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}
.h_left {
  display: flex;
  align-items: center;
}
.h_left p {
  margin-right: 45px;
  margin-top: 0px;
}
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box {
  width: 350px; /* 可以根据需要调整宽度 */
}

/* 自定义输入框样式 */
.custom-search-input :deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

/* 自定义搜索按钮样式 */
.custom-search-input :deep(.el-input-group__append) {
  padding: 0;
  border: none;
  background-color: transparent;
}

.custom-search-input :deep(.el-input-group__append .el-button) {
  height: 40px;
  padding: 0 20px;
  border-radius: 0 4px 4px 0;
  margin: 0;
}

/* 悬停效果 */
.custom-search-input :deep(.el-input__inner:hover) {
  border-color: #dcdfe6;
}

.custom-search-input :deep(.el-input__inner:focus) {
  border-color: #409eff;
}
</style>