<template>
  <div class="test-container">
    <h1>Test Page</h1>
    <p>This is a test page created in the src/views/test directory.</p>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-button type="success" @click="handleExport">导出</el-button>
    <el-button type="warning" @click="handleImport">导入</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="gender" label="Gender" width="180"></el-table-column>
      <el-table-column prop="age" label="Age" width="180"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="score" label="Score"></el-table-column>
      <el-table-column prop="class" label="Class"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="Gender" label-width="120px">
          <el-input v-model="form.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Age" label-width="120px">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Name" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Score" label-width="120px">
          <el-input v-model="form.score" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Class" label-width="120px">
          <el-input v-model="form.class" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      list: [
        { gender: 'Male', age: 20, name: 'Zhang San', score: 90, class: 'Class 1' },
        { gender: 'Female', age: 22, name: 'Li Si', score: 85, class: 'Class 2' },
        { gender: 'Male', age: 21, name: 'Wang Wu', score: 88, class: 'Class 3' }
      ],
      dialogVisible: false,
      dialogTitle: '',
      form: {
        gender: '',
        age: '',
        name: '',
        score: '',
        class: ''
      },
      editIndex: -1
    };
  },
  methods: {
    handleAdd() {
      this.dialogTitle = '新增';
      this.form = { gender: '', age: '', name: '', score: '', class: '' };
      this.editIndex = -1;
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.dialogTitle = '编辑';
      this.form = { ...row };
      this.editIndex = index;
      this.dialogVisible = true;
    },
    submitForm() {
      if (this.editIndex === -1) {
        this.list.push({ ...this.form });
      } else {
        this.list.splice(this.editIndex, 1, { ...this.form });
      }
      this.dialogVisible = false;
    },
    handleExport() {
      const data = this.list.map(item => ({
        Gender: item.gender,
        Age: item.age,
        Name: item.name,
        Score: item.score,
        Class: item.class
      }));
      const filename = 'test_data.csv';
      const csvContent = this.convertToCSV(data);
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
    handleImport() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.csv';
      input.onchange = (event) => {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            const csvData = e.target.result;
            const importedData = this.parseCSV(csvData);
            this.list = importedData.map(item => ({
              gender: item.Gender,
              age: item.Age,
              name: item.Name,
              score: item.Score,
              class: item.Class
            }));
          };
          reader.readAsText(file);
        }
      };
      input.click();
    },
    convertToCSV(data) {
      const header = Object.keys(data[0]).join(',');
      const rows = data.map(item => Object.values(item).join(','));
      return [header, ...rows].join('\n');
    },
    parseCSV(csvData) {
      const lines = csvData.split('\n');
      const headers = lines[0].split(',');
      return lines.slice(1).map(line => {
        const values = line.split(',');
        return headers.reduce((obj, header, index) => {
          obj[header] = values[index];
          return obj;
        }, {});
      });
    }
  },
};
</script>

<style scoped>
.test-container {
  padding: 20px;
  text-align: center;
}
</style>
