<template>
  <div>
    <div class="box">
      <span>选择 XLSX 文件</span>
      <input type="file" @change="onFileChange"/>
      <button @click="doImport">导入</button>
      <button @click="doDownloadTemplate">下载模板</button>
      <button @click="doExportObject">导出数据(行数据为对象)</button>
      <button @click="doExportArray">导出数据(行数据为数组)</button>
    </div>
    <div class="error">
      {{ error }}
    </div>
    <div class="table">
      <div v-for="sheet in data" :key="sheet.name">
        <h3>{{ sheet.name }}</h3>
        <ul v-for="(row, i) in sheet.rows" :key="i">
          <li>
            <span>{{ i }}</span>
            <span>{{ JSON.stringify(row) }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {ColumnDef, ColumnEnum, SheetDef, WorkbookDef} from './scripts/xlsxio'

export default {
  name: 'App',
  data() {
    //  上级部门编号 部门名称 负责人 负责人电话 负责人邮箱 备注

    const def = new WorkbookDef([
      new SheetDef('组织部门管理', [
        new ColumnDef('编号', 'unit_name', {
          help: '部门编码来源于实际组织架构，应该是唯一的',
          headerStyle: {
            size: 22,
            width: 40
          }
        }),
        new ColumnDef('上级部门编号', 'area_name', {help: '部门编码来源于实际组织架构，应该是唯一的'}),
        new ColumnDef('部门名称', 'unit_type', {help: '部门名称来源于实际组织架构，应该是唯一的'}),
        new ColumnDef('负责人', 'contact', {
          required: false,
          help: '负责人可以填写，也可以留空'
        }),
        new ColumnDef('是否涉密', 'is_sec', {
          enums: [
            new ColumnEnum('是', true),
            new ColumnEnum('否', false)
          ],
          help: `可填写值为：
 是 表示涉密
 否 表示不涉密
 `
        }),
        new ColumnDef('负责人电话', 'tel', {
          required: false
        }),
        new ColumnDef('负责人邮箱', 'email', {
          required: false
        }),
        new ColumnDef('上报时间', 'report_time', {
          required: true,
          type: ColumnDef.types.DATE
        }),
        new ColumnDef('备注', 'remark', {
          required: false,
          type: ColumnDef.types.NUMBER
        })
      ])
    ])
    return {
      def,
      file: null,
      data: [],
      error: null
    }
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0]
    },
    async doImport() {
      if (!this.file) {
        alert('先选择文件')
        return
      }
      try {
        this.data = await this.def.read(this.file)
      } catch (e) {
        this.error = e.message
      }
    },
    doDownloadTemplate() {
      this.def.write([{
        name: '组织部门管理',
        rows: [
          ['100100', '100000', '安全部门', '张铁汉', true]
        ]
      }], '导入模板文件', true)
    },
    doExportObject() {
      this.def.write(this.data, '导出数据(对象)', false).then(() => {
        alert('导出完成')
      })
    },
    doExportArray() {
      const data = this.data[0].rows.map(row => this.obj2arr(row))
      this.def.writeFirst(data, '导出数据(数组)', false).then(() => {
        alert('导出完成')
      })
    },
    obj2arr(obj) {
      const arr = []
      this.def.sheets[0].columns.forEach(col => {
        arr.push(obj[col.field])
      })
      return arr
    }
  }
}
</script>

<style scoped>
ul {
  border: 1px solid #cccccc;
}

.table {
  max-height: 400px;
  overflow: auto;
}

.box {
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>