
<template>
  <div class="layout-no-cols right-list-tabs">
    <el-tabs class="tabs-wrap" v-model="activeName" @tab-click="tabsChangeClickHandler" >
      <el-tab-pane label="字段权重" name="FieldWeights">
        <!--字段权重tab组件-->
        <field-weights-tab ref="fieldWeightsTab"></field-weights-tab>
      </el-tab-pane>

      <el-tab-pane label="均衡权重" name="BlanceWeights">
        <!--均衡权重tab组件-->
        <blance-weights-tab ref="blanceWeightsTab"></blance-weights-tab>
      </el-tab-pane>

      <el-tab-pane label="距离权重" name="DistanceWeights">
        <!--距离权重tab组件-->
        <distance-weights-tab ref="distanceWeightsTab"></distance-weights-tab>
      </el-tab-pane>

      <el-tab-pane label="自定义权重" name="CustomWeightsConfig">
        <!--自定义权重tab组件-->
        <custom-weights-tab ref="customWeightsTab"></custom-weights-tab>
      </el-tab-pane>

      <el-tab-pane label="Docs检索位置配置" name="DocsQueryPostionConfig">
        <!--Docs检索位置配置tab组件-->
        <docs-query-postion-config-tab ref="docsQueryPostionConfigTab"></docs-query-postion-config-tab>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import fieldWeightsTab from './components/FieldWeightsTab.vue'
import blanceWeightsTab from './components/BlanceWeightsTab.vue'
import distanceWeightsTab from './components/DistanceWeightsTab.vue'
import customWeightsTab from './components/CustomWeightsTab.vue'
import docsQueryPostionConfigTab from './components/DocsQueryPostionConfigTab.vue'

export default {
  props: {
    tabName: {
      type: [String],
      default: 'FieldWeights'
    }
  },
  data() {
    return {
      activeName: 'FieldWeights' // 当前活动tabs
    }
  },
  mounted() {
    this.activeName = this.tabName || this.activeName
    this.tabsChangeClickHandler({ name: this.activeName }, null)
  },
  methods: {
    // tas切换事件
    tabsChangeClickHandler(tab, event) {
      if (tab.name === 'FieldWeights') {
        this.$refs.fieldWeightsTab.loadFieldWeightData()
      } else if (tab.name === 'BlanceWeights') {
        this.$refs.blanceWeightsTab.loadBlanceWeightData()
      } else if (tab.name === 'DistanceWeights') {
        this.$refs.distanceWeightsTab.loadDistanceWeightData()
      } else if (tab.name === 'CustomWeightsConfig') {
        this.$refs.customWeightsTab.loadCustomWeightsData()
      } else if (tab.name === 'DocsQueryPostionConfig') {
        this.$refs.docsQueryPostionConfigTab.loadConfigData()
      } else {
      }

      this.$router.push(`/settings/weightsConfig/${tab.name}`)
    }
  },
  components: {
    'field-weights-tab': fieldWeightsTab,
    'blance-weights-tab': blanceWeightsTab,
    'distance-weights-tab': distanceWeightsTab,
    'custom-weights-tab': customWeightsTab,
    'docs-query-postion-config-tab': docsQueryPostionConfigTab
  }
}
</script>

<style scoped>
.tabs-wrap .el-tabs__header {
  margin: 0;
}

.padding-top-bottom .search-bar {
  padding-bottom: 5px;
}

.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.info-form-wrap {
  padding: 10px 0;
  width: 480px;
  margin: 0 auto;
}
</style>
