<template>
  <div class="body">
    <el-toolbar class="toolbar" style="padding-left:10px">
      <el-button :disabled="lockedByOtherUser" priv="ContentCore.TemplateMenu.Edit" @click='save'>
        <i class="fa fa-save"></i>保存</el-button>
      <span v-if="!locked">
        <el-button :disabled="lockedByOtherUser" priv="ContentCore.TemplateMenu.Edit" @click='lock' >
          <i class="fa fa-lock"></i>锁定编辑</el-button>
      </span>
      <span v-else>
        <el-button :disabled="lockedByOtherUser" @click='lock'>
          <i class="fa fa-unlock-alt"></i>解除锁定</el-button>
      </span>
      <el-button class="hide">
        <i class="fa fa-file-code-o"></i>源代码视图</el-button>
      <el-button class="hide">
        <i class="fa fa-cc-visa"></i>可视化视图</el-button>
      <span style="position: absolute; right: 20px;">正在编辑： {{templateName}}</span>
    </el-toolbar>
    <div class="content">
      <el-toolbar style="padding-left:10px">
        <el-button @click='showDialog("configTag")' title="模板类型设置">
          <i class="fa fa-text-height"></i>
        </el-button>
        <el-button @click='showDialog("catalogTag")' title="栏目列表">
          <i class="fa fa-folder-open"></i>
        </el-button>
        <el-button @click='showDialog("adTag")' title="广告版位">
          <i class="fa fa-bullhorn"></i>
        </el-button>
        <el-button @click='showDialog("articleTag")' title="文章列表">
          <i class="fa fa-files-o"></i>
        </el-button>
        <el-button @click='showDialog("fileTag")' title="附件列表">
          <i class="fa fa-file-archive-o"></i>
        </el-button>
        <el-button @click='showDialog("imageGroupTag")' title="图片组列表">
          <i class="fa fa-image"></i>
        </el-button>
        <el-button @click='showDialog("videoTag")' title="视频列表">
          <i class="fa fa-youtube-play"></i>
        </el-button>
        <el-button @click='showDialog("audioTag")' title="音频列表">
          <i class="fa fa-volume-up"></i>
        </el-button>
        <el-button @click='showDialog("imageTag")' title="图片列表">
          <i class="fa fa-image"></i>
        </el-button>
        <el-button @click='showDialog("voteTag")' title="调查">
          <i class="fa fa-bar-chart"></i>
        </el-button>
        <el-button @click='showDialog("imagePlayerTag")' title="图片播放器">
          <i class="fa fa-window-restore"></i>
        </el-button>
        <el-button @click='showDialog("linkTag")' title="友情链接">
          <i class="fa fa-link"></i>
        </el-button>
        <el-button @click='showDialog("specialTag")' title="专题列表">
          <i class="fa fa-file-text-o"></i>
        </el-button>
        <el-button @click='showDialog("listTag")' title="列表循环">
          <i class="fa fa-retweet"></i>
        </el-button>
        <el-button @click='showDialog("searchTag")' title="站内搜索">
          <i class="fa fa-search"></i>
        </el-button>
        <el-button @click='showDialog("includeTag")' title="包含文件">
          <i class="fa fa-file-archive-o"></i>
        </el-button>
        <el-button @click='showDialog("blockTag")' title="文件区块">
          <i class="fa fa-cube"></i>
        </el-button>
        <el-button @click='showDialog("positionTag")' title="当前位置">
          <i class="fa fa-share"></i>
        </el-button>
        <el-button @click='showDialog("pageBarTag")' title="分页条">
          <i class="fa fa-ellipsis-h"></i>
        </el-button>
        <el-button @click='showDialog("varTag")' title="模板字段">
          <i class="fa fa-pencil-square-o"></i>
        </el-button>
        <el-button @click='showDialog("ifTag")' title="条件输出">
          <i class="fa fa-sitemap"></i>
        </el-button>
      </el-toolbar>
      <div class="main">
        <codemirror ref="editor" :content.sync="content" :insertCode.sync='code' :mode="editorMode" :config="editorConfig" @contentChange="contentChange">
        </codemirror>
      </div>
    </div>
    <tagsdialog :tagsDialgShow.sync="tagsDialgShow" ref="tags" @insertCode="insertCode"></tagsdialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import codemirror from '@src/components/CodeMirror.vue'
