<template>
  <Row :gutter="10">
    <i-col span="12">
      <Card>
        <div class="update-paste-con">
          <paste-editor v-model="pasteDataArr" @on-success="handleSuccess" @on-error="handleError"/>
        </div>
        <div class="update-paste-btn-con">
          <span class="paste-tip">使用Tab键换列，使用回车键换行</span>
          <Button type="primary" style="float: right;" @click="handleShow">显示表格数据</Button>
        </div>
      </Card>
    </i-col>
    <i-col span="12">
      <Card>
        <Table :height="400" :columns="columns" :data="tableData"/>
      </Card>
    </i-col>
  </Row>
</template>

<script>
import PasteEditor from '_c/paste-editor'
import { getTableDataFromArray } from '@/libs/util'
export default {
    // name: 'update_paste_page',

    name: 'ParentView',
    components: {
        PasteEditor
    },
    data () {
        return {
            pasteDataArr: [],
            columns: [],
            tableData: [],
            validated: true,
            errorIndex: 0
        }
    },
    methods: {
        handleSuccess () {
            this.validated = true
        },
        handleError (index) {
            this.validated = false
            this.errorIndex = index
        },
        handleShow () {
            if (!this.validated) {
                this.$Notice.error({
                    title: '您的内容不规范',
                    desc: `您的第${this.errorIndex + 1}行数据不规范，请修改`
                })
            } else {
                let { columns, tableData } = getTableDataFromArray(this.pasteDataArr)
                this.columns = columns
                this.tableData = tableData
            }
        },
        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 lang="less">
.update-paste{
  &-con{
    height: 350px;
  }
  &-btn-con{
    box-sizing: content-box;
    height: 30px;
    padding: 15px 0 5px;
  }
}
.paste-tip{
  color: #19be6b;
}
</style>
