<template>
  <div class="form-wrap">
    <div style="padding: 10px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleTabClick">
        <el-tab-pane
          name="stat"
          label="统计">
          <WlkStat
            ref="stat"
            @select="handleSelectStat" />
        </el-tab-pane>
        <el-tab-pane
          name="detail"
          label="明细">
          <WlkDetail ref="detail" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import WlkStat from './WlkStat'
import WlkDetail from './WlkDetail'

export default {
  components: {
    WlkStat,
    WlkDetail
  },
  data () {
    return {
      activeName: 'stat'
    }
  },
  mounted () {
    this.$refs.stat.getList()
  },
  methods: {
    handleTabClick (tab) {
      if (tab.name === 'stat') {
        this.$refs.stat.getList()
      }
      if (tab.name === 'detail') {
        this.$refs.detail.getList()
      }
    },
    handleSelectStat (row) {
      this.activeName = 'detail'
      this.$nextTick(() => {
        this.$refs.detail.setStatRow(row)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
