<template>
  <div>
    <div class="panel-fieldset short-label">
      <h4 class="panel-legend">扩展模型设置</h4>
      <el-form-item label="栏目扩展模型">
        <el-select v-model="extendsData.catalogModelCode" clearable  placeholder="请选择" :style="{width:'150px'}" :disabled="catalogId===0">
          <el-option
            v-for="item in catalogModel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          @click="applyCatalogModelToChildren('catalogModelCode')"
          type="small"
          :disabled="catalogId===0"><i class="fa fa-cog"></i> 应用到子栏目</el-button>
      </el-form-item>
      <el-form-item label="内容扩展模型">
        <el-select v-model="extendsData.contentModelCode" clearable  placeholder="请选择" :style="{width:'150px'}" :disabled="catalogId===0">
          <el-option
            v-for="item in contentModel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          @click="applyCatalogModelToChildren('contentModelCode')"
          type="small"
          :disabled="catalogId===0"><i class="fa fa-cog"></i> 应用到子栏目</el-button>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          catalogModelCode: '',
          contentModelCode: ''
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      catalogModel: [], //  栏目扩展模型数据
      contentModel: [], //  内容扩展模型数据
      submitLoading: [false, false]
    }
  },
  created() {
    this.loadCatalogModel()
    this.loadContentModel()
  },
  methods: {
    // 扩展模型应用到子栏目
    async applyCatalogModelToChildren(type) {
      let modelType = ''
      if (type === 'catalogModelCode') {
        modelType = this.extendsData.catalogModelCode
        this.submitLoading[0] = true
      }
      if (type === 'contentModelCode') {
        modelType = this.extendsData.contentModelCode
        this.submitLoading[1] = true
      }
      let opts = {type: type, modelType: modelType}
      try {
        let res = await axios.put(`/ui/contentextends/${this.catalogId}/applycatalogconfigtochildren`, opts)
        this.submitLoading = [false, false]
        util.showMessage(res)
      } catch (e) {
        this.submitLoading = [false, false]
        util.showErrorNotification(e)
      }
    },
    // 加载栏目扩展模型
    async loadCatalogModel() {
      let modelType = 'Catalog'
      let res = await axios.get(`/ui/contentextends/models/${modelType}`)
      this.catalogModel = res.data.data
    },
    // 加载内容扩展模型
    async loadContentModel() {
      let modelType = 'Content'
      let res = await axios.get(`/ui/contentextends/models/${modelType}`)
      this.contentModel = res.data.data
    }
  }
}
</script>
<style scoped>
  .panel-fieldset.short-label .el-input__inner {
    line-height: 28px;
  }
</style>
