<template>
  <zj-page-container>
    <div class="tab">
      <el-radio-group v-model="tabType" size="small" @change="tabTypeChange">
        <el-radio-button label="collect">汇总</el-radio-button>
        <el-radio-button label="offline">明细</el-radio-button>
      </el-radio-group>
    </div>
    <zj-page-fill>
      <collect v-if="tabTypeCk == 'collect'" key="collect" />
      <offline v-if="tabTypeCk == 'offline'" key="offline" :workerId="workerId" :detailParams="detailParams" />
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { EventBus } from '@/utils/eventBus'
import collect from './pages/collect.vue'
import offline from './pages/offline.vue'
export default {
  components: { collect, offline },
  data() {
    return {
      tabType: 'collect',
      tabTypeCk: 'collect',
      workerId: "",
      detailParams: [],
    }
  },
  created() {
    EventBus.$on("orderMasterSplitAccount", ({ workerId, detailParams, tabTypeCk }) => {
      this.workerId = workerId
      this.detailParams = detailParams
      this.$nextTick(() => {
        this.tabTypeCk = tabTypeCk
        this.tabType = tabTypeCk
      })
    })
  },
  methods: {
    tabTypeChange() {
      this.workerId = ""
      this.detailParams = []
      this.$nextTick(() => {
        this.tabTypeCk = this.tabType
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}
</style>
