<template>
  <div class="app-container">
    <div class="btn-group">
      <div class="pull-right">
        <el-button type="primary" :loading="saveLoading" @click="save">{{ $t('ec.dialog.save') }}</el-button>
        <el-button type="default" @click="returnBack">{{ $t('ec.dialog.close') }}</el-button>
      </div>
    </div>
    <el-form ref="form" v-loading="loading" :model="formItem" :rules="rules" :label-width="'110px'">
      <el-form-item
        :label="$t('ec.template.name')"
        prop="name"
        :rules="[
          {required: true, message: $t('ec.template.nameEmpty'), trigger: 'blur'}
        ]"
      >
        <el-input v-model="formItem.name" type="text" :placeholder="$t('ec.template.name')" />
      </el-form-item>
      <el-form-item
        :label="$t('ec.template.subject')"
        prop="templateSubject"
        :rules="[
          {required: true, message: $t('ec.template.subjectEmpty'), trigger: 'blur'}
        ]"
      >
        <el-input v-model="formItem.templateSubject" type="text" :placeholder="$t('ec.template.subject')" />
      </el-form-item>
      <el-form-item
        :label="$t('ec.template.content')"
        prop="templateContent"
        :rules="[
          {required: true, message: $t('ec.template.contentEmpty'), trigger: 'blur'}
        ]"
      >
<!--        <tinymce v-model="formItem.templateContent" :height="300" />-->
        <editor v-model="formItem.templateContent" lang="ftl" width="100%" height="700px" @init="editorInit" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import mixin from 'ecip-web/utils/common-mixin'
import { getById, save, update } from 'ecip-web/api/vue/email/emailTemplateApi'

export default {
  name: 'ModulesEmailEmailTemplateForm',
  components: {
    editor: require('vue2-ace-editor')
  },
  mixins: [...mixin],
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 页面加载遮罩
      saveLoading: false, //  保存加载
      id: this.$route.params.id,
      formItem: {
      },
      rules: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    editorInit() { //  ace-editor 初始化
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/ftl')
      require('brace/theme/chrome')
      require('brace/ext/searchbox')
    },
    htmlDecode(a) { // html转义
      a = '' + a
      return a.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
        .replace(/&quot;/g, '"').replace(/&apos;/g, "'")
    },
    getData() {
      if (this.id) { //  编辑
        this.loading = true //  显示遮罩层
        getById(this.id).then(res => {
          // const data = res.data
          // data.templateContent = this.htmlDecode(data.templateContent)
          // console.log(data.templateContent)
          this.formItem = res.data
          this.loading = false //  关闭遮罩层
        })
      } else {
        this.formItem = {
        }
      }
    },
    save() {
      let validFlag
      this.$refs.form.validate(valid => { validFlag = valid })
      if (!validFlag) {
        return
      }
      const data = Object.assign({}, this.formItem, { templateContent: this.htmlDecode(this.formItem.templateContent) })
      if (this.isEdit) {
        this.saveLoading = true
        update(this.id, data).then(res => {
          this.saveLoading = false
          this.returnBack()
          this.$notify.success(this.$t('ec.message.saveSuccess'))
        })
      } else {
        this.saveLoading = true
        save(data).then(res => {
          this.saveLoading = false
          this.returnBack()
          this.$notify.success(this.$t('ec.message.saveSuccess'))
        })
      }
    },
    returnBack() {
      this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
        this.$router.push(`/emailTemplateView`)
      })
    }
  }
}
</script>

<style scoped>

</style>
