<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="70%"
    @close="close"
  >
    <el-form ref="form" label-width="110px" :model="form" :rules="rules">
      <el-form-item :label="__('消息模板编号')" prop="message_id">
        <el-input
          v-model="form.message_id"
          disabled
          :placeholder="__('消息模板编号')"
        />
      </el-form-item>

      <el-form-item :label="__('消息模板名称')" prop="message_name">
        <el-input
          v-model="form.message_name"
          disabled
          :placeholder="__('消息模板名称')"
        />
      </el-form-item>
      <el-form-item :label="__('站内信内容')" prop="message_content">
        <el-input
          v-model="form.message_content"
          :placeholder="__('站内信内容')"
        />
      </el-form-item>
      <el-form-item :label="__('短信内容')" prop="message_sms">
        <el-input v-model="form.message_sms" :placeholder="__('短信内容')" />
      </el-form-item>
      <el-form-item :label="__('APP内容')" prop="message_app">
        <el-input v-model="form.message_app" :placeholder="__('APP内容')" />
      </el-form-item>
      <el-form-item :label="__('邮件标题')" prop="message_email_title">
        <el-input
          v-model="form.message_email_title"
          :placeholder="__('邮件标题')"
        />
      </el-form-item>
      <el-form-item :label="__('邮件内容')" prop="message_email_content">
        <vab-quill
          ref="vab-quill"
          v-model="form.message_email_content"
          :min-height="300"
          :options="options"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import VabQuill from '@/extra/VabQuill'
  import { doEdit } from '@/api/message/template'

  export default {
    name: 'MessageTemplateEdit',
    components: { VabQuill },
    data() {
      return {
        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ color: [] }, { background: [] }],
                ['blockquote', 'code-block'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ align: [] }],
                [{ direction: 'rtl' }],
                [{ font: [] }],
                ['clean'],
                ['link', 'image', 'vab-upload-image'],
              ],
            },
          },
          placeholder: '',
          readOnly: false,
        },
        form: {},
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    mounted() {
      this.rules = {
        message_email_title: [
          { required: true, trigger: 'blur', message: this.__('邮件标题') },
        ],
        message_email_content: [
          { required: true, trigger: 'blur', message: this.__('邮件内容') },
        ],
        message_content: [
          { required: true, trigger: 'blur', message: this.__('站内信内容') },
        ],
        message_sms: [
          { required: true, trigger: 'blur', message: this.__('短信内容') },
        ],
        message_app: [
          { required: true, trigger: 'blur', message: this.__('APP内容') },
        ],
      }
    },
    methods: {
      __,
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = this.$options.data().form
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit(this.form)
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
