<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="raw" tab="原始数据">
          <raw :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='raw'"></raw>
        </a-tab-pane>
        <a-tab-pane key="com-nutritional" tab="综合营养指标">
            <com-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='com-nutritional'"></com-nutritional>
        </a-tab-pane>
        <a-tab-pane key="average" tab="平均数据">
            <average :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='average'"></average>
        </a-tab-pane>
        <a-tab-pane key="avg-nutritional" tab="平均营养指数">
            <avg-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='avg-nutritional'"></avg-nutritional>
        </a-tab-pane>
        <a-tab-pane key="comparison" tab="年度对比">
            <comparison :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='comparison'"></comparison>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import Raw from "./component/raw.vue";
  import ComNutritional from "./component/com-nutritional.vue";
  import Average from "./component/average.vue";
  import AvgNutritional from "./component/avg-nutritional.vue";
  import Comparison from "./component/comparison.vue";
  export default {
    name: 'StatisticLake',
    components: {
        Raw,
        ComNutritional,
        Average,
        AvgNutritional,
        Comparison,
        
    },
    data() {
      return {
        activeKey: 'raw',
        searchForm:{},
        filterKeys:[]
      };
        
    },
    methods: {
     changeSearch(data){
         this.searchForm = data
     },
     changeFilter(data){
         this.filterKeys = data
     }
    }

  }
</script>

<style scoped>
.ele-body{
    padding: 0 !important;
}
</style>