dzhh-frontend/.svn/pristine/44/44acc02be355adf040525eeeed087f8202300cf1.svn-base

<template>
    <a-tabs :defaultActiveKey="0">
      <span slot="tabBarExtraContent">      
        <a-dropdown>
          <a-menu slot="overlay" >
            <template v-for="(chart,index) in group.charts">
              <a-menu-item @click="handleMenuClick(chart.head.code)" :key="index">{{chart.head.name}}</a-menu-item>
            </template>
          </a-menu>
          <a-button type="primary" size="small" class="ant-btn-background-ghost">详情<a-icon type="down"/></a-button>
        </a-dropdown>
        <a-button type="link" @click="handleToggle">
          <span v-if="isShow">展开<a-icon type="down"/></span>
          <span v-else>收起<a-icon type="up" /></span>      
        </a-button>       
      </span>
      <template v-for="(chart,index2) in group.charts">
        <a-tab-pane :key="index2" :tab="chart.head.name" style="margin-top:10px;">
          <transition name="slide-fade">
            <group-auto-chart v-if="isShow" :propsChartData="chart" :key="index2" ></group-auto-chart>
          </transition>
        </a-tab-pane>        
      </template>
      
    </a-tabs>
</template>

<script>
import GroupAutoChart from './GroupAutoChart'
export default {
  name: 'GroupTemplateCard',
  components: {
    GroupAutoChart
  },
  props: ['group'],
  data() {
    return {
      isShow:true
    }
  },
  methods: {
    handleMenuClick(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    },
    handleToggle(){
      this.isShow = !this.isShow
    }
  }
}
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
  transform: translateX(10px);
  opacity: 0;
}
</style>