<template>
  <div class="sale-container">
    <div style="display: flex;">
      <QuickType class="quick-type"></QuickType>
      <div class="ticket-panel" :class="{ collapsed: ticketCollapsed }">
        <div class="ticket-panel__wrapper">
          <div class="ticket-panel__title">票种列表</div>
          <TicketList
            ref="ticketList"
            type-id="1"
            v-model="currentTicket"
            @update="handleUpdate"
            @set-batch="setBatch"
          ></TicketList>
        </div>
        <div
          :class="['ticket-panel__toggle', ticketCollapsed && 'is-collapsed']"
          :title="ticketCollapsed ? '展开票种列表' : '收起票种列表'"
          @click="togglePanel">
          <i class="el-icon-s-unfold" v-if="ticketCollapsed"></i>
          <i class="el-icon-s-fold" v-else></i>
        </div>
      </div>
      <div class="sale-main">
        <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>
        <el-collapse v-model="recentOrderActive" accordion style="margin-bottom:20px">
          <el-collapse-item name="recentOrder" title="最近订单">
            <RecentOrder ref="recentOrder"></RecentOrder>
          </el-collapse-item>
        </el-collapse>
      </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: [],
      ticketCollapsed: false,
      recentOrderActive: ''
    }
  },
  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: {
    togglePanel () {
      this.ticketCollapsed = !this.ticketCollapsed
    },
    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>

<style lang="scss">

.sale-container .quick-type {
  position: absolute;
  padding: 0 20px;
  margin-top: -28px;
  width: calc(100% - 40px);

  .el-alert__closebtn {
    top: 0px;
  }
}

.ticket-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-right: 20px;
  flex-shrink: 0;
  width: auto;

  &.collapsed {
    margin-right: 0;
  }

  &__wrapper {
    width: 380px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  &.collapsed &__wrapper {
    width: 0;
    opacity: 0;
    visibility: hidden;
  }

  &__title {
    padding: 12px 16px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
  }

  &__toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    z-index: 10;
    color: #909399;
    transition: color 0.2s ease, background 0.2s ease;
    position: absolute;
    right: 0;

    &.is-collapsed {
      right: -20px;
    }

    &:hover {
      color: #409eff;
      background: #ecf5ff;
    }

    i {
      font-size: 14px;
    }
  }
}

.sale-main {
  flex: 1;
  min-width: 0;
}

</style>
