<template>
    <Form :label-width= "60">
        <FormItem label="展开方向">
            <RadioGroup v-model="expand" @on-change="onChangeExpand">
                <Radio label="Down">向下</Radio>
                <Radio label="Right">向右</Radio>
                <Radio label="None">不展开</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="格式化">
            <FormatSelector v-model="format" @on-change="onChangeFormat"></FormatSelector> 
        </FormItem>
        <FormItem label="条件属性">
            <DatasetConditionEditor :cellDef="currCellDef"></DatasetConditionEditor>
        </FormItem>
        <FormItem label="表达式">
            <Input v-model="value" type="textarea" :rows="4" @on-change="onChangeValue"></Input>
        </FormItem>
    </Form>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import DatasetConditionEditor from './DatasetConditionEditor';
    import FormatSelector from '../../../components/format_selector';
    export default {
        name: 'ExpressionEditor',
        data() {
            return {
                value: undefined,
                expand: undefined,
                format: undefined,
            };
        },
        components: {
            DatasetConditionEditor,
            FormatSelector
        },
        watch: {
            currCellDef() {
                this.refresh();
            }
        },
        computed: {
            ...mapState(['context', 'currCellDef', 'currRowIndex', 'currColIndex'])
        },
        methods: {
            onChangeValue() {
                this.currCellDef.value.value = this.value;
                this.context.hot.setDataAtCell(this.currRowIndex, this.currColIndex, this.value);
            },
            onChangeExpand() {
                this.currCellDef.expand = this.expand;
                this.context.hot.setDataAtCell(this.currRowIndex, this.currColIndex, this.value);
            },
            onChangeFormat(value) {
                this.currCellDef.cellStyle.format = this.format;
            },
            refresh() {
                this.value =this.currCellDef.value.value;
                this.expand= this.currCellDef.expand;
                this.format= this.currCellDef.cellStyle.format;
            }
        },
        mounted() {
            this.refresh();
        }
    };
</script>

<style>
</style>
