<template>
  <div class="form-wrap">
    <div style="padding: 10px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleTabClick">
        <el-tab-pane
          name="operateTickets"
          label="门票操作">
          <OperateTickets
            ref="operateTickets"
          />
        </el-tab-pane>
        <el-tab-pane
          name="operateLog"
          label="操作历史">
          <OperateLog
            ref="operateLog"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import OperateTickets from './OperateTickets'
import OperateLog from './OperateLog'

export default {
  components: {
    OperateTickets,
    OperateLog
  },
  data () {
    return {
      activeName: 'operateTickets'
    }
  },
  mounted () {
    this.$refs.operateTickets.getData()
  },
  methods: {
    handleTabClick (tab, e) {
      console.log(tab.name)
      if (this.$refs[tab.name]) {
        this.$refs[tab.name].getData()
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  .offSale-btn{
    color: #F56C6C
  }
  .onSale-btn{
    color: #67C23A
  }
  </style>
