<template>
  <section class="room-gift-container" id="room-gift-container">
    <tab
      :data="tabData"
    >
      <template v-slot:header="{data,select,trigger}">
        <header class="room-gift-tab-header rowACenter" >
          <template
              v-for="(item,index) in data"
              :key="'gift-tab-'+index"
          >
            <div class="flex-1" v-if="item.align === 'right'"></div>
            <aside
                @click="trigger(index)"
                :class="{
                  'cursor-pointer': index !== select,
                  'room-gift-active': index === select
                }"
            >{{item.label}}</aside>
          </template>
        </header>
      </template>

      <template
        v-for="(item,index) in tabData"
        v-slot:[item.slot]
      >
        <component
            :is="item.component || 'room-gift-item'"
          :key="'room-gift-item-'+index"
          :user-data="userData"
          :giveUserId="giveUserId"
          :give-user="giveUser"
          :gift-type="item.type"
        ></component>
      </template>

    </tab>
  </section>
</template>

<script>
import tabData from '../data/tab';
import {
  tab
} from '$components';
import roomGiftItem from '../components/room-gift-item';
import props from '../props';
export default {
  name: "room-gift",

  data(){
    return {
      tabData
    }
  },

  components:{
    tab,
    roomGiftItem
  },

  props

}
</script>

<style scoped lang="scss" src="../style.scss"></style>
