<template>
  <BasicEditor :question="question">
    <el-tab-pane :label="$t('general.btnEdit')" name="edit">
      <el-form label-position="left">
        <el-form-item :label="$t('editor.questName')" class="name-set-form-item">
          <el-input v-model="question.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('editor.questRichText')" class="richText">
          <quillEditor :content="content" :options="editorOption" v-model="question.html">
          </quillEditor>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane :label="$t('general.btnChoose')" name="choose">
      <el-form label-position="left">
        <el-form-item>
          <div style="text-align: left">
            <el-checkbox v-model="question.visible">{{ $t('editor.isVisible') }}</el-checkbox>
          </div>
          <div style="text-align: left">
            <el-checkbox v-model="question.isRequired">{{ $t('editor.isRequired') }}</el-checkbox>
          </div>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </BasicEditor>
</template>

<script>
  import Editor from './Editor'
  import BasicEditor from './BasicEditor'

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {
    quillEditor,
    Quill
  } from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)
  export default {
    data() {
      return {
        content: null,
        editorOption: {
          modules: {
            ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入 
              name: 'img', // 图片参数名
              size: 800/1024, // 可选参数 图片大小，单位为M，1M = 1024kb
              action: '', // 服务器地址, 如果action为空，则采用base64插入图片
              // response 为一个函数用来获取服务器返回的具体图片地址
              // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
              // 则 return res.data.url
              response: (res) => {
                return res.info
              },
              headers: (xhr) => {
                // xhr.setRequestHeader('myHeader','myValue')
              }, // 可选参数 设置请求头部
              sizeError: () => {
                this.$message.warning(this.$t('question.imageSize800'))
              }, // 图片超过大小的回调
              start: () => {}, // 可选参数 自定义开始上传触发事件
              end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
              error: () => {}, // 可选参数 上传失败触发的事件
              success: () => {}, // 可选参数  上传成功触发的事件
              change: (xhr, formData) => {
                // xhr.setRequestHeader('myHeader','myValue')
                // formData.append('token', 'myToken')
              } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            },
            toolbar: { // 如果不上传图片到服务器，此处不必配置
              container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
              handlers: {
                'image': function () { // 劫持原来的图片点击按钮事件
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        }
      }
    },
    mixins: [Editor],
    props: ['question'],
    components: {
      BasicEditor,
      quillEditor
    },
    beforeMount: function () {
      this.content = this.question.html
    },
    mounted() {
      window.pp = this
    },
    methods: {
      isShowTitle: function () {
        return false
      }
    }
  }
</script>

<style scoped>
  .el-form /deep/ .name-set-form-item .el-form-item__content>.el-input {
    display: block;
  }

  .el-form /deep/ .el-form-item .el-form-item__label {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 12px;
    /* line-height: 12px; */
  }

  .richText /deep/ .el-form-item__content {
    margin-top: 40px;
  }

  .quill-editor {
    background: #fff;
  }
</style>
