<template>
    <div>
      <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
                v-for="filter in workTypeFilters"
                :key="filter.value"
                :label="filter.text"
                :value="filter.value"
              ></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-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: "DataTable",
    props: {
      tableData: {
        type: Array,
        required: true,
      },
      workTypeFilters: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        localTableData: [...this.tableData],
        projectFilters: [],
        activeFilters: {
          workType: [],
          project: [],
        },
        dialogVisible: false,
        currentExample: "",
        currentRow: null,
      };
    },
    computed: {
      filteredTableData() {
        return this.localTableData.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) {
        this.dialogVisible = true;
        this.currentExample = row.example;
        this.currentRow = row;
      },
      saveExample() {
        if (this.currentRow) {
          this.currentRow.example = this.currentExample;
        }
        this.dialogVisible = false;
        this.emitUpdate();
      },
      handleEdit(index, row) {
        row.isEdit = true;
      },
      handleSave(index, row) {
        row.isEdit = false;
        this.updateProjectFilters();
        this.emitUpdate();
      },
      handleDelete(index, row) {
        this.localTableData.splice(index, 1);
        this.updateProjectFilters();
        this.emitUpdate();
      },
      handleAdd() {
        this.localTableData.push({
          workType: "",
          project: "",
          description: "",
          example: "",
          isEdit: true,
        });
        this.emitUpdate();
      },
      filterWorkType(value, row) {
        return row.workType === value;
      },
      filterProject(value, row) {
        return row.project === value;
      },
      updateProjectFilters() {
        const projects = [...new Set(this.localTableData.map((item) => item.project))];
        this.projectFilters = projects.map((project) => ({
          text: project,
          value: project,
        }));
      },
      emitUpdate() {
        this.$emit('update-table', this.localTableData);
      },
    },
    watch: {
      tableData: {
        handler(newValue) {
          this.localTableData = [...newValue];
          this.updateProjectFilters();
        },
        deep: true,
      },
    },
  };
  </script>
  
  <style scoped>
  .el-icon-edit {
    font-size: 14px;
    color: #409eff;
  }
  </style>