<template>
  <el-container class="creator-editor-box">
    <el-main class="quill-main">
      <el-form>
        <el-form-item label="" class="richText">
            <quillEditor  v-model="content" ref="templateEditor"></quillEditor>
        </el-form-item>
        <el-form-item class='footer'>
          <el-button @click="confirmChange">{{ $t('general.btnSave') }}</el-button>
          <el-button @click="cancelChange">{{ $t('general.btnCancel') }}</el-button>
          <el-button @click="reset" style="float: right;">{{ $t('general.btnReset') }}</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { pageHome, pageEnd } from './template.js'

export default {
  name: 'PageTemplateEditor',
  props: {
    pageType: {
      type: String,
      default: 'pageHome'
    },
    pageContent: {
      type: String,
      default: null
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {
    quillEditor
  },
  computed: {
  },
  data () {
    return {
      content: pageHome
    }
  },
  watch: {
      pageContent(){
         this.updateContent()
      },
      show(newVal){
         this.$emit('change', { type: this.pageType, content: this.content })
      }
  },
  created () {
    this.updateContent()
  },
  methods: {
    updateContent(){
       this.content = this.pageContent || (this.pageType === 'homePage' ? pageHome : pageEnd)
    },
    /**
     * @desc 保存
     */
    confirmChange () {
      if (this.$refs.templateEditor.quill.getLength() > 1) {
        this.$emit('change', { type: this.pageType, content: this.content })
      } else {
        this.$message.warning(this.$t('editor.templateRequireTip'))
      }
    },
    cancelChange () {
       this.$confirm(this.$t('general.cfmCancelTemp'), this.$t('general.cfmUsual'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.content = this.pageContent || (this.pageType === 'homePage' ? pageHome : pageEnd)
        })
    },
    reset () {
       this.$confirm(this.$t('general.cfmResetTemp'), this.$t('general.cfmUsual'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.content = this.pageType === 'homePage' ? pageHome : pageEnd
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.creator-editor-box .footer {
  .el-button:hover, .el-button:focus{
    cursor: pointer;
    color: #48A736;
    border-color: #b3e1c7;
    background-color: #e6f5ec;
  }
}
.quill-main{
  background-color: #fff;
}
</style>
