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

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

      <OrderInfoMingtou
        v-if="['铭投山庄','大陈岛景区'].includes(scenicName)"
        style="margin-bottom:10px"
        @clear="orderItems=[]"
        ref="orderInfo"
        v-model="orderItems"></OrderInfoMingtou>
      <OrderInfo
        v-else
        style="margin-bottom:10px"
        @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 FormInfo from './discountSales/FormInfo'
import OrderInfo from './discountSales/OrderInfo'
import OrderInfoMingtou from './discountSales/OrderInfoMingtou.vue'
import OrderRecord from './common/OrderRecord'

import handleKeyBind from './common/keyBind'

export default {
  data () {
    return {
      currentTicket: null,
      orderItems: []
    }
  },
  components: {
    SaleLayout,
    TickList,
    FormInfo,
    OrderInfo,
    OrderInfoMingtou,
    OrderRecord
  },
  computed: {
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    }
  },
  mounted () {
    this.keyBind = e => {
      handleKeyBind(e, this)
    }
    document.addEventListener('keydown', this.keyBind, true)
  },
  beforeDestroy () {
    // 离开时，卸载事件
    document.removeEventListener('keydown', this.keyBind, true)
  }
}
</script>

<style lang="scss" scoped>

</style>
