<template>
  <div class="app-container">
    <div v-if="isUpdate">
      <el-form
        ref="formRef"
        :model="updateForm"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="预订须知" prop="content">
          <tinymce
            v-model="updateForm.content"
            menubar=""
            :toolbar="['bold italic underline strikethrough alignleft aligncenter alignright outdent indent undo redo hr bullist numlist link image charmap preview pagebreak insertdatetime table emoticons forecolor backcolor fullscreen']"
            :height="300"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="onClose">取 消</el-button>
          <el-button
            type="primary"
            :loading="submitLoading"
            @click="onSubmit"
          >确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <div class="editor-title">
        <span style="font-size: 20px;color: #000;font-weight: 500;margin-right: 20px">预订须知</span>
        <el-button
          type="primary"
          @click="handleUpdate"
        >编辑</el-button>
      </div>
      <div class="editor-content" v-html="updateForm.content" />
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce';

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      isUpdate: false,
      submitLoading: false,
      rules: {
        content: [
          { required: true, message: '请输入预订须知', trigger: 'blur' }
        ]
      },
      updateForm: {
        content: `<p>1、票型有效期：仅限游玩当日有效。</p> <p>2、检票方式：刷脸（开通快速入园后）、刷 身份证（原件）、刷二维码或现场手输身份证号入园。</p> <p>3、退改规则：一经检票，不得退票。</p> <p>4、实名制一证一票。门票仅限入园1次，不可重复入园。</p> <p>5、禁止携带宠物入园。</p>`
      }
    };
  },
  methods: {
    handleUpdate() {
      this.isUpdate = true;
    },
    onClose() {
      this.isUpdate = false;
      this.submitLoading = true;
    },
    // 确认按钮
    onSubmit() {
      this.$refs.formRef.validate(async(pass) => {
        if (!pass) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.isUpdate = false;
        this.submitLoading = true;
        this.$message.success(`${this.dialogTitle}成功`);
      });
    }
  }
};
</script>

<style scoped>
.editor-content {
  margin-top: 10px;
  border: 1px solid #E7EBF4;
  padding: 10px 20px;
}
</style>

