<template>
  <div class="paste-editor-wrapper">
    <textarea ref="codemirror" class="textarea-el"></textarea>
  </div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import { forEach } from '@/libs/tools'
import createPlaceholder from './plugins/placeholder'
export default {
    name: 'PasteEditor',
    props: {
        value: Array,
        pasteData: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '从网页或其他应用软件复制表格数据，粘贴到这里 。默认第一行是表头，使用回车键添加新行，使用Tab键区分列。'
        }
    },
    data () {
        return {
            pasteDataArr: [],
            rowArrLength: 0,
            editor: null
        }
    },
    watch: {
        pasteData (val) {
            if (val === '') {
                this.editor.setValue('')
            }
        }
    },
    computed: {
        rowNum () {
            return this.pasteDataArr.length
        },
        colNum () {
            return this.pasteDataArr[0] ? this.pasteDataArr[0].length : 0
        }
    },
    methods: {
        handleKeyup (e) {
            this.handleAreaData()
        },
        /**
     * @description 处理粘贴操作
     */
        handleContentChanged (content) {
            let pasteData = content.trim()
            this.$emit('on-content-change', pasteData)
            let rows = pasteData.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(row => {
                return row.split('\t')
            })
            if (content === '') rows = []
            this.pasteDataArr = rows
            this.clearLineClass()
            this.checkColNumInEveryRow()
            this.$emit('input', this.pasteDataArr)
        },
        /**
     * @description 检查除第一行的每一行列数是否与第一行相同
     */
        checkColNumInEveryRow () {
            let i = 0
            const len = this.rowNum
            if (len === 0) return
            while (++i < len) {
                let item = this.pasteDataArr[i]
                if (item.length !== this.colNum && (!(i === len - 1 && item.length === 1 && item[0] === '') || i !== len - 1)) {
                    this.markIncorrectRow(i)
                    this.$emit('on-error', i)
                    return false
                }
            }
            this.$emit('on-success', this.pasteDataArr)
            return true
        },
        /**
     * @description 标记不符合格式的一行
     */
        markIncorrectRow (index) {
            this.editor.addLineClass(index, 'text', 'incorrect-row')
        },
        /**
     * @description 标记不符合格式的一行
     */
        clearLineClass () {
            forEach(this.pasteDataArr, (item, index) => {
                this.editor.removeLineClass(index, 'text', 'incorrect-row')
            })
        }
    },
    mounted () {
        createPlaceholder(CodeMirror)
        this.editor = CodeMirror.fromTextArea(this.$refs.codemirror, {
            lineNumbers: true,
            tabSize: 1,
            lineWrapping: true,
            placeholder: this.placeholder
        })
        this.editor.on('change', (editor) => {
            this.handleContentChanged(editor.getValue())
        })
        this.editor.addLineClass(0, 'text', 'first-row')
    }
}
</script>
<style lang="less">
@import './paste-editor.less';
</style>
