<template>
  <el-dialog title="报名页面" :visible.sync="applyInfo.dialogVisible" class="order-details">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="峰会主题：" prop="name">
        <UE
          :editorId="activeName"
          :defaultMsg="versionRow.content"
          :config="config"
          ref="ue"
          @ready="editorReadyEvent"
        ></UE>
      </el-form-item>
      <el-form-item label="诚邀莅临：" prop="name">
        <UE
          :editorId="activeNameShare"
          :defaultMsg="versionRow.share"
          :config="config"
          ref="ue"
          @ready="editorReadyEventShare"
        ></UE>
      </el-form-item>
      <el-form-item label="公司简章：" prop="name">
        <UE
          :editorId="activeNameFirm"
          :defaultMsg="versionRow.contentFirm"
          :config="config"
          ref="ue"
          @ready="editorReadyEventFirm"
        ></UE>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import UE from "../../modal/Ueditor"; //百度ue富文本
export default {
  applyInfo: {
    handler: function(val, oldval) {
      console.log(val);
      console.log(oldval);
    },
    deep: true //对象内部的属性监听，也叫深度监听
  },
  props: {
    applyInfo: Object
  },
  components: {
    UE
  },
  created() {},
  data() {
    return {
      rules: {},
      ruleForm: {},
      dialogVisible: false,
      activeName: "first",
      activeNameShare: "second",
      activeNameFirm: "three",
      versionRow: {
        content: "",
        share: "",
        contentFirm: ""
      },
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      }
    };
  },
  methods: {
    editorReadyEvent(instance) {
      let t = this;
      instance.addListener("contentChange", () => {
        if (t.activeName == "first") {
          t.versionRow.content = instance.getContent();
        }
      });
    },
    editorReadyEventShare(instance) {
      let t = this;
      instance.addListener("contentChange", () => {
        if (t.activeNameShare == "second") {
          t.versionRow.share = instance.getContent();
        }
      });
    },
    editorReadyEventFirm(instance) {
      let t = this;
      instance.addListener("contentChange", () => {
        if (t.activeNameFirm == "three") {
          t.versionRow.contentFirm = instance.getContent();
        }
      });
    }
  }
};
</script>