<template>
  <div class="form-wrap">
    <div style="padding: 10px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleTabClick">
        <el-tab-pane
          name="storageRecord"
          label="预制门票列表">
          <RecordOfStorage
            ref="storageRecord"
            :ticket-type-list="ticketTypeList"
          />
        </el-tab-pane>
        <el-tab-pane
          name="singleTicket"
          label="预制门票状态查询">
          <SingleTicket :ticket-type-list="ticketTypeList" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTicketTypeList } from '@/api/ticketType'
import RecordOfStorage from './ticketStorage/recordOfStorage'
// import RecordOfMission from './ticketStorage/recordOfMission'
import SingleTicket from './ticketStorage/singleTicket'
// import RecordOfActivate from './ticketStorage/recordOfActivate'
// import RecordOfReturn from './ticketStorage/recordOfReturn'
// import RecordOfExport from './ticketStorage/recordOfExport'
export default {
  components: {
    RecordOfStorage,
    // RecordOfActivate,
    // RecordOfReturn,
    // RecordOfExport,
    // RecordOfMission,
    SingleTicket
  },
  data () {
    return {
      ticketTypeList: [],
      returnStorageVisible: false,
      activeName: 'storageRecord'
    }
  },
  created () {
    this.getTicketTypeList()
  },
  methods: {
    getTicketTypeList () {
      getTicketTypeList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.ticketTypeList = res.data.records
      })
    },
    handleTabClick (tab, e) {
      if (this.$refs[tab.name]) {
        this.$refs[tab.name].getData()
      }
    }
  }
}
</script>

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