<template>
  <div class="midd-page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="AED数据表" name="first">
        <el-table :data="filteredTableData" style="width: 100%">
          <el-table-column
            label="工作类型"
            prop="workType"
            :filters="workTypeFilters"
            :filter-method="filterWorkType"
            filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-select
                v-model="scope.row.workType"
                placeholder="请选择"
                v-if="scope.row.isEdit"
              >
                <el-option label="类型1" value="type1"></el-option>
                <el-option label="类型2" value="type2"></el-option>
                <el-option label="类型3" value="type3"></el-option>
              </el-select>
              <span v-else>{{ scope.row.workType }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="项目"
            prop="project"
            :filters="projectFilters"
            :filter-method="filterProject"
            filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.project"
                v-if="scope.row.isEdit"
              ></el-input>
              <span v-else>{{ scope.row.project }}</span>
            </template>
          </el-table-column>
          <el-table-column label="说明" prop="description">
            <template #default="scope">
              <el-input
                v-model="scope.row.description"
                v-if="scope.row.isEdit"
              ></el-input>
              <span v-else>{{ scope.row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column label="范例" prop="example">
            <template #default="scope">
              <el-input
                v-model="scope.row.example"
                v-if="scope.row.isEdit"
              ></el-input>
              <span v-else>
                {{ scope.row.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="操作">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                v-if="!scope.row.isEdit"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="success"
                @click="handleSave(scope.$index, scope.row)"
                v-else
              >
                保存
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="handleAdd" style="margin-top: 20px"
          >新增行</el-button
        >
      </el-tab-pane>
      <el-tab-pane label="SOTA数据表" name="second"></el-tab-pane>
      <el-tab-pane label="SOTA内容表" name="third"></el-tab-pane>
      <el-tab-pane label="SOTA汇总表" name="fourth"></el-tab-pane>
    </el-tabs>

    <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>
  </div>
</template>
  
  <script>
export default {
  name: "MiddPage",
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          workType: "复制",
          project: "indication",
          description:
            "器械在文献中使用的适应症，按照器械分析，也需要添加器械使用部位以区分",
          example: "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",
          isEdit: false,
        },
        {
          workType: "总结和数据提取；",
          project: "Alternative device（treatment)",
          description:
            "Device name + model name如无，可写疗法（以评价的器械的替代疗法）",
          example:
            "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,
      currentExample: "",
      currentRow: null,
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter((data) => {
        return (
          (!this.activeFilters.workType.length ||
            this.activeFilters.workType.includes(data.workType)) &&
          (!this.activeFilters.project.length ||
            this.activeFilters.project.includes(data.project))
        );
      });
    },
  },
  created() {
    this.updateProjectFilters();
  },
  methods: {
    openExampleDialog(row) {
      console.log(112);
      this.dialogVisible = true;
      this.currentExample = row.example;
      this.currentRow = row;
    },
    saveExample() {
      if (this.currentRow) {
        this.currentRow.example = this.currentExample;
      }
      this.dialogVisible = false;
    },
    handleEdit(index, row) {
      row.isEdit = true;
    },
    handleSave(index, row) {
      row.isEdit = false;
      this.updateProjectFilters();
      // 在这里可以添加保存到后端的逻辑
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      this.updateProjectFilters();
      // 在这里可以添加从后端删除的逻辑
    },
    handleAdd() {
      this.tableData.push({
        workType: "",
        project: "",
        description: "",
        example: "",
        isEdit: true,
      });
    },
    filterWorkType(value, row) {
      return row.workType === value;
    },
    filterProject(value, row) {
      return row.project === value;
    },
    updateProjectFilters() {
      const projects = [...new Set(this.tableData.map((item) => item.project))];
      this.projectFilters = projects.map((project) => ({
        text: project,
        value: project,
      }));
    },
  },
  watch: {
    tableData: {
      handler() {
        this.updateProjectFilters();
      },
      deep: true,
    },
  },
};
</script>
  
  <style scoped>
.midd-page {
  padding: 20px;
}
.el-icon-edit {
  font-size: 14px;
  color: #409eff;
}
</style>