<style scoped>
  .template-btns {
    /* padding: 10px; */
  }
</style>
<template>
  <div class="pane-wrap right-detail-toolbar">
    <el-toolbar>
      <el-button :disabled="!modelId" @click="saveTemplateClickHandler" priv="Platform.Metadata.Save">
        <i class="fa fa-floppy-o"></i>保存</el-button>
    </el-toolbar>
    <div v-loading="dataLoading">
      <div class="template-btns">
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('model:fieldgroup')"><i class="fa fa-plus"></i>字段组标签</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('model:field')"><i class="fa fa-plus"></i>字段标签</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('fieldgroup.name')"><i class="fa fa-plus"></i>字段组名称</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('fieldgroup.code')"><i class="fa fa-plus"></i>字段组Code</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('field.name')"><i class="fa fa-plus"></i>字段名称</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('field.code')"><i class="fa fa-plus"></i>字段Code</el-button>
        <el-button class="dashed" :disabled="!modelId" @click="addTemplateClickHandler('field.htmlcontrol')"><i class="fa fa-plus"></i>字段控件</el-button>
      </div>
      <div v-for="(item, index) in metadataTemplate" :key="index">
        <div class="panel-fieldset">
          <h4>{{item.name}}</h4>
          <el-input type="textarea" :rows="10"
            :id="'tpl_text_' + item.MMTemplateTypeID"
            @focus="textareaFocusHandler(item.MMTemplateTypeID)"
            :disabled="!modelId" v-model="item.template">
          </el-input>
          <div class="source-wrap"><span class="source-tools gradient-btn" @click="preview(item.MMTemplateTypeID)">预览</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: { modelId: [String, Number], tabName: String, show: Boolean },
  data() {
    return {
      metadataTemplate: [], // 模板数据
      dataLoading: false,
      currentTemplateID: ''
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    preview(val) {
      window.open(`metaModelTemplate.html?ID=${this.modelId}&MMTemplateTypeID=${val}`)
    },
    // 模板输入框获取焦点事件
    textareaFocusHandler(val) {
      this.currentTemplateID = val
      // currentTemplateEditor = event.target
      //  let mMTemplateTypeID = event.target.id.replace('tpl_text_''')
      // let index = this.metadataTemplate.findIndex(val => val.MMTemplateTypeID === mMTemplateTypeID)
      // if(index!==-1){
      //   this.metadataTemplate[index].template = event.target.value
      // }
    },
    // 添加模板
    addTemplateClickHandler(key) {
      if (!this.currentTemplateID) {
        return
      }
      let tpl = ''
      switch (key) {
        case 'model:fieldgroup':
          tpl = '<model:fieldgroup code="字段分组Code"></model:fieldgroup>'
          break
        case 'model:field':
          tpl = '<model:field code="字段Code"></model:field>'
          break
        case 'fieldgroup.name':
          tpl = '@{FieldGroup.Name}'
          break
        case 'fieldgroup.code':
          tpl = '@{FieldGroup.Code}'
          break
        case 'field.name':
          tpl = '@{Field.Name}'
          break
        case 'field.code':
          tpl = '@{Field.Code}'
          break
        case 'field.htmlcontrol':
          tpl = '@{Field.ControlHtml}'
          break
      }
      let index = this.metadataTemplate.findIndex(val => val.MMTemplateTypeID === this.currentTemplateID)
      this.metadataTemplate[index].template === null ? this.metadataTemplate[index].template = tpl
        : this.metadataTemplate[index].template += tpl
    },
    // 保存模板
    async saveTemplateClickHandler() {
      try {
        this.dataLoading = true
        let res = await axios.put(`/ui/metamodels/${this.modelId}/templates/updated`, {
          templateContent: this.metadataTemplate
        })
        this.dataLoading = false
        util.showResponseMessage(res.data)
      } catch (e) {
        this.dataLoading = false
        util.showErrorNotification(e)
      }
    },
    async loadMetadataTemplate() {
      let res = await axios.get(`/ui/metamodels/${this.modelId}/templates`)
      this.metadataTemplate = (res.data.data && res.data.data.length) ? res.data.data : []
    }
  },
  components: {
  },
  watch: {
    tabName(val) {
      if (val === 'template' && this.modelId) {
        this.loadMetadataTemplate()
      } else {
        this.metadataTemplate = []
      }
    },
    modelId(val) {
      if (this.tabName === 'template' && val) {
        this.loadMetadataTemplate()
      } else {
        this.metadataTemplate = []
      }
    }
  }
}
</script>
<style scoped>
.source-wrap {
  position: relative;
}

.source-tools {
  position: absolute;
  right: 30px;
  bottom: 10px;
 /*  display: none; */
}

.gradient-btn {
  padding: 5px 8px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  line-height: 1;
  min-width: 60px;
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: 4px;
  background-color: rgba(40, 176, 110, .1);
  color: #28b06e;
  border: 1px solid rgba(40, 176, 110, .2);
}
.gradient-btn:hover {
  background-color: #28B06E;
  color: #fff;
  border: 1px solid #dcdfe6;
}
</style>
