<template>
    <Form label-position="top">
        <FormItem label="文本内容">
            <Input type="textarea" v-model="simpleCellValue" @on-change="changeSimpleCellValue" :rows="4"></Input>
        </FormItem>
    </Form>
</template>

<script>
    import {
        mapState,
        mapActions
    } from 'vuex';

    export default {
        name: 'simpleValueEditor',
        data() {
            return {
                simpleCellValue: '',
            };
        },
        watch: {
            currCellDef(currVal, oldVal) {
                this.refresh();
            }
        },
        computed: {
            ...mapState(['context', 'currCellDef', 'currRowIndex', 'currColIndex'])
        },
        methods: {
            changeSimpleCellValue() {
                this.currCellDef.value.value = this.simpleCellValue;
                this.context.hot.setDataAtCell(this.currRowIndex, this.currColIndex, this.simpleCellValue);
            },

            refresh() {
                this.simpleCellValue = this.currCellDef.value.value;
            }
        },
        mounted() {
            if (!this.currCellDef.value) {
                return;
            }   
            
            this.refresh();
        }
    };
</script>

<style>
</style>
