<template>
  <Row :gutter="10">
    <i-col span="6">
      <Card>
        <Upload action="" :before-upload="beforeUpload">
          <Button icon="ios-cloud-upload-outline">上传Csv文件</Button>
          &nbsp;&nbsp;&nbsp;&nbsp;点击上传Csv文件
        </Upload>
        <p>util.js提供两个方法用来实现这个功能：</p>
        <p class="update-table-intro"><Icon style="margin-right: 10px;" :size="10" type="md-heart"/><span class="code-high-line">getArrayFromFile</span>：将Csv文件解析为二维数组</p>
        <p class="update-table-intro"><Icon style="margin-right: 10px;" :size="10" type="md-heart"/><span class="code-high-line">getTableDataFromArray</span>：将二维数组转为表格数据，具体请看文档</p>
      </Card>
    </i-col>
    <i-col span="18">
      <Table :height="500" :columns="columns" :data="tableData"/>
    </i-col>
  </Row>
</template>

<script>
import { getArrayFromFile, getTableDataFromArray } from '@/libs/util'
export default {
    // name: 'update_table_page',
    name: 'ParentView',
    data () {
        return {
            columns: [],
            tableData: []
        }
    },
    methods: {
        beforeUpload (file) {
            getArrayFromFile(file).then(data => {
                let { columns, tableData } = getTableDataFromArray(data)
                this.columns = columns
                this.tableData = tableData
            }).catch(() => {
                this.$Notice.warning({
                    title: '只能上传Csv文件',
                    desc: '只能上传Csv文件，请重新上传'
                })
            })
            return false
        },
        tagNavList () {
            return this.$store.state.app.tagNavList
        },
        notCacheName () {
            return [(this.$route.meta && this.$route.meta.notCache) ? this.$route.name : '']
        },
        cacheList () {
            return ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
        }
    }
}
</script>

<style>
.update-table-intro{
  margin-top: 10px;
}
.code-high-line{
  color: #2d8cf0;
}
</style>
