<template>
  <div class="table-container">
    <table>
      <thead>
      <tr>
        <th v-for="(col, index) in columns" :key="index">{{ col }}</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr
        v-for="(row, rowIndex) in rows"
        v-bind:key="rowIndex"
        :class="{ 'editing': row.editable }"
      >
        <td v-for="(col, colIndex) in columns" :key="colIndex">
          <select
            v-if="row.editable"
            v-model="row[col]"
            :placeholder="'选择' + col"
          >
            <option v-for="option in options[col]" :value="option">{{ option }}</option>
          </select>
          <span v-if="!row.editable">{{ row[col] }}</span>
        </td>
        <td>
          <button
            v-if="!row.editable"
            class="edit-btn"
            @click="editRow(rowIndex)"
          >编辑</button>
          <button
            v-if="row.editable"
            class="save-btn"
            @click="saveRow(rowIndex)"
          >保存</button>
          <button
            v-if="row.editable"
            class="cancel-btn"
            @click="cancelEdit(rowIndex)"
          >取消</button>
        </td>
      </tr>
      </tbody>
    </table>
    <button class="add-btn" @click="addRow">添加行</button>
    <button @click="downloadTemplate">下载模板</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      columns: ['姓名', '年龄', '性别'],
    rows: [
      { '姓名': '张三', '年龄': '18', '性别': '男', editable: false },
    { '姓名': '李四', '年龄': '20', '性别': '女', editable: false },
    { '姓名': '王五', '年龄': '22', '性别': '男', editable: false },
  ],
    options: {
    '性别': ['男', '女'],
      '姓名':['xxx','zzz']
    }
  }
  },
  methods: {
    editRow(rowIndex) {
      this.rows[rowIndex].editable = true;
    },
    saveRow(rowIndex) {
      this.rows[rowIndex].editable = false;
    },
    cancelEdit(rowIndex) {
      this.rows[rowIndex].editable = false;
// 恢复原值
    },
    addRow() {
      let newRow = {};
      this.columns.forEach((col) => {
        newRow[col] = '';
      });
      newRow.editable = true;
      this.rows.push(newRow);
    },
    downloadTemplate() {
      const worksheet = XLSX.utils.json_to_sheet([]);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const file = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(file, 'template.xlsx');
    }
  }
};
</script>

<style scoped>

.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 10px 5px;
  border: 1px solid #ccc;
}
th {
  background: #f2f2f2;
  font-weight: bold;
}
tr.editing td select {
  display: block;
  width: 100%;
  height: 30px;
  padding: 0 5px;
}
.edit-btn, .save-btn, .cancel-btn, .add-btn {
  border: none;
  background: transparent;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.edit-btn {
  color: #2196f3;
}
.save-btn, .add-btn {
  color: #00c853;
}
.cancel-btn {
  color: #e91e63;
}
.add-btn {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}
</style>