<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="detail-container-warp flex overflow">
      <section class="detail-container flex overflow">
        <!-- 头部 -->
        <header  class="rowACenter detail-header" >
          <aside class="flex-1 rowACenter">
            <v-image class="detail-avatar" radius="50%" :src="option.head_pic"></v-image>
            <section v-if="option.uid">
              <layout-naming :nickName="option.nick_name" :naming="option.guanming"></layout-naming>
              <div class="detail-header-id">ID：{{option.uid}}</div>
            </section>
          </aside>

          <!-- 关注 -->
          <div v-if="option.uid&&$store.getters.isLogin" class="detail-follow-container overflow row">
            <div class="detail-follow-item detail-follow-number center">{{useFollowNum}}</div>
            <div @click="followUser" class="detail-follow-item detail-follow-span cursor-pointer rowCenter">
              <svg v-if="!followStatus" t="1623031446983" class="detail-follow-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2552" width="200" height="200"><path d="M753.266187 77.352518A270.218129 270.218129 0 0 0 512 230.510504 270.218129 270.218129 0 0 0 270.733813 77.352518C121.480288 77.352518 0 203.105612 0 357.663309c0 240.750504 257.841727 460.431655 498.444892 585.669065a29.467626 29.467626 0 0 0 27.110216 0c240.971511-125.23741 498.444892-344.918561 498.444892-585.669065 0-154.557698-121.480288-280.310791-270.733813-280.310791z" fill="#ffffff" p-id="2553"></path></svg>
              <span >{{ followStatus?'取消关注':'关注' }}</span>
            </div>
          </div>

          <!-- 关闭按钮 -->
          <div @click="closeModal" class="detail-close-wrap relative cursor-pointer animate-rotate-hover">
            <icon type="close" class="detail-close"></icon>
          </div>
        </header>
        <!-- 内容部分 -->
        <section class="detail-content flex-1 overflow row">
          <scroll-view class="screen overflow" :security-size="10">
            <section  class="detail-content-scroll row overflow">
              <aside class="detail-left">
                <section class="detail-banner" >
                  <section class="detail-banner-image overflow">
                    <v-image v-if="option.uid" class="screen" :src="option.images[banner]"></v-image>
                  </section>
                  <!-- 循环的banner -->
                  <section class="rowACenter" v-if="option.uid">
                    <div @click="bannerPrev" class="detail-banner-trigger center cursor-pointer">
                      <svg t="1623035534357" class="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 detail-banner-images">
                      <swiper
                          :swiperOption="swiperOption"
                          class="screen"
                          v-model:value="banner"
                          ref="banner"
                      >
                        <swiper-item
                            v-for="(item,index) in option.images"
                            class="detail-banner-icon overflow"
                            :key="'image-item-'+item"
                            :class="{
                         'detail-banner-select': index === banner
                      }"
                        >
                          <v-image
                              class="screen"
                              :src="item"
                          ></v-image>
                        </swiper-item>
                      </swiper>
                    </aside>
                    <div @click="bannerNext" class="detail-banner-trigger center cursor-pointer">
                      <svg t="1623035654891" class="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>
                  <!-- 简介 -->
                  <div class="detail-introduction jCenter" v-if="option.uid">
                    <div class="line-1">简介:{{option.autograph ||  '暂未设置签名'}}</div>
                  </div>
                </section>
                <!-- 礼物 -->
                <section class="detail-gift">
                  <tab
                      class="screen"
                      :data="tabData"
                      v-if="option.uid"
                  >
                    <template v-slot:header="{data,trigger,select}">
                      <section class="center">
                        <header class="detail-tab-header rowACenter">
                          <aside
                              v-for="(item,index) in data"
                              :key="'detail-tab-'+index"
                              class="detail-tab-item rowCenter"
                              :class="{
                        'detail-tab-select': index === select,
                        'cursor-pointer': index !== select
                      }"
                              @click="trigger(index)"
                          >
                            <v-image
                                :src="item.icon"
                                mode="center"
                                class="detail-tab-icon"
                            />
                            <span>{{item.label}}</span>
                          </aside>
                        </header>
                      </section>
                    </template>


                    <template
                      v-for="(item,index) in tabData"
                      v-slot:[item.slot]
                    >
                      <component
                        :is="item.component"
                        :useOption="option"
                        :type="item.type"
                        :key="'tab-component-'+index"
                      ></component>
                    </template>
                  </tab>
                </section>

              </aside>
              <!-- 游戏 -->
              <aside class="flex-1 overflow detail-game">
                <tab
                    :data="option.gameList"
                    v-model:value="game"
                    v-if="option.uid"
                >
                  <template v-slot:header="{data,trigger,select}">
                    <section class="detail-game-header-warp">
                      <header class="detail-game-header rowACenter">
                        <div @click="gamePrev" class="detail-game-trigger center cursor-pointer">
                          <svg t="1623035534357" class="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 detail-game-swiper">
                          <swiper
                              :swiperOption="gameOption"
                              class="screen"
                              v-model:value="game"
                              ref="game"
                          >
                            <swiper-item
                                v-for="(item,index) in data"
                                class="detail-game-item center overflow"
                                :key="'image-item-'+item"
                                :class="{
                       'detail-game-select': index === select,
                       'cursor-pointer': index !== select
                    }"
                                @click="trigger(index)"
                            >
                              <span>{{item.label}}</span>
                            </swiper-item>
                          </swiper>
                        </aside>
                        <div @click="gameNext" class="detail-game-trigger center cursor-pointer">
                          <svg t="1623035654891" class="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>
                      </header>
                    </section>

                  </template>

                  <template
                      v-for="(item,index) in option.gameList"
                      v-slot:[item.slot]
                  >
                    <game
                        :key="'tab-component-'+index"
                        :pid="item.pid"
                        :config="option"
                        @close="$emit('destroy-popup')"
                        :detail="option.gameInfo && option.gameInfo[item.pid]"
                    ></game>
                  </template>


                </tab>
              </aside>

            </section>
          </scroll-view>
        </section>


      </section>
    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon,
  vImage,
  scrollView,
  swiper,
  swiperItem,
  tab
} from '$components';
import layoutNaming from '$layout/layout-naming';
import mixins from '../mixins';
import props from '../props';
import game from '../components/game';
import giftBanner from '../components/gift-banner';
export default {
  name: "popup-detail",
  components:{
    Popup,
    icon,
    vImage,
    scrollView,
    swiper,
    swiperItem,
    tab,
    game,
    giftBanner,
    layoutNaming
  },
  props,
  mixins
}
</script>

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