<template>
    <Form :label-width="80">
        <Button @click="showConfig"
            type="primary"
            long>配置</Button>
    </Form>
</template>
<script>
import Utils from '@/libs/utils'
import ChartEditorDialog from './chart-editor-dialog'
import {
    mapState,
    mapGetters
} from 'vuex';

const D = {
    type: 'bar',
    padding: { top: 20, right: 20, bottom: 95, left: 40 },
    datasetName: 'ddd',
    x: {
        name: '1',
        alias: '2',
        type: 'time',
        min: 0,
        max: 100,
        formatter: '4'
    },
    y: {
        name: '5',
        alias: '6',
        type: 'cat',
        min: 0,
        max: 100,
        formatter: '9'
    },
    colorField: '',
    colorValue: ''
}

export default {
    name: 'ChartEditor',
    data() {
        return {
            chart: {}
        };
    },
    components: {
        ChartEditorDialog
    },
    watch: {
        currCellDef: {
            handler(newVal) {
                this.chart = this.ensureChart(newVal.value.chart)
            },

            immediate: true
        }
    },
    computed: {
        ...mapState(['context', 'currCellDef', 'currRowIndex', 'currColIndex']),
        ...mapGetters(['getDatasets'])
    },
    methods: {
        showConfig() {
            Utils.showModal(ChartEditorDialog, {
                data: {
                    data: Object.assign({}, this.chart)
                },
                methods: {
                    afterOk: (data) => {
                        this.setChart(data)
                    }
                },
                propsData: {
                    datasets: this.getDatasets,
                    reportDef: this.context.reportDef
                }
            })
        },
        setChart(chart) {
            this.currCellDef.value.chart = this.chart = chart
            this.context.hot.setDataAtCell(this.currRowIndex, this.currColIndex, '图表');
        },
        ensureChart(chart) {
            if (!chart) {
                return D
            }

            'padding,x,y,legend'.split(',').forEach(p => {
                if (!chart[p]) {
                    chart[p] = {}
                }
            })

            return chart
        }
    }
};

</script>
<style>
</style>
