<template>
  <div class="pane-up-wrap right-detail-toolbar" v-loading="tabsDataLoading">
    <el-toolbar>
      <el-button @click="loadTemplateBasicInfo(currentTemplateParam)">
        <i class="fa fa-refresh"></i>刷新
      </el-button>
      <el-button  @click="editTemplate" priv="ContentCore.TemplateMenu.Edit">
        <i class="fa fa-edit" aria-hidden="true"></i>编辑
      </el-button>
      <el-button @click="compileTemplate" priv="ContentCore.TemplateMenu.Compile">
        <i class="fa fa-file-code-o" aria-hidden="true"></i>编译
      </el-button>
      <el-button @click="checkError" priv="ContentCore.TemplateMenu.Compile">
        <i class="fa fa-pencil" aria-hidden="true"></i>检查错误
      </el-button>
      <el-button @click="exportFile" priv="ContentCore.TemplateMenu.Export">
        <i class="fa fa-arrow-right" aria-hidden="true"></i>打包导出相关文件
      </el-button>
    </el-toolbar>

    <div>
      <div class="panel-fieldset">
        <h4 class="panel-legend">模板属性</h4>
        <template v-for="item in templateAttrs">
          <p class="tag-item" :key="item.valueKey" v-if="item.valueKey=='error' && template.basicInfo.attr.error" style="color:red">
            <span class="tag-label">{{item.labelName}}:</span>
            <span class="tag-value">{{template.basicInfo.attr[item.valueKey]}}</span>
          </p>
          <p class="tag-item" :key="item.valueKey" v-else-if="item.valueKey!='error'">
            <span class="tag-label">{{item.labelName}}:</span>
            <span class="tag-value" v-html="template.basicInfo.attr[item.valueKey]"></span>
          </p>
        </template>
      </div>

      <div class="panel-fieldset">
        <h4 class="panel-legend">本模板引用了如下数据:</h4>
          <p class="tag-item" v-for="item in template.basicInfo.reference" :key="item.ID">
            <span class="tag-label">{{item.typeName}}:</span>
            <span class="tag-value">{{item.name}}
              <font color="gray">
                (ID=<font color='green'>{{item.ID}}</font>)
              </font>
            </span>
          </p>
      </div>

      <div class="panel-fieldset">
        <h4 class="panel-legend">本模板被如下数据引用:</h4>
          <p class="tag-item" v-for="item in template.basicInfo.use" :key="item.ID">
            <span class="tag-label">{{item.typeName}}:</span>
            <span class="tag-value">{{item.name}}
              <font color="gray">
                (ID=<font color='green'>{{item.ID}}</font>)
              </font>
            </span>
          </p>
      </div>
    </div>

  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      templateAttrs: [
        { labelName: '模板文件', valueKey: 'fileName' },
        { labelName: '模板类型', valueKey: 'templateType' },
        { labelName: '模板名称', valueKey: 'name' },
        { labelName: '模板作者', valueKey: 'author' },
        { labelName: '最后修改时间', valueKey: 'lastModified' },
        { labelName: '脚本起始', valueKey: 'scriptStart' },
        { labelName: '脚本结束', valueKey: 'scriptEnd' },
        { labelName: '未成功编译', valueKey: 'error' }
      ],
      currentTemplateParam: {
        fileName: '',
        platformID: null,
        siteID: null,
        name: ''
      }, // 参数
      template: {
        basicInfo: {
          attr: {},
          reference: [],
          use: []
        }
      }, // 基本信息
      tabsDataLoading: false, // tabs数据加载状态
      checkErrorBtnLoading: false, // 检查错误按钮loading状态
      compileBtnLoading: false // 编译按钮loading状态
    }
  },
  methods: {
    // 加载模板基本信息
    async loadTemplateBasicInfo(param) {
      !util.isEmptyObject(param) && Object.assign(this.currentTemplateParam, param)

      let fileName = this.currentTemplateParam.fileName
      let platformID = this.currentTemplateParam.platformID
      if (!fileName || !platformID) {
        this.template.basicInfo.attr = {}
        this.template.basicInfo.reference = []
        this.template.basicInfo.use = []
        return
      }

      let params = {
        fileName: fileName,
        platformID: platformID
      }
      this.tabsDataLoading = true
      let templateAttr = await axios.get(`/ui/template/attributes`, { params: params })
      let templateReference = await axios.get(`/ui/template/references`, { params: params })
      let templateUse = await axios.get(`/ui/template/usedlist`, { params: params })
      this.template.basicInfo.attr = templateAttr.data.status === 1 ? templateAttr.data.data : this.template.basicInfo.attr
      this.template.basicInfo.reference =
        templateReference.data.status === 1 ? templateReference.data.data : this.template.basicInfo.reference
      this.template.basicInfo.use = templateUse.data.status === 1 ? templateUse.data.data : this.template.basicInfo.use
      this.tabsDataLoading = false
    },

    // 编辑模板
    editTemplate() {
      if (String(this.template.basicInfo.attr.visualTemplatePageID) !== '0') {
        window.open(`specialDesigner.html?ID=${this.template.basicInfo.attr.visualTemplatePageID}`)
      } else {
        window.open(
          `./templateEditor.html?ID=&fileName=${this.currentTemplateParam.fileName}&platformID=${
            this.currentTemplateParam.platformID
          }&siteID=${this.currentTemplateParam.siteID}`
        )
      }
    },

    // 编译模板
    async compileTemplate() {
      if (!this.currentTemplateParam.fileName) {
        this.$alert('请先选择模板 ！', '系统提示')
        return
      }

      this.compileBtnLoading = true

      let res = await axios.put('/ui/template/compile', this.currentTemplateParam)
      let data = res.data
      if (data.status === 1) {
        this.MsgPop(data.message, 'success')
      } else {
        this.$alert(data.message, '系统提示')
      }
      this.compileBtnLoading = false
    },

    // 检查错误
    async checkError() {
      if (!this.currentTemplateParam.fileName) {
        this.$alert('请先选择模板 ！')
        return
      }

      this.checkErrorBtnLoading = true

      let res = await axios.put('/ui/template/checkerror', this.currentTemplateParam)
      let data = res.data
      if (data.status === 1) {
        this.$alert('未发现错误 ！', '系统提示')
      } else {
        this.$alert(data.message, '系统提示')
      }
      this.checkErrorBtnLoading = false
    },

    // 打包导出相关文件
    exportFile() {
      if (!this.currentTemplateParam.fileName) {
        this.$alert('请先选择模板 ！', '系统提示')
        return
      }
      let fileName = this.currentTemplateParam.fileName
      let platformID = this.currentTemplateParam.platformID
      let siteID = this.currentTemplateParam.siteID
      this.MsgPop(' 正在导出，请等待 . . .')
      window.location.href = `ui/template/export?fileName=${fileName}&platformID=${platformID}&siteID=${siteID}`
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.padding-top-bottom .search-bar {
  padding-bottom: 5px;
}
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}
.tag-item,
.title {
  line-height: 2;
  margin: 0.2em 0 0.3em 0;
}
.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100px;
}
.title {
  margin-top: 1em;
  font-size: 20px;
}
</style>
