<template>
  <div class="wrap">
    <!-- {{ str }} -->
    <h2>标题：</h2>
    <a-input style="margin-bottom: 20px" v-model.trim="title" />
    <h2>封面图片</h2>
    <a-upload
      :action="action"
      :default-file-list="fileList"
      @change="fileChange"
      list-type="picture"
      name="files"
    >
      <a-button v-show="fileList.length === 0">
        <a-icon type="upload" />点击上传
      </a-button>
    </a-upload>
    <h2 style="margin-top: 20px">内容：</h2>
    <div class="edit_container" style="height: auto; margin-bottom: 40px">
      <quill-editor
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @change="onEditorChange($event)"
        @focus="onEditorFocus($event)"
        ref="myQuillEditor"
        v-model="content"
      ></quill-editor>
    </div>
    <a-button @click="subMit" type="primary">发表</a-button>
    <router-link @click="subMit" style="margin-left: 40px" tag="a-button" to="Community">取消</router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { upload } from 'config/api';
import { addComment } from 'config/selComment';

export default {
  name: 'Posting',
  components: { quillEditor },
  data() {
    return {
      str: '发帖界面',
      title: '',
      content: ``,
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'], //上传图片、上传视频
          ],
        },
      },
      action: upload,
      fileList: [], // 附件列表
      files: '', // 附件Id
    };
  },
  computed: {
    ...mapState('home', ['postDetail', 'postVal']),
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {
      // 内容改变事件
      // console.log(this.content);
    },
    // 上传图片事件
    fileChange(info) {
      this.fileList = info.fileList;
      if (info.file.status === 'done') {
        this.files = [];
        this.files = info.fileList[0].response.data[0].id;
        console.log(this.files);
      }
    },
    // 发帖
    async subMit() {
      try {
        const params = {
          param: {
            content: this.content,
            category: this.postVal,
            picId: this.files,
            title: this.title,
          },
        };
        const res = await addComment(params);
        const { msg, data, code } = res.data;
        if (code === 200) {
          this.$message.success('发表成功');
          this.$router.push('/Community');
        } else {
          this.$message.error('发表失败');
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
};
</script>

<style lang="stylus" >
.wrap {
  width: 1260px;
  min-height: 1037px;
  margin: 80px auto 28px auto;
  overflow: hidden;
  opacity: 1;
}

.ql-editor {
  min-height: 600px;
  max-height: 800px;
}
</style>
