<template>
  <div>
    <div class="panel-fieldset">
      <h4 class="panel-legend">PC模板属性</h4>
      <el-form-item label="首页模板：" v-if="type!='Link'">
        <template-picker
          v-model="extendsData.indexTemplate"
          :disabled="!catalogId"
          type="CatalogIndex"
          :catalog-id="catalogId">
        </template-picker>
      </el-form-item>
      <el-form-item label="列表页模板：" v-if="type!='Link'">
        <template-picker
          v-model="extendsData.listTemplate"
          :disabled="!catalogId"
          :type="extendsData.listTemplateType"
          :catalog-id="catalogId">
        </template-picker>
        <el-button :disabled="!catalogId" @click="applyTemplateToChildren('listTemplate',`${contentType}`,`${extendsData.listTemplate}`)">应用到子栏目</el-button>
      </el-form-item>
      <div v-if="type!=='Virtual' || extendsData.mappingFlag==='2'&&type==='Virtual'">
        <div v-if="!contentType">
          <template v-if="extendsData.detailTemplateType">
            <el-form-item v-for="(val, key) in extendsData.detailTemplateType" :key="key" v-if="inVisableType.indexOf(key) < 0" :label="getContentName(key)+'详细页：'">
              <template-picker
                :contentType="key"
                v-model="extendsData.detailTemplate[key]"
                :disabled="!catalogId"
                :type="val"
                :catalog-id="catalogId"
                @callback="templateSelectDialogCallback">
              </template-picker>
              <el-button :disabled="!catalogId" @click="applyTemplateToChildren('detailTemplate',`${key}`,`${extendsData.detailTemplate[key]}`)">应用到子栏目</el-button>
            </el-form-item>
          </template>
        </div>
        <div v-else>
          <el-form-item label="详细页模板：" v-if="inVisableType.indexOf(contentType) < 0">
            <template-picker
              v-model="extendsData.detailTemplate[contentType]"
              :disabled="!catalogId"
              :type="extendsData.detailTemplateType[contentType]"
              :catalog-id="catalogId">
            </template-picker>
            <el-button :disabled="!catalogId" @click="applyTemplateToChildren('detailTemplate',`${contentType}`,`${extendsData.detailTemplate[contentType]}`)">应用到子栏目</el-button>
          </el-form-item>
        </div>
      </div>

      <el-form-item label="列表页显示文档数：" v-if="type!='Link'">
        <el-input-number :style="{width:'160px'}" v-model="extendsData.listPageSize" :min="1" :disabled="!catalogId"></el-input-number>
        <el-tooltip placement="right" effect="dark">
          <div slot="content">列表页显示多少条记录，如果模板中有指定pagesize属性，则以模板为准</div>
          <span><i class="fa fa-lightbulb-o" style="color:#FFC125; margin-left:5px"></i></span>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="列表页最大更新分页数：" v-if="type!='Link'">
        <el-input-number :style="{width:'160px'}" v-model="extendsData.listMaxPage" :min="-1" :disabled="!catalogId"></el-input-number>
        <el-tooltip placement="right" effect="dark">
          <div slot="content">列表页最多更新多少页，小于等于0的数字表示无限制，按实际页数来生成</div>
          <span><i class="fa fa-lightbulb-o" style="color:#FFC125; margin-left:5px" ></i></span>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="详细页存储规则：" v-if="type==='Link'">
        <el-select  clearable v-model="extendsData.detailNameRule" :style="{'width':'200px'}">
          <el-option
            v-for="item in detailNameRules"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <a @click="turnToPlatformTabs" :style="{'margin-left':'20px'}">发布平台模板配置</a>
    </div>
  </div>
</template>
<script>
import TemplatePicker from '../TemplatePicker.vue'
import util from '@src/common/util.js'
export default {
  components: {
    'template-picker': TemplatePicker
  },
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          indexTemplate: '', //  首页模板
          listTemplate: '', //  列表页模板
          detailTemplate: '', //  详细页模板
          listPageSize: 20, //  列表页显示文档数
          listMaxPage: -1, //   列表页最大更新分页数
          detailNameRule: '' // 详细页存储规则
        }
      }
    },
    catalogId: [Number, String],
    type: String,
    contentType: String,
    contentTypes: Array
  },
  watch: {
  },
  data() {
    return {
      detailNameRules: [{ value: 'Self', label: ' ' }], //  详细页存储规则下拉选项
      platformID: 'pc',
      siteID: this.$root.siteID,
      inVisableType: [ 'Special' ], // 不需要显示详细页模版的类型
      mixDetailTemplate: []// 混合栏目的详细模板数据
    }
  },
  methods: {
    turnToPlatformTabs() {
      this.$emit('turnToPlatformTabs', 'template')
    },
    // 获取模板子组件返回的模板路径
    templateSelectDialogCallback(type, value) {
      this.extendsData[type + '_DetailTemplate'] = value
    },
    //  模板应用到子栏目
    async applyTemplateToChildren(field, contentType, value) {
      try {
        await this.$confirm('确认要应用到子栏目？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        let res = await axios.put('/ui/catalogs/applytemplatetochildren', {
          catalogID: this.catalogId,
          field: field,
          contentType: contentType,
          value: value
        })
        util.showMessage(res)
      } 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;
}
</style>
