<template>
  <div class="message-add">
    <div class="message-add-box">
      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="消息标题:" prop="title">
          <el-input v-model="message.title" placeholder="请输入消息标题"></el-input>
        </el-form-item>
        <el-form-item label="发布时间: " required>
          <el-date-picker v-model="message.newsDate" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-time-picker placeholder="选择时间" v-model="message.newsTime"></el-time-picker>
        </el-form-item>
        <el-form-item label="消息内容:" prop="content">
          <editor v-model="message.content"></editor>
        </el-form-item>
      </el-form>
      <el-form style="margin-left: 100px;">
        <el-button type="primary" @click="submit">创建</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addMessage } from '../../api/message/message'
export default {
  data() {
    return {
      message: {
        title: '',
        content: '',
        newsDate: '',
        newsTime: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入消息标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入消息内容', trigger: 'blur' }
        ]
      },
      content: ''
    }
  },
  methods: {
    submit() {
      if (this.message.title && this.message.content) {
        let nyr = this.$formatDate(this.message.newsDate, 'yyyy-MM-dd');
        let sfm = this.$formatDate(this.message.newsTime, 'hh:mm:ss');
        let news = {
          newsTitle: this.message.title,
          newsContent: this.message.content,
          newsTime: nyr + ' ' + sfm
        }
        console.log(news.newsTime);
        addMessage(news).then((res) => {
          this.message.title = '';
          this.message.content = '';
          this.message.newsDate = '';
          this.message.newsTime = '';
        })
        this.$notify({
          title: '成功',
          message: '创建消息成功',
          type: 'success'
        });
        this.$router.push("./messageList");
      } else {
        this.$notify({
          title: '警告',
          message: '请填写内容',
          type: 'warning'
        });
      }
    },
    reset() {
      this.message.title = '';
      this.message.content = '';
      this.message.newsDate = '';
      this.message.newsTime = '';
    }
  }
}
</script>

<style>
.message-add {
  width: 700px;
  height: 100%;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #ccc;
}

.message-add-box {
  padding: 40px;
}

/* .users-input-box{
  color:aqua;
} */

.quill-editor /deep/ .ql-container {
  min-height: 220px;
}

.ql-container {
  min-height: 230px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
  width: 450px;
}

.ql-toolbar.ql-snow+.ql-container.ql-snow {
  border-top: 0px;
  width: 450px;
}
</style>