<template>
    <Form :label-width= "60" class="iui-style-from">
        <FormItem label="宽">
            <Input v-model="width" @on-change="changeWidth"></Input>
        </FormItem>
        <FormItem label="高">
           <Input v-model="height" @on-change="changeHeight"></Input>
        </FormItem>
        <FormItem label="数据来源">
            <Select v-model="source" @on-change="changeSource">
                <Option v-for="item in sources" :value="item.value" :key="item.value">{{item.label}}</Option>
            </Select>
        </FormItem>
        <FormItem label="文本">
            <Input v-model="value" @on-change="changeValue"></Input>
        </FormItem>
    </Form>
</template>

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

    export default {
        name: 'ZXingEditor',
        data() {
            return {
                width: 10,
                height: 10,
                source: 'text',
                sources: [{
                    label: '路径',
                    value: 'text'
                }, {
                    label: '表达式',
                    value: 'expression'
                }],
                value: '',
            };
        },
        props: ["cellDef", "rowIndex", "colIndex"],
        watch: {
            cellDef() {
                this.cellValue = this.cellDef.value;
                this.refresh();
            }
        },
        computed: {
            ...mapState(['context', 'tenantId'])
        },
        methods: {
            /*event*/
            changeWidth() {
                this.cellValue.width = this.width;
            },
            changeHeight() {
                this.cellValue.height = this.height;
            },
            changeSource() {
                this.cellValue.source = this.source;
            },
            changeValue() {
                this.cellValue.value = this.value;
            },
            /*event*/
            refresh() {
                this.source = this.cellValue.source;
                this.value = this.cellValue.value;
            }
            // changeSimpleCellValue() {
            //     this.cellDef.value.value = this.simpleCellValue;
            //     this.context.hot.setDataAtCell(this.rowIndex, this.colIndex, this.simpleCellValue);
            //     console.log(this.rowIndex + ":" + this.colIndex);
            // },
        },
        mounted() {
        }
    };
</script>

<style>
</style>
