<template>
    <div class="create-notify-container">
        <h2 class="create-notify-title">
            {{$t('notify.createTitle')}}
        </h2>
        <div class="notify-form-wrap">
            <Form ref="noticeInfo" :rules="ruleValidate" :model="notifyInfo" label-colon class="notify-form" :label-width="80">
                <FormItem prop="title" :label="$t('notify.title')">
                    <Input v-model="notifyInfo.title" :placeholder="$t('notify.titleHolder')">
                    </Input>
                </FormItem>
                <FormItem prop="data" :label="$t('notify.notifyTime')">
                    <DatePicker v-model="noticeDate" :editable="false" type="daterange" @on-change="getTimestamp" split-panels placeholder="公告时间" style="width:100%"></DatePicker>
                </FormItem>
                <FormItem prop="content" :label="$t('notify.notifyContent')">
                    <div ref="noticeEditor"></div>
                </FormItem>
                <!-- <FormItem prop="user" label="附件">
                    <Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #eeeeee"></Icon>
                            <p>上传附件</p>
                        </div>
                    </Upload>
                </FormItem> -->
                <FormItem style="margin-top:40px">
                    <Button type="success" class="form-action-btn" @click="publish">
                        {{notifyInfo.id ? $t('notify.saveText') : $t('notify.publishText')}}
                    </Button>
                    <Button type="primary" class="form-action-btn" @click="cancelPublish">
                        {{notifyInfo.id ? $t('notify.cancelEdit') : $t('notify.cancelPublish')}}
                    </Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import E from '@/utils/wangEditor.js'
export default {
    data() {
        // 验证公告时间
        const vDate = (rule, value, callback) => {
            if (!this.notifyInfo.startTime || !this.notifyInfo.endTime) {
                callback(new Error(this.$t('notify.timeTips')))
            }
            callback()
        }
        // 验证公告时间
        const vContent = (rule, value, callback) => {
            if (!this.notifyInfo.content) {
                callback(new Error(this.$t('notify.contentTips')))
            }
            callback()
        }
        return {
            notifyInfo: {
                id: '',
                title: '',
                content: '',
                startTime: '',
                endTime: '',
                files: []
            },
            noticeDate: [],
            noticeEditor: undefined,
            ruleValidate: {
                title: [
                    { required: true, message: this.$t('notify.titleTips'), trigger: 'change' }
                ],
                data: [
                    { required: true, validator: vDate, trigger: 'change' },
                ],
                content: [
                    { required: true, validator: vContent, trigger: 'change' },
                ],
            }
        }
    },
    methods: {
        getTimestamp(date) {
            console.log(this.noticeDate)
            console.log(date)
            if (date.length == 2) {
                this.notifyInfo.startTime = new Date(date[0]).getTime()
                this.notifyInfo.endTime = new Date(date[1]).getTime()
            }
        },
        //初始化富文本编辑器
        initEditor() {
            if (!this.noticeEditor) {
                let noticeEditor = new E(this.$refs.noticeEditor)
                noticeEditor.customConfig.onchange = (html) => {
                    //TODO 设置课程公告
                    this.notifyInfo.content = html == '<p><br></p>' ? '' : html
                    console.log(this.notifyInfo.content)
                }
                noticeEditor.customConfig.menus = [
                    'bold', // 粗体
                    'italic', // 斜体
                    'underline', // 下划线
                    'list', // 列表
                    'link', // 插入链接
                    'image' // 插入图片
                ]
                noticeEditor.customConfig.showLinkImg = false
                noticeEditor.customConfig.uploadFileName = 'files'
                noticeEditor.create()
                noticeEditor.txt.html(this.notifyInfo.content)
                this.noticeEditor = noticeEditor
            }
        },
        cancelPublish() {
            if (!this.notifyInfo.id && (this.notifyInfo.title || this.notifyInfo.content || this.notifyInfo.startTime || this.notifyInfo.endTime)) {
                this.$Modal.confirm({
                    title: this.$t('notify.cancelPublish'),
                    content: this.$t('notify.reserveContent'),
                    okText: this.$t('notify.reserveOk'),
                    cancelText: this.$t('notify.reserveCancel'),
                    onOk: () => {
                        this.saveNotice(0)
                    },
                    onCancel: () => {
                        this.$router.push({
                            name: 'schoolNotify'
                        })
                    }
                })
            } else {
                this.$router.push({
                    name: 'schoolNotify'
                })
            }
        },
        publish() {
            this.$refs['noticeInfo'].validate((valid) => {
                if (valid) {
                    this.saveNotice(1)
                } else {
                    this.$Message.error(this.$t('notify.fullInfoTips'));
                }
            })

        },
        saveNotice(publish) {
            let params = {
                id: this.notifyInfo.id,
                code: this.$store.state.userInfo.schoolCode,
                school: this.$store.state.userInfo.schoolCode,
                startTime: this.notifyInfo.startTime,
                endTime: this.notifyInfo.endTime,
                type: 'school',
                content: this.notifyInfo.content,
                title: this.notifyInfo.title,
                creatorId: this.$store.state.userInfo.TEAMModelId,
                publish,
                createTime: new Date().getTime()
            }
            this.$api.notice.UpsertNotice(params).then(
                res => {
                    this.$router.push({
                        name: 'schoolNotify'
                    })
                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        }
    },
    mounted() {
        this.initEditor()
    },
    created() {
        console.log(this.$route)
        let routeData = this.$route.params
        //编辑公告
        if (routeData.notice) {
            this.notifyInfo.title = routeData.notice.title
            this.notifyInfo.startTime = routeData.notice.startTime
            this.notifyInfo.endTime = routeData.notice.endTime
            this.notifyInfo.content = routeData.notice.content
            this.notifyInfo.id = routeData.notice.id
            this.noticeDate = []
            this.noticeDate.push(new Date(this.notifyInfo.startTime))
            this.noticeDate.push(new Date(this.notifyInfo.endTime))
        }
    }

}
</script>
<style lang="less" scoped>
@import "./CreateNotify.less";
</style>
<style lang="less">
.notify-form-wrap .ivu-input {
    // background: #404040;
}
.notify-form-wrap{
    .w-e-menu{
        z-index: 100 !important;
    }
    .w-e-text-container{
        z-index: 99 !important;
    }
}
// .w-e-toolbar .w-e-menu:hover
</style>