<template>
  <div>
    <el-toolbar>
      <el-button @click="onSave" :loading="loading" :disabled="siteID <= 0" :priv="`com.zving.cms.Site.ExtendAdmin.${siteID}`">
        <i class="fa fa-floppy-o" aria-hidden="true" ></i>保存</el-button>
    </el-toolbar>
    <div class="pane-wrap">
      <el-form label-width="180px" label-suffix=":">
        <div class="panel-fieldset">
          <h4 class="panel-legend">所属平台</h4>
          <el-form-item label="所属平台">
            <el-radio-group v-model="publishPlatform" @change="onPublishPlatFormChange" :disabled="siteID <= 0">
              <template v-for="item in usedPublishPlatforms">
                <el-radio :label="item.ID" :key="item.ID">{{item.name}}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="panel-fieldset">
          <h4 class="panel-legend">列表页模板</h4>
          <el-form-item label="栏目列表页模板">
            <template-picker
              v-model="templates.listTemplate"
              :target-platform="publishPlatform"
              :disabled="siteID <= 0"
              :siteId="siteID"
              type="CatalogList">
            </template-picker>
            <el-button @click="onApplyClick('listTemplate',templates.listTemplate,'listTemplate')" :disabled="siteID <= 0 || !templates.listTemplate ">应用到栏目</el-button>
          </el-form-item>
          <h4 class="panel-legend">详细页模板</h4>
          <template v-for="(item,key) in templates.detailTemplate">
            <el-form-item :label="'['+contentTypes[key]+']类型'" :key="key">
              <template-picker
                v-model="templates.detailTemplate[key]"
                :target-platform="publishPlatform"
                :disabled="siteID <= 0"
                :siteId="siteID"
                :type="templates.detailTemplateType[key]">
              </template-picker>
              <el-button @click="onApplyClick(key,item,'DetailTemplate')" :disabled="siteID <= 0 || !templates.detailTemplate[key] ">应用到栏目</el-button>
            </el-form-item>
          </template>
        </div>
      </el-form>
    </div>
    <el-dialog title="选择栏目" :visible.sync="isShowModal" width="30%" @open="dialogOpen">
      <div>
        <el-radio-group v-model="overwrite">
          <el-radio label="N">只应用到未设置模板的栏目</el-radio>
          <el-radio label="Y">全部应用</el-radio>
        </el-radio-group>
      </div>
      <catalog-tree
        :contentType="currentContentType"
        type="Default"
        :siteID="siteID"
        :isNeedNode="false"
        :show="isShowModal"
        @callback="getCheckedData">
      </catalog-tree>
      <span slot="footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" v-loading='okBtnLoading' @click="doApply">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import util from '@src/common/util.js'
import templateSelectDialog from '../templateSelectDialog.vue'
import CatalogTree from './CatalogTreeBatchSelect.vue'
import templatePicker from '../TemplatePicker.vue'
export default {
  components: {
    'template-select-dialog': templateSelectDialog,
    'catalog-tree': CatalogTree,
    'template-picker': templatePicker
  },
  props: {
    siteID: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      overwrite: 'N',
      currentContentType: '',
      currentApplyParams: {},
      isShowModal: false, //  选择栏目是否显示
      okBtnLoading: false,
      loading: false,
      usedPublishPlatforms: [],
      publishPlatform: '',
      templates: {
        listTemplate: '',
        detailTemplate: [],
        detailTemplateType: []
      },
      catalogCheckedIDs: [],
      contentTypes: []
    }
  },
  async created() {
    let resp = await axios.get('/ui/contentcore/contenttypes')
    if (resp.data.status === 1) {
      resp.data.data.forEach(item => {
        this.contentTypes[item.value] = item.label
      })
    }
  },
  methods: {
    getCheckedData(ids) {
      this.catalogCheckedIDs = ids
    },
    async doApply() {
      let cids = this.catalogCheckedIDs
      if (!cids || !cids.length) {
        this.$alert('请选择栏目', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.okBtnLoading = true
      let params = {
        catalogIDs: cids.join(),
        overwrite: this.overwrite,
        siteID: this.siteID,
        contentType: this.currentContentType,
        platformID: this.publishPlatform
      }
      Object.assign(params, this.currentApplyParams)

      let res = await axios.put(`/ui/sites/${this.siteID}/applytemplatetochildren`, params).catch(e => console.log(e))
      let data = res.data
      if (data.status === 1) {
        util.showResponseMessage(data)
        this.isShowModal = false
      } else {
        this.$alert(data.message || '操作失败！')
      }

      this.okBtnLoading = false
    },
    async onSave() {
      this.loading = true
      let res = await axios.put(`/ui/sites/${this.siteID}/defaulttemplates/${this.publishPlatform}`, { templates: this.templates })
      util.showResponseMessage(res.data)
      this.loading = false
    },
    dialogOpen() {
      this.okBtnLoading = false
      this.catalogCheckedIDs = []
    },
    onApplyClick(contentType, value, filed) {
      this.currentApplyParams = {
        field: filed,
        value: value,
        contentType: contentType
      }
      this.currentContentType = !contentType ? this.currentContentType : contentType
      this.isShowModal = true
    },
    async onPublishPlatFormChange() {
      if (!this.publishPlatform) {
        this.templates = {
          listTemplate: '',
          detailTemplate: [],
          detailTemplateType: []
        }
      } else {
        let res = await axios.get(`/ui/sites/${this.siteID}/defaulttemplates/${this.publishPlatform}`)
        if (res.data.status === 1) {
          this.templates = res.data.data
        }
      }
    },
    async init() {
      let resp = await axios.get(`/ui/contentcore/contenttypes/${this.siteID}`)
      if (resp.data.status === 1) {
        resp.data.data.forEach(item => {
          this.contentTypes[item.value] = item.label
        })
      }
      let res = await axios.get(`/ui/contentcore/platforms/${this.siteID}`)
      if (res.data.status === 1) {
        this.usedPublishPlatforms = res.data.data
        if (this.usedPublishPlatforms.length > 0) {
          this.publishPlatform = this.usedPublishPlatforms[0].ID
          this.onPublishPlatFormChange()
        }
      }
    }
  }

}
</script>
