<style lang="less">
    @import '../../styles/common.less';
    .ivu-card-head {
        p {
            height: 32px;
            line-height: 32px;
        }
        button {
            float: right;
        }
    }
    .ivu-form .ivu-form-item-label{
        width: 80px;
        font-size: 16px;
    }
    /* .ivu-form-item-content{
        margin-left: 80px;
    } */
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col>
            <Card>
                <p slot="title">首页服务介绍和底部图片配置</p>
                <div class="edittable-table-height-con">
                    <Form :label-width="80">
                        <FormItem label="活动图片">
                            <img :src="photo" style="width:100%;max-width:750px;" v-if="photo" class="upload-img">
                            <Upload :headers="uploadHeader" :on-success="handleSuccess" :action='$domain + "/upload"'>
                                <Button icon="ios-cloud-upload-outline">上传图片</Button>
                            </Upload>
                        </FormItem>
                        <FormItem label="活动详情">
                            <editor :editor-content="content"></editor>
                        </FormItem>
                        <FormItem label="首页服务介绍">
                            <Input v-model="introduce" type="textarea" :rows="6" placeholder="请输入服务介绍" />
                        </FormItem>
                    </Form>
                    <div class="submit">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" size="large" type="primary">提交</Button>
                    </div>
                </div>
            </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import tinymce from 'tinymce';
    import editor from '../main-components/editor'
    export default {
        name: 'images',
        components: {
            editor
        },
        data() {
            return {
                content: '',
                photo: '',
                introduce: '',
                publishLoading: false,
                uploadHeader: {

                }
            };
        },
        methods: {
            handleSuccess (res, file) {
                if (res.status == 0) {
                    this.photo = res.location
                }
            },
            handlePublish() {
                const content = tinymce.activeEditor.getContent();
                const photo = this.photo;
                const introduce = this.introduce;
                if (content && photo) {
                    this.publishLoading = true;
                    this.axios.post("/bottom/store", {
                        content,
                        photo,
                        introduce
                    }).then((res) => {
                        if (res.data.status == 0) {
                            this.$Message.success('操作成功！');
                            this.publishLoading = false;
                            setTimeout(() => {
                                this.$emit("pub-success");
                            }, 1000);
                        }
                    });
                } else {
                    this.$Message.warning('请把内容填写完整！');
                }
            },
            getData() {
                this.axios.get("/bottom", {})
                    .then((res) => {
                        if (res.data.status == 0) {
                            this.content = res.data.data.content;
                            this.photo = res.data.data.photo;
                            this.introduce = res.data.data.introduce;
                        }
                    });
            }
        },
        mounted() {
            this.getData();
        }
    };
</script>
