<style lang="less">
    @import '../../styles/common.less';
    @import './editor.less';
</style>

<template>
    <div>
        <Row>
            <Col span="18">
                <Card>
                    <Form :label-width="80">
                        <FormItem label="标题">
                            <Input v-model="title" icon="android-list"/>
                        </FormItem>
                        <FormItem label="状态">
                            <Select v-model="status" style="width: 150px">
                                <Option :value="0">进行中</Option>
                                <Option :value="1">结束</Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <div class="margin-top-20">
                        <textarea id="articleEditor" v-model="content"></textarea>
                    </div>
                    <div class="submit">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" size="large" type="primary">发布</Button>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import tinymce from 'tinymce';
export default {
    name: 'publish',
    props: {
        editContent: Object
    },
    watch: {
        editContent() {
            this.id = this.editContent.id;
            this.title = this.editContent.title;
            this.status = this.editContent.status || 0;
        }
    },
    computed: {
        content() {
            if (tinymce.activeEditor) {
                if (this.editContent.content) {
                    tinymce.activeEditor.setContent(this.editContent.content);
                } else {
                    tinymce.activeEditor.setContent("");
                }
            }
            return this.editContent.content || '';
        }
    },
    data () {
        return {
            id: this.editContent.id,
            title: this.editContent.title || '',
            status: this.editContent.status || '',
            publishLoading: false
        };
    },
    methods: {
        canPublish () {
            if (this.title.length === 0) {
                this.$Message.error('请输入标题');
                return false;
            } else {
                return true;
            }
        },
        handlePublish() {
            if (this.canPublish()) {
                this.publishLoading = true;
                let data = {
                    title: this.title,
                    content: tinymce.activeEditor.getContent(),
                    status: this.status
                };
                if (this.id) {
                    data.id = this.id;
                }
                this.axios.post("/campaign/store", data).then((res) => {
                    if (res.data.status == 0) {
                        this.$Message.success('操作成功！');
                        this.publishLoading = false;
                        setTimeout(() => {
                            this.$emit("pubSuccess");
                        }, 1000);
                    }
                });
            }
        }
    },
    mounted () {
        tinymce.init({
            selector: '#articleEditor',
            images_upload_url: 'https://wechat.sotype.com/upload',
            branding: false,
            elementpath: false,
            height: 600,
            language: 'zh_CN.GB2312',
            menubar: 'edit insert view format table tools',
            theme: 'modern',
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                'searchreplace visualblocks visualchars code fullscreen fullpage',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons paste textcolor colorpicker textpattern imagetools codesample'
            ],
            toolbar1: ' newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
            autosave_interval: '20s',
            image_advtab: true,
            table_default_styles: {
                width: '100%',
                borderCollapse: 'collapse'
            }
        });
    },
    destroyed () {
        tinymce.get('articleEditor').destroy();
    }
};
</script>
