<template>
  <div v-loading="pageLoading">
    <el-toolbar v-if="fromCatalog">
      <el-button @click="save" :disabled="!ID" :priv="'com.zving.cms.Catalog.ExtendAdmin.'+ID">
        <i class="fa fa-save"></i>保存
      </el-button>
    </el-toolbar>
    <el-toolbar v-else>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="save" :disabled="!ID"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
    <!-- 右侧内容表单 -->
    <el-form :inline="true" ref="savePublishFormForm" label-width="180px">
      <div v-for="o in templateList" :key="o.platformID">
        <div class="panel-fieldset">
          <h4 class="panel-legend">{{o.name}}模板属性</h4>
          <div v-if="type!='Link'">
            <el-form-item label="首页模板：" prop="indexTemplate">
              <template-picker
                v-model="o.indexTemplate"
                :target-platform="o.platformID"
                :disabled="!ID"
                type="CatalogIndex"
                :catalog-id="ID">
              </template-picker>
            </el-form-item><br/>
            <el-form-item label="列表页模板：" prop="listTemplate">
              <template-picker
                v-model="o.listTemplate"
                :target-platform="o.platformID"
                :disabled="!ID"
                type="CatalogList"
                :catalog-id="ID">
              </template-picker>
              <el-button :disabled="!ID" @click="applyTemplateToChildren('listTemplate',`${o.platformID}`,`${contentType}`,`${o.listTemplate}`)">应用到子栏目</el-button>
            </el-form-item><br/>
          </div>
          <div v-if="type!=='Virtual'">
            <div v-if="!contentType ">
              <el-form-item v-for="(val,key) in detailTemplateType" :key="key"  :label="getContentName(key)+'详细页：'" prop="detailTemplate" v-if="`${inVisableType.indexOf(key) < 0}`">
                <template-picker
                  v-model="o.detailTemplate[key]"
                  :target-platform="o.platformID"
                  :disabled="!ID"
                  :type="val"
                  :catalog-id="ID">
                </template-picker>
                <el-button :disabled="!ID" @click="applyTemplateToChildren('detailTemplate',`${o.platformID}`,`${key}`,`${o.detailTemplate[key]}`)">应用到子栏目</el-button>
              </el-form-item><br/>
            </div>
            <div v-else>
              <el-form-item label="详细页模板：" prop="detailTemplate" v-if="`${inVisableType.indexOf(contentType) < 0}`">
                <template-picker
                  v-model="o.detailTemplate[contentType]"
                  :target-platform="o.platformID"
                  :disabled="!ID"
                  :type="detailTemplateType[contentType]"
                  :catalog-id="ID">
                </template-picker>
                <el-button :disabled="!ID" @click="applyTemplateToChildren('detailTemplate',`${o.platformID}`,`${contentType}`,`${o.detailTemplate[contentType]}`)">应用到子栏目</el-button>
              </el-form-item><br/>
            </div>
            <div v-if="type!='Link'">
              <el-form-item label="列表页显示文档数：" prop="listPageSize">
                <el-input-number v-model="o.listPageSize" :disabled="!ID"></el-input-number>
                <el-tooltip class="item" effect="dark" content="列表页显示多少条记录，如果模板中有指定pagesize属性，则以模板为准" placement="right">
                  <i class="fa fa-lightbulb-o fa-fw" style="color:#FFC125; margin-left:5px"></i>
                </el-tooltip>
              </el-form-item><br/>
              <el-form-item label="列表页最大更新分页数：" prop="listMaxPage">
                <el-input-number v-model="o.listMaxPage" :disabled="!ID"></el-input-number>
                <el-tooltip class="item" effect="dark" content="列表页最多更新多少页，小于等于0的数字表示无限制，按实际页数来生成" placement="right">
                  <i class="fa fa-lightbulb-o fa-fw" style="color:#FFC125; margin-left:5px"></i>
                </el-tooltip>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import templatePicker from './TemplatePicker.vue'
export default {
  components: {
    'template-picker': templatePicker
  },
  props: {
    platformId: {
      type: [String, Number]
    },
    ID: {
      type: [String, Number]
    },
    parentId: {
      type: [String, Number]
    },
    type: {
      type: String
    },
    contentType: {
      type: String
    },
    tabName: {
      type: String
    },
    fromCatalog: {
      type: Boolean,
      default: false
    },
    contentTypes: Array
  },
  data() {
    return {
      pageLoading: false,
      templateList: [], //  多平台模板数据
      siteID: this.$root.siteID,
      inVisableType: [ 'Special' ], // 不需要显示详细页模版的类型
      detailTemplateType: {}
    }
  },
  // mounted() {
  //   this.loadTemplateList()
  //  }
  watch: {
    ID(val) {
      this.loadTemplateList()
    },
    tabName: function(val) {
      if (val === 'template') {
        this.loadTemplateList()
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async loadTemplateList(platformID) {
      this.pageLoading = true
      let opts = {
        siteID: this.siteID,
        ID: this.ID,
        platformID: platformID || this.platformId
      }
      let res = await axios.get(
        '/ui/commonpublishplatform/bindotherplatformtemplate',
        { params: opts }
      )
      this.pageLoading = false
      this.templateList = res.data.data
      this.detailTemplateType = res.data.detailTemplateType
      if (this.templateList && this.templateList.length) {
      } else {
        this.templateList = [
          {
            indexTemplate: '',
            listTemplate: '',
            detailTemplate: '',
            listPageSize: '',
            listMaxPage: ''
          }
        ]
      }
    },
    async save() {
      let resp = await axios.put(
        `/ui/commonpublishplatform/${this.ID}/savecatalogproperties`, {'templateList': this.templateList})
      util.showResponseMessage(resp.data)
    },
    // 应用到子栏目
    async applyTemplateToChildren(field, platformID, contentType, value) {
      try {
        await this.$confirm('确认要应用到子栏目？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let propObj = {
          catalogID: this.ID,
          platformID: platformID,
          contentType: contentType,
          field: field,
          value: value
        }
        let applyToChildrenProperties = await axios.put(
          `/ui/commonpublishplatform/applytochildrenproperties`,
          propObj
        )
        util.showResponseMessage(applyToChildrenProperties.data)
      } catch (e) {

      }
    },
    getContentName(val) {
      let content = this.contentTypes.find(item => item.value === val)
      if (content) {
        return content.label
      }
    }
  }
}
</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>
