<template>
  <div>
    <div :style="(elStyle.direction==='inline'|| !elStyle.direction)?{}:{display: 'flex','flex-direction': 'column'}">
      <template v-if="elStyle.number==='0'">
        <span
          style="margin-right:5px"
          v-for="(item,index) in ticket.ticketScenic"
          :key="index">
          {{ item.scenic_name }} {{ item.checkLimitTimes }}次<span v-if="index!==(ticket.ticketScenic.length-1)">,</span>
        </span>
      </template>
      <template v-else>
        <span
          style="margin-right:5px"
          v-for="(item,index) in ticket.ticketScenic.slice(0,elStyle.number||2)"
          :key="index">
          {{ item.scenic_name }} {{ item.checkLimitTimes }}次<span v-if="elStyle.number>ticket.ticketScenic.length?index!==(ticket.ticketScenic.length-1):index!==(elStyle.number||2)-1">,</span>
        </span>

        <span v-if="elStyle.number<ticket.ticketScenic.length">...(多景点门票)</span>
      </template>
    </div>
  </div>
</template>

<script>
import ticket from '../ticket'
export default {
  props: {
    defaultTemplate: {
      type: String,
      default: ''
    },
    element: {
      type: Object,
      default: () => {}
    },
    canvas: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      ticket
    }
  },
  computed: {
    elStyle () {
      return this.element.style
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
