<template>
   <div class="layout-no-cols">
      <el-toolbar>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页
        </el-button>
        <span class="button-separator"></span>
        <el-button @click="doTemplateAdd" :loading="okBtnLoading" priv="ContentCore.TemplateMenu.Edit">
          <i class="fa fa-save"></i>保 存
        </el-button>
      </el-toolbar>
      <div>
        <div class="detail-panel form-panel">
          <el-form ref="addTemplateValidateForm" label-width="100px" :model="templateData">
            <el-form-item label="文件名称：" prop="fileName" :rules="[{ required: true, message: '不能为空'}]">
              <el-input auto-complete="off" v-model="templateData.fileName">
                <template slot="append">{{templateSuffix}}</template>
              </el-input>
            </el-form-item>
            <el-form-item label="模板名称：" prop="tempName">
              <el-input auto-complete="off" v-model="templateData.tempName"></el-input>
            </el-form-item>
            <el-form-item label="路径：" prop="filePath">
              <el-input placeholder="" v-model="templateData.filePath">
                <template slot="prepend">/template/</template>
              </el-input>
            </el-form-item>
            <el-form-item label="模板类型：" prop="tempType">
              <el-select filterable placeholder="" v-model="templateData.tempType" style="width:auto">
                <el-option v-for="item in templateTypes" :key="item.key" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编辑模式：" prop="editMode">
              <el-radio v-model="templateData.editMode" label="source">源码编辑</el-radio><el-tooltip content="可视化模板编辑功能完善中，敬请期待" placement="top-start"><el-radio :disabled="true" v-model="templateData.editMode" label="visual">可视化编辑</el-radio></el-tooltip>
            </el-form-item>
            <div class="panel-card" v-show="templateData.editMode === 'visual'">
              <template-selector :template-id.sync="templateData.fromTemplateID" @templateTypeChanged="templateTypeChangeHandle"></template-selector>
            </div>
          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
import util from '@src/common/util.js'
import TemplateSelector from '../../special/components/templateSelector.vue'
export default {
  components: {
    TemplateSelector
  },
  data() {
    return {
      templateSuffix: '.template.html', // 模板扩展名
      dialogDataLoading: false, // dialog中数据加载状态
      okBtnLoading: false, // 确定按钮loading
      templateTypes: [], // 模板类型
      templateData: {
        fileName: '', // 文件名称
        tempName: '', // 模板名称
        filePath: '', // 路径
        tempType: 'SiteIndex', // 模板类型
        editMode: 'source', // 编辑模式
        fromTemplateType: 'Y', // Y为从模板创建，N为使用空白模板
        fromTemplateID: '' // 可视化模板
      } // 当前新建模板Dialog表单数据
    }
  },
  mounted() {
    this.templateData.siteID = this.$route.query.siteID ? this.$route.query.siteID : this.$root.siteID
    this.templateData.platformID = this.$route.query.platformID ? this.$route.query.platformID : ''
    this.templateData.filePath = this.$route.query.parentPath ? this.$route.query.parentPath : ''
    this.initDialog()
  },
  watch: {
    'templateData.editMode'(val) {
      if (val === 'source') {
        this.templateSuffix = '.template.html'
      } else {
        this.templateSuffix = '.template.json'
      }
    }
  },
  methods: {
    // 初始化dialog
    initDialog() {
      this.okBtnLoading = false
      this.loadTemplateTypes()
    },
    // 加载模板类型下拉框数据
    async loadTemplateTypes() {
      this.dialogDataLoading = true
      let res = await axios.get('/ui/contentcore/templateeditor/templatetypes')
      this.templateTypes = res.data.status === 1 ? res.data.data : []
      this.dialogDataLoading = false
    },

    // 确认添加模板
    async doTemplateAdd() {
      if (!this.templateData.fileName) {
        this.Dialog('文件名称不能为空 ！')
        return
      }
      if (this.templateData.fileName.length > 100) {
        this.Dialog('文件名称不能超过100个字符 ！')
        return
      }
      if (this.templateData.tempName.length > 100) {
        this.Dialog('模板名称不能超过100个字符 ！')
        return
      }
      if (this.templateData.filePath.length > 100) {
        this.Dialog('路径不能超过100个字符 ！')
        return
      }
      if (this.templateData.editMode === 'visual' && this.templateData.fromTemplateType === 'Y' && this.templateData.fromTemplateID === '') {
        this.Dialog('请选择可视化模板 ！')
        return
      }

      this.okBtnLoading = true

      let res = await axios.post('/ui/template', this.templateData)
      let data = res.data
      if (data.status === 1) {
        util.showResponseMessage(data)
        this.$router.back()
      } else {
        this.Dialog(data.message)
      }
      this.okBtnLoading = false
    },
    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },
    templateTypeChangeHandle(val) {
      this.templateData.fromTemplateType = val
    }
  }
}
</script>
