<template>
  <div class="sale-container">
    <div style="display: flex; gap: 20px;">
      <div style="width: 380px; flex-shrink: 0;margin-right: 20px;">
        <QuickType></QuickType>
        <!-- 票种列表 -->
        <TicketList
          ref="ticketList"
          type-id="1"
          v-model="currentTicket"
          @update="handleUpdate"
          @set-batch="setBatch"
        ></TicketList>
      </div>
      <div style="flex: 1;">
        <FormInfo
          ref="formInfo"
          style="margin-bottom:20px"
          :current-ticket="currentTicket"
          :current-batch="currentBatch"
          :order-items="orderItems"></FormInfo>

        <!-- 其他景点保持原样 -->
        <OrderInfo
          @clear="handleClear"
          style="margin-bottom:20px"
          ref="orderInfo"
          :current-ticket="currentTicket"
          v-model="orderItems"></OrderInfo>
        <RecentOrder
          ref="recentOrder"
          style="margin-bottom:20px"></RecentOrder>
      </div>
    </div>
  </div>
</template>

<script>
// import SaleLayout from '@/layout/SaleLayout'
import TicketList from './common/TicketList'
import QuickType from './common/QuickType'
import FormInfo from './retail/FormInfo'
import OrderInfo from './retail/OrderInfo'
// import OrderRecord from './common/OrderRecord'
import RecentOrder from './retail/RecentOrder'
import handleKeyBind from './common/keyBind'

export default {
  data () {
    return {
      currentTicket: null,
      currentBatch: null,
      orderItems: []
    }
  },
  components: {
    // SaleLayout,
    TicketList,
    FormInfo,
    QuickType,
    OrderInfo,
    RecentOrder
  },
  computed: {
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    },
    category () {
      return this.$route.meta.category || 'ticket'
    }
  },
  mounted () {
    this.keyBind = e => {
      handleKeyBind(e, this)
    }
    document.addEventListener('keydown', this.keyBind, true)
  },
  methods: {
    handleClear () {
      this.orderItems = []
      this.$refs.formInfo.$refs.form.clearValidate()
    },
    onChangePlayDate (playDate) {
    },
    handleUpdate (ticket) {
      this.currentTicket = ticket
    },
    setBatch (batch) {
      // 设置当前批次
      this.currentBatch = batch
    }
  },
  beforeDestroy () {
    // 离开时，卸载事件
    document.removeEventListener('keydown', this.keyBind, true)
  }
}
</script>
