<template>
  <div class="layout-no-cols" v-loading="pageLoading">
    <div class="layout-col-detail">
      <el-toolbar>
        <el-col :span="4">
          <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
        </el-col>
        <el-col :span="20" class="right">
          <el-button @click="addContentPlatformAttribute">
            <i class="fa fa-plus"></i>为内容添加发布平台属性</el-button>
          <el-button @click="deleteContentPlatfromAttribute">
            <i class="fa fa-remove"></i>删除内容的发布平台属性</el-button>
          <el-button @click="save">
            <i class="fa fa-save"></i>保存</el-button>
        </el-col>
      </el-toolbar>
      <div>
      <!-- 右侧内容表单 -->
      <el-form ref="savePublishFormForm" label-width="180px">
        <div class="panel-fieldset">
          <h4 class="panel-legend">{{platformName}}模板属性</h4>
          <el-form-item label="站点首页模板：" prop="indexTemplate">
            <el-input class="e-input" v-model="templateProp.indexTemplate"></el-input>
            <el-button-group>

              <el-button type="primary" icon="edit" @click="editTemplate(templateProp.indexTemplate)" title="编辑模板" :disabled="templateProp.indexTemplate==''"></el-button>
              <el-button class="through-btn" @click="browseTemplate('indexTemplate')">浏览</el-button>
            </el-button-group>
          </el-form-item>
          <div v-if="platformID!='pc'">
            <el-form-item label="站点URL：" prop="siteURL">
              <el-input class="e-input" v-model="templateProp.siteURL"></el-input>
            </el-form-item>
            <el-form-item label="静态化文件类型：" prop="suffix">
              <el-select v-model="templateProp.suffix" placeholder="请选择">
                 <el-option v-for="(key,value) in templateProp.staticFileType" :key="value" :label="key" :value="value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="默认图片高度：" prop="imageHeight">
              <el-input-number v-model="templateProp.imageHeight" :min="-1"></el-input-number>
              <el-tooltip class="item" effect="dark" content="宽高同时为-1表示关闭图片截取,0表示获取原图，其他值表示截取对应尺寸" placement="right">
                  <i class="fa fa-lightbulb-o fa-fw" style="color:#FFC125; margin-left:5px"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="默认图片宽度：" prop="imageWidth">
              <el-input-number v-model="templateProp.imageWidth" :min="-1"></el-input-number>
              <el-tooltip class="item" effect="dark" content="宽高同时为-1表示关闭图片截取,0表示获取原图，其他值表示截取对应尺寸" placement="right">
                  <i class="fa fa-lightbulb-o fa-fw" style="color:#FFC125; margin-left:5px"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="其它图片规格：" prop="otherImageSpecification">
              <el-input class="e-input" v-model="templateProp.otherImageSpecification"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      </div>
      <!-- 模板选择弹框 -->
      <templateSelect-dialog :show.sync="showTemplateSelectDialog" :platformID="platformID" :type="tempType" :value="templateFileName" @callback="templateSelectDialogCallback"></templateSelect-dialog>

      <!--为内容添加发布平台属性框/删除内容发布平台属性框-->
      <catalogListForPlatform-dialog :show.sync="showCatalogList" :action="showCatalogListAction" :title="showCatalogListTitle" :platformID="platformID"></catalogListForPlatform-dialog>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'

import templateSelectDialog from './templateSelectDialog.vue'
import catalogListForPlatform from './catalogListForPlatform.vue'

export default {
  data() {
    return {
      showCatalogList: false,
      showCatalogListAction: '',
      showCatalogListTitle: '',
      labelValue: '',
      tempType: '',
      showTemplateSelectDialog: false,
      templateFileName: '',
      catalogtreeLoading: true,
      templateDataLoading: false,
      pageLoading: false,
      // 是否选中跟节点
      isRootModal: false,
      // 选择的节点(栏目)
      templateProp: {}
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async save() {
      let saveSitePlatformConfig = await axios.put(
        `/ui/publishplatform/${this.platformID}/savesiteplatformconfig`,
        this.templateProp
      )
      util.showResponseMessage(saveSitePlatformConfig.data)
    },
    editTemplate (fileName) {
      if (fileName) {
        window.open(`./templateEditor.html?fileName=${fileName}&platformID=${this.platformID}&siteID=${this.$root.siteID}`)
      }
    },
    // editTemplate() {
    //   // window.open('/src/contentcore/templateeditor/editor.vue');
    //   window.open('/#/templateEditor')
    // },
    // 浏览
    browseTemplate(id) {
      this.templateFileName = this.templateProp[id]
      if (id === 'indexTemplate') {
        this.tempType = 'SiteIndex'
      }
      this.showTemplateSelectDialog = true
    },
    templateSelectDialogCallback(val) {
      if (this.tempType === 'SiteIndex') {
        this.templateProp.indexTemplate = val
      }
    },
    addContentPlatformAttribute() {
      this.showCatalogListAction = 'add'
      this.showCatalogListTitle = '为内容添加发布平台属性'
      this.showCatalogList = true
    },
    deleteContentPlatfromAttribute() {
      this.showCatalogListAction = 'delete'
      this.showCatalogListTitle = '删除内容的发布平台属性'
      this.showCatalogList = true
    },
    async init(platformID) {
      this.pageLoading = true
      this.labelValue = this.name + '详细页模板：'
      let loadPlatformConfig = await axios.get(
        '/ui/commonpublishplatform/loadplatformconfig',
        {
          params: {
            platformID: platformID || this.platformID
          }
        }
      )
      this.templateProp = loadPlatformConfig.data.data
      this.pageLoading = false
    }
  },
  created() {
    this.init()
  },
  props: {
    platformID: {
      type: String,
      required: true
    },
    platformName: {
      type: String,
      required: true
    }
  },
  components: {
    'templateSelect-dialog': templateSelectDialog,
    'catalogListForPlatform-dialog': catalogListForPlatform
  }
}
</script>

<style scoped>
.through-btn {
  width: 60px;
}
.panel-fieldset .e-input {
  width: 240px;
}

.panel-fieldset .el-form-item {
  margin-bottom: 15px;
}

.title-div {
  font-size: 16px;
  font-weight: bold;
  margin: 30px 0 0 40px;
}
</style>
