<template>
  <flat-list
      @fetch="fetch"
      :paging="false"
      indexes="gid"
      ref="fetch"
      @changeData="changeData"
      :empty-text="useGiftType.empty"
  >
    <template v-slot:layout>
      <section class="screen talking-gift-container">
        <section class="rowACenter talking-gift-list"
                 @mouseleave="closeIntroduce"
        >
          <div @click="bannerPrev" class="talking-gift-trigger center cursor-pointer">
            <svg t="1623035534357" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3411" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" p-id="3412" fill="#ffffff"></path></svg>
          </div>
          <aside class="flex-1 overflow talking-gift-banner-margin">
            <swiper
                :swiperOption="swiperOption"
                class="screen"
                ref="banner"
            >
              <swiper-item
                  v-for="(item,index) in giftData"
                  class="talking-gift-banner center cursor-pointer relative"
                  :class="{
                    'talking-gift-banner-active': index === giftSelect,
                    'talking-gift-none': item.num <= 0
                  }"
                  :key="'image-item-'+index"
                  @click="changeGiftSelect(index)"
              >
                <div class="absolute talking-gift-banner-container"
                     @mouseover="openIntroduce(item,$event)"
                ></div>
                <div class="talking-gift-image-warp center">
                  <v-image
                      class="talking-gift-image"
                      :id="index === giftSelect?'gift-active-'+item.gid:''"
                      :src="item.base_image"
                      backgroundColor="transparent"
                  >
                    <layout-dot class="absolute talking-gift-dot" :value="item.num" :max="999"></layout-dot>
                  </v-image>
                </div>

                <div class="talking-gift-title overflow">{{item.gift_name}}</div>
              </swiper-item>
            </swiper>
          </aside>
          <div @click="bannerNext" class="talking-gift-trigger center cursor-pointer">
            <svg t="1623035654891" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1920" width="200" height="200"><path d="M671.5392 512L332.1344 172.544a32 32 0 0 1 45.2608-45.2096l358.4 358.4a37.12 37.12 0 0 1 0 52.5312l-358.4 358.4a32 32 0 0 1-45.2608-45.2608L671.5904 512z" fill="#ffffff" p-id="1921"></path></svg>
          </div>
        </section>

        <footer class="talking-gift-footer rowACenter">
          <div class="talking-gift-footer-icon overflow center">
            <v-image v-if="giftData[giftSelect]" backgroundColor="transparent" :src="giftData[giftSelect].base_image" class="talking-gift-give-icon"></v-image>
          </div>
          <div class="talking-gift-footer-margin">数量</div>
          <div class="relative">
            <a-select v-model:value="number" class="talking-gift-number talking-gift-select" dropdownClassName="talking-gift-dropdown">
              <a-select-option
                  v-for="(item,index) in numberData"
                  :key="'options-'+item.pid"
                  :value="item.value"
              >
                <div class="rowACenter talking-gift-number-item">
                  <div class="talking-select-value">{{item.value}}</div>
                  <div class="talking-select-label">{{item.label}}</div>
                </div>
              </a-select-option>
            </a-select>
            <div class="absolute talking-gift-select-modal jCenter aEnd">
              <icon type="down" class="talking-gift-select-icon"></icon>
            </div>
          </div>
          <div class="talking-gift-footer-margin">给</div>
          <div class="relative"
               :class="{
            'talking-gift-not-user-select': giveUserNoHave
           }"
          >
            <a-select class="talking-gift-user talking-gift-select"
                      dropdownClassName="talking-gift-dropdown"
                      placeholder="送给TA"
                      v-model:value="giveUserValue"
            >
              <a-select-option
                  v-for="(item,index) in useUserData"
                  :key="'options-'+item.uid"
                  :value="item.uid"
              >
                <div class="rowACenter talking-gift-user-item">
                  <div v-if="item.custom" class="talking-gift-custom-avatar center">
                    <v-image mode="center" backgroundColor="transparent" :src="item.icon" class="gift-user-custom-icon" radius="50%"></v-image>
                  </div>
                  <v-image v-else :src="item.icon" class="talking-gift-user-icon" radius="50%"></v-image>
                  <div class="flex-1 talking-gift-select-margin">
                    <div class="talking-select-label line-1">{{item.label}}</div>
                  </div>
                </div>
              </a-select-option>
            </a-select>
            <div class="absolute talking-gift-select-modal jCenter aEnd">
              <icon type="down" class="talking-gift-select-icon"></icon>
            </div>
            <div class="talking-gift-no-user absolute jCenter" v-if="giveUserNoHave">
              <div class="talking-select-label line-1">{{giveUser.nick_name}}</div>
            </div>
          </div>
          <!--  赠送  -->
          <div @click="giveUserGift" class="room-gift-give cursor-pointer center">
            <span v-if="pressNumber<1">赠送</span>
            <div v-else :key="'give-'+pressNumber" class="row room-gift-give-count"><span class="iconfont icon-close room-gift-give-close"></span>{{pressNumber}}</div>
          </div>

        </footer>

      </section>
    </template>
  </flat-list>

</template>

<script>
import {
  swiper,
  swiperItem,
  vImage,
  icon
} from '$components';
import mixins from '../mixins/index';
import {Select} from "ant-design-vue";
import props from '../props';
import FlatList from "$components/flat-list/src/main";
import layoutDot from '$layout/layout-dot';
export default {
  name: "room-gift-item",

  props,

  mixins,

  components:{
    FlatList,
    swiper,
    swiperItem,
    vImage,
    [Select.name]:Select,
    [Select.Option.displayName]:Select.Option,
    icon,
    layoutDot
  }
}
</script>

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

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