<template>
  <div>
    <div class="toolbar">
      <el-button v-if="dataModel.type === 'Auto'" @click="selectTemplate">
        <i class="fa fa-text-height" aria-hidden="true"></i>选择区块版式</el-button>
      <el-button v-if="dataModel.type === 'Auto'" @click="modifyParams">
        <i class="fa fa-text-height" aria-hidden="true"></i>修改模板参数</el-button>
    </div>
    <el-input type="textarea" v-model="dataModel.templateContent" :rows="15"></el-input>

    <!-- 模板选择弹窗 -->
    <template-dialog :show.sync="templateSelector.show" @clickOK="onTemplateSelected" :submitLoading.sync="templateSelector.submitLoading">
    </template-dialog>

    <components :is="templateEditorUrl" :show.sync="templateParamsShow" :templateParams="templateParamsObj" @clickOK="paramsOkHandler"></components>

  </div>
</template>

<script>
import conditionalFilter from '@src/components/contentComponent/conditionItem.vue'
import util from '@src/common/util.js'
import catalogTree from '../../contentcore/components/CatalogSelector.vue'
import templateDialog from '../blockstyles/blockTemplateSelectorDialog.vue'
import firstLogoSummaryStyle from '../blockstyles/firstLogoSummaryStyle.vue'
import logoSummaryStyle from '../blockstyles/logoSummaryStyle.vue'
import titleListStyle from '../blockstyles/titleListStyle.vue'
import topBoldStyle from '../blockstyles/topBoldStyle.vue'
import topTwoLogoStyle from '../blockstyles/topTwoLogoStyle.vue'
import twoColumnLogoStyle from '../blockstyles/twoColumnLogoStyle.vue'
import twoColumnLogoSummaryStyle from '../blockstyles/twoColumnLogoSummaryStyle.vue'
import twoColumnStyle from '../blockstyles/twoColumnStyle.vue'
export default {
  components: {
    'conditional-filter': conditionalFilter,
    'catalog-tree': catalogTree,
    'template-dialog': templateDialog,
    firstLogoSummaryStyle,
    logoSummaryStyle,
    titleListStyle,
    topBoldStyle,
    topTwoLogoStyle,
    twoColumnLogoStyle,
    twoColumnLogoSummaryStyle,
    twoColumnStyle
  },
  props: { dataModel: Object },
  data() {
    return {
      submitLoading: false,

      /* 内置模板 */
      templateSelector: {
        show: false,
        submitLoading: false
      },
      templateParamsObj: {},
      templateEditorUrl: '',
      templateParamsShow: false
    }
  },
  methods: {
    selectTemplate() {
      this.templateSelector.show = true
    },
    modifyParams() {
      if (!this.dataModel.templateParams) {
        util.showErrorMessageBox('非内置模板不能修改参数！')
      } else {
        // 打开参数弹窗
        this.templateParamsObj = JSON.parse(this.dataModel.templateParams)
        this.templateEditorUrl = this.templateParamsObj.templateEditorUrl
        this.templateParamsShow = true
      }
    },
    onTemplateSelected(value) {
      const tmp = require('html-loader!../' + value.template)
      this.dataModel.templateContent = tmp
      this.templateSelector.submitLoading = false
      this.templateSelector.show = false
      // 打开参数弹窗
      this.templateParamsObj = null
      this.templateEditorUrl = value.editorURL
      this.templateParamsShow = true
    },
    paramsOkHandler(value) {
      if (value) {
        this.dataModel.templateParams = JSON.stringify(value)
        this.submitLoading = false
        this.templateParamsShow = false
      }
    }
  }
}
</script>

<style scoped>
  .toolbar {
    margin: 15px 0 15px 10px;
  }
</style>
