<template>
  <SaleLayout>
    <!-- 票种列表 -->
    <TickList
      ref="ticketList"
      type-id="2"
      slot="left"
      v-model="currentTicket"
    ></TickList>

    <div slot="right">
      <!-- 预订信息 -->
      <PreOrderInfo
        ref="preOrder"
        v-model="preOrderInfo"
        @batch="batch"
        style="margin-bottom:10px"></PreOrderInfo>

      <!-- 表单信息 -->
      <FormInfo
        ref="formInfo"
        style="margin-bottom:10px"
        :pre-order-info="preOrderInfo"
        :current-ticket="currentTicket"
        :order-items="orderItems"></FormInfo>

      <OrderInfo
        style="margin-bottom:10px"
        :pre-order-info="preOrderInfo"
        @clear="orderItems=[]"
        ref="orderInfo"
        v-model="orderItems"></OrderInfo>

      <!-- 售票记录 -->
      <OrderRecord ref="orderRecord"></OrderRecord>
    </div>
  </SaleLayout>
</template>

<script>
import SaleLayout from '@/layout/SaleLayout'
import TickList from './common/TicketList'
import PreOrderInfo from './preOrderGroup/PreOrderInfo'
import FormInfo from './preOrderGroup/FormInfo'
import OrderInfo from './preOrderGroup/OrderInfo'
import OrderRecord from './common/OrderRecord'

import handleKeyBind from './common/keyBind'

export default {
  data () {
    return {
      currentTicket: null,
      preOrderInfo: null,
      orderItems: []
    }
  },
  components: {
    PreOrderInfo,
    SaleLayout,
    TickList,
    FormInfo,
    OrderInfo,
    OrderRecord
  },
  mounted () {
    this.keyBind = e => {
      handleKeyBind(e, this)
    }
    document.addEventListener('keydown', this.keyBind, true)
  },
  beforeDestroy () {
    // 离开时，卸载事件
    document.removeEventListener('keydown', this.keyBind, true)
  },
  methods: {
    batch (list) {
      this.orderItems = list
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
