<template>
    <div>
        <Card>
            <p slot="title">
                编辑公告
            </p>
            <div class="formWrapper">
                <div class="titleWrapper">
                    标题：
                    <p class="title"><Input v-model="title"></Input></p>
                </div>

                <div class="createTimeWrapper" v-if="!!queryDetailId">
                    创建时间：
                    <p class="title"><Input v-model="createTime" disabled></Input></p>
                </div>

                <div>状态：
                    <RadioGroup v-model="status" @on-change="changeAdStatus">
                        <Radio :label="0">
                            <span>显示</span>
                        </Radio>
                        <Radio :label="1">
                            <span>不显示</span>
                        </Radio>
                    </RadioGroup>
                </div>
                <div>置顶：
                    <RadioGroup v-model="isTop" @on-change="changeAdStatus">
                        <Radio :label="1">
                            <span>否</span>
                        </Radio>
                        <Radio :label="0">
                            <span>是</span>
                        </Radio>
                    </RadioGroup>
                </div>
            </div>

            <smeditor :config='config' ref="smeditor" @isUploading="ifUploading"></smeditor>

            <div class="btnWrapper">
                <Button type="success" :disabled="false" long size='large' @click="upload">
                    提交
                </Button>
            </div>

            <div class="circleWrapper" v-show="uploading">
                <p>图片上传中...</p>
            </div>

        </Card>

    </div>

</template>

<script>

import smeditor from '@/SMEditor/SMEditor.vue'

import { BASICURL, addHelpManage, helpManageDetail, addAnnounce, updateAnnounce, announceDetail } from '@/service/getData';
import { getStore, removeStore, setStore } from '@/config/storage';


export default {
    data() {
        return {
            uploading: false,
            ifAdd: true,
            queryDetailId: null,
            createTime: null,
            title: null,
            klass: null,
            status: 0,
            isTop: 1,
            basicUrl: BASICURL,
            config: {
                uploadUrl: `${BASICURL}admin/common/upload/oss/image`,
                uploadName: 'file',
                parentName: 'announce',
                uploadParams: {

                },

                // 上传成功回调
                uploadCallback: (data) => {
                    this.uploading = false;
                    if (!data.code) {
                        this.$Message.success('上传成功!');
                        return data.data;
                    } else {
                        this.$Message.error('上传失败!');
                    }
                },
                // 上传失败回调, 可选
                uploadFailed: (err) => {
                    this.uploading = false;
                    console.log(err)
                    this.$Message.error('上传失败!');

                }
            }
        }
    },
    methods: {
        ifUploading(val) {
            this.uploading = val;
        },
        changeAdStatus(val) {
            this.status = val * 1;
        },
        upload() {
            this.$refs.smeditor.$emit('saveInner');

            let content = getStore('smeditor');

            let bol = true;

            if (this.status === 0) bol = true;
            else bol = false;

            if (this.title === '' || this.title === null ||
                content === '' || content === null) {
                this.$Message.warning('请完善信息!');
            } else {
                if (this.ifAdd) {
                    addAnnounce({ title: this.title, content: content, isShow: bol, isTop: this.isTop })
                        .then(res => {
                            if (!res.code) {
                                this.$Message.success('操作成功!');
                                this.$router.push('/content/announcemanage');
                            } else this.$Message.error('异常错误!');
                        })
                } else {
                    updateAnnounce(this.queryDetailId, { title: this.title, content: content, isShow: bol })
                        .then(res => {
                            if (!res.code) {
                                this.$Message.success('操作成功!');
                                this.$router.push('/content/announcemanage');
                            } else this.$Message.error('异常错误!');
                        })
                }

            }


        }
    },
    created() {
        removeStore('smeditor');

        this.queryDetailId = getStore('manageID');

        if (!!this.queryDetailId) {

            this.ifAdd = false;

            announceDetail(this.queryDetailId)
                .then(res => {
                    this.createTime = res.data.createTime;
                    this.title = res.data.title;
                    if (res.data.isShow) this.status = 0;
                    else this.status = 1;

                    setStore('smeditor', res.data.content);

                })
        } else this.ifAdd = true;
    },

    components: {
        smeditor
    },


}
</script>

<style lang="less" scoped>
.wrapper {
    margin: auto;
    width: 70%;
}
.formWrapper {
    margin: auto;
    width: 70%;
}
.btnWrapper {
    margin: 20px auto;
    width: 30%;
}
.formWrapper {
    p,
    div {
        margin: 5px 0;
        input {
            display: inline-block;
            width: 90px;
        }
    }
}
.title {
    display: inline-block;
    width: 200px;
}
.circleWrapper {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    p {
        font-size: 30px;
        font-family: "黑体";
        color: #fff;
        text-align: center;
        line-height: 550px;
    }
}
</style>

