<template>
  <div>
    <div class="content-head">
      <h3>{{ title }}</h3>
      <h5>发布信息公告</h5>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <div style="margin-bottom: 30px" class="back-white">
          <div class="describe">基本信息</div>
          <div class="flex">
            <el-form-item label="所属分类" prop="type">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布时间" prop="date">
              <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
              <div>不选择默认当前时间，立即发布</div>
            </el-form-item>
          </div>
        </div>
        <div class="back-white" style="padding-bottom: 100px;">
          <div class="describe">内容描述</div>
          <div class="flex">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-input v-model="form.author" placeholder="请输入"></el-input>
              <div>不输入默认平台发布</div>
            </el-form-item>
          </div>
          <div class="margin-left">
            <div><span class="red">*</span>内容</div>
            <quill-editor ref="text" v-model="form.content" :options="editorOption" class="myQuillEditor"  />
          </div>
        </div>
      </el-form>
    </div>
    <div class="release back-white">
      <el-button>取消</el-button>
      <el-button type="primary" style="margin:0 30px 0 30px">{{ buttonTitle }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      title: '',
      buttonTitle: '',
      editorOption: {},
      form: {
        name: ''
      },
      options: [{
        value: '选项1',
        label: '新闻资讯'
      }, {
        value: '选项2',
        label: '平台动态'
      }, {
        value: '选项3',
        label: '法律法规'
      }],
      rules: {
        type: [{
          required: true,
          message: '请选择分类',
          trigger: 'change'
        }],
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blue'
        }]
      }
    }
  },
  created() {
    console.log(this.$route)
    const type = this.$route.params.type
    if (type === 'add') {
      console.log('发布')
      this.buttonTitle = '发布'
	  this.title = '发布'
    } else {
      console.log('保存')
      this.buttonTitle = '保存'
	   this.title = '编辑'
      const formId = this.$route.query.id
    }
  }
}
</script>

<style scoped>
	.content {
		padding: 0;
		background: #F0F2F5;
	}

	.content>div {
		background: #fff;
	}

	.margin-left{
		margin-left: 50px;
	}
	.red{
		color:red;
		margin-right: 5px;
	}
	.release{
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding-bottom: 10px;
	}
</style>
