<template>
  <div>
    <!--工具栏  -->
    <el-toolbar>
      <el-button :disabled="pageEditor.locked='Y'&&pageEditor.isLockUser!='Y'" priv="ContentCore.TemplateMenu.Edit" @click="publishClickHandler">
        <i class="fa fa-file-text-o" aria-hidden="true"></i>发布
      </el-button>
      <el-dropdown @command="viewClickHandler">
        <button type="button" @click="previewClickHandler" class="el-button el-button--default">
          <span ><i class="fa fa-search"></i>预览  <i class="fa fa-caret-down"></i></span>
        </button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="preview" ><i class="fa fa-search"></i>预览</el-dropdown-item>
          <el-dropdown-item command="browse" ><i class="fa fa-bolt fa-fw"></i>浏览</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <template v-if="!pageEditor.locked">
        <el-button @click="lockClickHandler" priv="ContentCore.TemplateMenu.Edit">
        <i class="fa fa-sitemap" aria-hidden="true"></i>锁定编辑
        </el-button>
      </template>
      <template v-else-if="pageEditor.isLockUser==='Y'" priv="ContentCore.TemplateMenu.Edit">
        <el-button @click="unlockClickHandler">
          <i class="fa fa-plus" aria-hidden="true"></i>解除锁定
        </el-button>
      </template>
      <template v-else>
        <el-button @click="unlockClickHandler" disabled priv="ContentCore.TemplateMenu.Edit">
          <i class="fa fa-plus" aria-hidden="true"></i>解除锁定
        </el-button>
      </template>
    </el-toolbar>
    <!--内容区域  -->
    <div id="div_content" class="content" v-html="templateCode">
      {{templateCode}}
      <!-- <iframe :src="templateEditorUrl" width="100%" height="100%" frameborder="0" class="content" allowfullscreen="true"></iframe> -->
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import editorJs from '../contentcore/templateeditor/editor.js'
export default {
  props: {ID: [String, Number]},
  data() {
    return {
      templateEditorUrl: '',
      pageEditor: {
        isLockUser: 'Y',
        locked: true,
        browseURL: '',
        previewURL: '',
        content: '',
        fileName: '',
        platformID: '',
        siteID: '',
        type: ''
      },
      templateCode: ''
    }
  },
  methods: {
    // 初始化
    async init() {
      let resp = await axios.get('/ui/workspace/pages/pageeditor', {params: {ID: this.ID}})
      if (resp.data.status === 1) {
        this.pageEditor = {
          locked: resp.data.locked || 'N',
          isLockUser: resp.data.isLockUser || '',
          browseURL: resp.data.data.publishUrl,
          previewURL: resp.data.data.previewUrl,
          fileName: resp.data.data.fileName,
          platformID: resp.data.data.platformID,
          siteID: resp.data.data.siteID,
          ID: this.ID
        }
        this.templateEditorUrl = resp.data.templateUrl
        let respData = await axios.get(`${this.templateEditorUrl}`)
        if (respData.data.status === 1) {
          this.templateCode = respData.data.templateCode
          editorJs.addIndicator(this.templateCode)
        }
      }
    },
    // 发布点击事件
    async publishClickHandler() {
      let resp = await axios.get(`/ui/workspace/pages/${this.ID}/publish`)
      util.showResponseMessage(resp.data)
    },
    // 浏览
    scanClickHandler() {
      window.open(this.pageEditor.browseURL)
    },
    // 预览
    previewClickHandler() {
      window.open(this.pageEditor.previewURL)
    },
    viewClickHandler(command) {
      if (command === 'preview') {
        this.previewClickHandler()
      }
      if (command === 'browse') {
        this.scanClickHandler()
      }
    },
    // 锁定编辑点击事件
    lockClickHandler() {

    },
    // 解除锁定点击事件
    unlockClickHandler() {

    }
  },
  watch: {
    ID(val) {
      this.init()
    }
  },
  created() {
    this.init()
  }
}
</script>
<style>
.content{
  min-height:500px;
  height:auto!important;
  height:500px;
}
</style>
