<template>
  <div class="content">
    <div>
      <tinymce v-model="content" :height="683" :width="800"></tinymce>
      <div style="font-size: 12px; line-height: 30px;">tip:图片宽度自适应手机屏幕方法：插入图片时宽度设置为100%,并勾选"保持纵横比"</div>
      <el-button type="primary" style="display:block; margin: 0 auto;" @click="onSave">保存</el-button>
    </div>

    <div class="preview">
      <div class="title">实&nbsp;&nbsp;&nbsp;时&nbsp;&nbsp;&nbsp;预&nbsp;&nbsp;&nbsp;览</div>
      <iframe class="iframe" :srcdoc="content"></iframe>
    </div>
  </div>
</template>

<script>

import Tinymce from '@/components/Tinymce'

export default {
  name: "visitorRegulations",
  components: {
    Tinymce
  },
  data() {
    return {
      content: '',
    }
  },
  mounted() {
    this.onQuery();
  },

  methods: {
    onQuery() {
      this.$axios.get("/v1/visitor/regulation/query").then(data => {
        this.content = data.content;
      })
    },

    onSave() {
      this.$axios.put("/v1/visitor/regulation/update", {content: this.content}).then(() => {
        this.$message.success("保存成功！");
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;

  .preview {
    margin-left: 20px;
    border: #8c939d solid 1px;
    height: 683px;
    width: 375px;

    .title {
      width: 100%;
      text-align: center;
      font-size: 20px;
      line-height: 50px;
      border-bottom: 1px solid #cccccc;
    }

    .iframe {
      width: 100%;
      height: calc(100% - 50px);
      border: none;
    }
  }
}
</style>