import tagsdialog from './tagsDialog.vue'
export default {
  data() {
    return {
      locked: false,
      lockedByOtherUser: false,
      content: '',
      code: '',
      editorMode: '',
      editorConfig: {},
      tagsDialgShow: false,
      ID: 0,
      fileName: '',
      platformID: '',
      siteID: 0,
      type: '',
      templateName: location.href.match(/fileName=([^&]+\/)?([^&/]+)(&|$)/)[2]
    }
  },
  computed: {},
  methods: {
    contentChange(e, v) {
    },
    showDialog(val) {
      this.tagsDialgShow = true
      this.$refs.tags.selectTab(val)
    },
    async save() {
      let params = {
        type: this.type,
        ID: this.ID,
        platformID: this.platformID,
        siteID: this.siteID,
        fileName: this.fileName,
        content: this.content
      }
      let res = await axios.put('/ui/contentcore/templateeditor/content', params)
      if (res.data.status !== 1) {
        console.info('保存失败')
      }
      util.showResponseMessage(res.data)
    },
    async lock() {
      let params = {
        ID: this.ID,
        platformID: this.platformID,
        siteID: this.siteID,
        fileName: this.fileName
      }
      let lockApi = '/ui/contentcore/templateeditor/lock'
      let res
      if (this.locked) {
        res = await axios.delete(lockApi, {params: params})
      } else {
        res = await axios.put(lockApi, params)
      }
      if (res.data.status === 1) {
        this.locked = !this.locked
      }
      util.showResponseMessage(res.data)
    },
    insertCode(code) {
      if (code) {
        this.code = code
        this.tagsDialgShow = false
      }
    }
  },
  components: {codemirror, tagsdialog},
  async created() {
    this.ID = util.getQueryString('ID')
    this.platformID = util.getQueryString('platformID')
    this.siteID = util.getQueryString('siteID')
    this.fileName = util.getQueryString('fileName')
    this.type = util.getQueryString('type')
    let params = {
      type: this.type,
      ID: this.ID,
      platformID: this.platformID,
      siteID: this.siteID,
      fileName: this.fileName
    }
    let res = await axios.get('/ui/contentcore/templateeditor/content', {params})
    let resData = res.data.data
    this.content = res.data.data.content
    if (resData.locked && resData.isLockUser === 'N') {
      let lockTip = `当前模板已经被用户‘${resData.lastModifyUser}’锁定！`
      util.showErrorMessageBox(lockTip)
      this.lockedByOtherUser = true
    } else {
      this.locked = resData.locked
    }
  }
}
</script>
<style>
  .body {
    height:100%;
    padding:15px 15px 0;
  }

  .toolbar {
    background-color:#FFF;
    border-radius:4px;
  }

 .el-toolbar,.el-toolbar-body {
    min-height: 48px;
    padding: 0;
  }

.el-toolbar-body{
    position: relative !important;
    flex-flow: row wrap !important;
    padding: 0;
    min-height: 50px;
  }

  .content {
    background-color:#FFF;
    margin-top: 10px;
    border:1px solid #ddd;
    border-radius:4px;
  }

  .main .CodeMirror.cm-s-default.CodeMirror-wrap{
    border-top:1px solid #eee;
  }

  @media (min-width: 1025px) {
    .main .CodeMirror{
      height:calc(100vh - 180px);
    }
  }

  @media (max-width: 480px) {
    .main .CodeMirror{
      height:400px;
    }
  }
</style>
