<template>
    <i>
        <a href="javascript:void(0)"  @click="setUpOptions" class="iui-toolbar-icon-info" title="报表描述"></a>
        <Modal v-model="isDescriptionDialog" title="报表描述"  @on-ok="saveConfig">
            <Form>
                <FormItem>
                    <Input type="textarea" :rows="8" placeholder="请输入报表描述" v-model="info.description"></Input>
                </FormItem>
            </Form>
        </Modal>
    </i>
</template>

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

    export default {
        name: 'SetDescriptionAction',
        data() {
            return {
                isDescriptionDialog: false,
                info: {}
            };
        },
        computed: {
            ...mapState(['context'])
        },
        methods: {
            setUpOptions() {
                this.info = this.context.reportDef.info || {};
                this.isDescriptionDialog = true;
            },
            saveConfig() {
                this.context.reportDef.info = this.info;
            }
        },
        mounted() {
        }
    };
</script>

<style>

    .iui-toolbar-icon-info {
        width: 100%;
        height: 100%;
        display: block;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../../../assets/icons/info.png); 
    }
</style>
