<template>
  <SaleLayout :left-width="400">
    <QuickType></QuickType>
    <!-- 票种列表 -->
    <TickList
      ref="ticketList"
      type-id="1"
      slot="left"
      @dateChange="playDate=$event"
      @batchChange="currentBatch=$event"
      @scheduleChange="currentSchedule=$event"
      @categoryTypeChange="currentCategoryType=$event"
      v-model="currentTicket"
    ></TickList>

    <div slot="right">
      <!-- 昭苏团体打折使用定制的表单 -->
      <FormInfoZhaosu
        v-if="['昭苏'].includes(scenicName)"
        ref="formInfo"
        style="margin-bottom:10px"
        :play-date="playDate"
        :current-batch="currentBatch"
        :current-schedule="currentSchedule"
        :current-ticket="currentTicket"
        :current-category-type="currentCategoryType"
        :order-items="orderItems"></FormInfoZhaosu>
      <!-- 其他景区表单保持原样 -->
      <FormInfo
        v-else
        ref="formInfo"
        style="margin-bottom:10px"
        :play-date="playDate"
        :current-batch="currentBatch"
        :current-schedule="currentSchedule"
        :current-ticket="currentTicket"
        :current-category-type="currentCategoryType"
        :order-items="orderItems"></FormInfo>

      <OrderInfo
        style="margin-bottom:10px"
        @complete="handleComplete"
        @clear="orderItems = []"
        ref="orderInfo"
        v-model="orderItems"></OrderInfo>

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

<script>
import SaleLayout from '@/layout/SaleLayout'
import TickList from './TicketSelector'
import QuickType from '../common/QuickType'

import FormInfo from './FormInfo'
import FormInfoZhaosu from './FormInfoZhaosu'

import OrderInfo from './OrderInfo'
import OrderRecord from '../common/OrderRecord'

import handleKeyBind from '../common/keyBind'
import moment from 'moment'

export default {
  data () {
    return {
      currentTicket: null,
      currentBatch: null,
      currentSchedule: null,
      currentCategoryType: null,
      orderItems: [],
      playDate: moment().format('YYYY-MM-DD')
    }
  },
  components: {
    SaleLayout,
    TickList,
    FormInfo,
    FormInfoZhaosu,
    QuickType,
    OrderInfo,
    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)
  },
  methods: {
    handleComplete () {
      this.orderItems = []
      this.$refs.ticketList.getBatchList()
    }
  },
  beforeDestroy () {
    // 离开时，卸载事件
    document.removeEventListener('keydown', this.keyBind, true)
  },
  watch: {
    orderItems: {
      handler (val) {
        console.log(val)
      },
      deep: true
    }
  }
}
</script>
