<template>
  <div class="layout-no-flex site right-detail-tabs">
      <el-toolbar>
        <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      </el-toolbar>
        <el-tabs class="tabs-wrap" v-model="tab" @tab-click="tabClick">
          <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">
            <!-- <span slot="label">{{tab.label}}</span> -->
            <component :is="tab.name" :ref="tab.name" :siteID="siteID" @afterSave="siteInfoSave"></component>
          </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
import siteInfo from './components/SiteInfo.vue'
import siteArticle from '../article/components/SiteExtendAction.vue'
import siteExtend from './components/SiteExtend.vue'
import siteConfig from './components/SiteConfig.vue'
import siteTemplate from './components/SiteTemplate.vue'
export default {
  components: {
    'site-info': siteInfo,
    'site-article': siteArticle,
    'site-extend': siteExtend,
    'site-config': siteConfig,
    'site-template': siteTemplate
  },
  props: {ID: [String, Number], tabName: [String]},
  data() {
    return {
      siteID: 0,
      showDetailPage: false,
      currentSite: {},
      queryName: '',
      showFormPage: false,
      site: {
        name: '',
        branchInnerCode: '',
        parentID: 0,
        path: '',
        language: '',
        info: '',
        URL: '',
        isSimilarCreate: 'N',
        copyTemplateYesOrNo: 'N',
        copyCatalogYesOrNo: 'N'
      },
      tab: 'site-info',
      tabs: [
        {
          name: 'site-info',
          label: '基本配置'
        },
        {
          name: 'site-article',
          label: '文章设置'
        },
        {
          name: 'site-extend',
          label: '其它配置'
        },
        {
          name: 'site-config',
          label: '站点扩展项'
        },
        {
          name: 'site-template',
          label: '默认模板配置'
        }
      ]
    }
  },
  mounted() {
    this.siteID = parseInt(this.ID)
    if (this.tabName && this.includeTabs()) {
      this.tab = this.tabName
    } else {
      this.$router.replace(`/settings/site/${this.siteID}/${this.tab}`)
    }
    this.$refs[this.tab][0].init()
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    siteInfoSave() { },
    tabClick(tab) {
      this.$router.replace(`/settings/site/${this.siteID}/${tab.name}`)
      this.$refs[tab.name][0].init()
    },
    includeTabs() {
      this.tabs.forEach(tab => {
        if (this.tabName === tab.name) {
          return true
        }
      })
      return false
    }
  }
}
</script>

<style>
  .site .form-item {
    width: 90%;
    min-width: 100px;
    max-width: 300px;
  }

  .site .title {
    color: #8391a5;
    font-size: 16px;
    line-height: 28px;
    padding: 10px 14px 0;
    display: inline-block;
    font-weight: bold;
  }
</style>
