<template>
  <section
    class="screen flex"
  >

    <flat-list :paging="false" @fetch="getDetail"
      :security-size="20"
    >

      <template v-slot:page>
        <div
          class="screen overflow"
        >
          <scroll-view :min-height="height<=0?'100%':'auto'">
            <section
              :class="[height<=0?'flex screen':'overflow']"
            >
              <header class="game-header rowACenter">
                <v-image class="game-avatar" mode="center" :src="item.game_info.game_ico" radius="50%"></v-image>
                <div class="flex-1 game-content">
                  <section
                      class="rowACenter"
                  >
                    <div class="flex-1 overflow rowACenter">
                      <div class="game-title ">{{item.game_info.game_name}}</div>
                      <div @click="triggerPlay" class="game-audio cursor-pointer rowCenter overflow">
                        <section class="row game-audio-group">
                          <svg v-if="playStatus === PlayStatus.playBefore" class="game-audio-loading" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                        <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
                      </path>
                   </svg>
                          <div
                              v-for="item in 9"
                              :key="item"
                              v-else
                              class="play-audio-item"
                              :class="['play-audio-'+item%3,playStatus === PlayStatus.play?'play-audio-animate-'+item%3:'']"
                          ></div>
                        </section>
                        <span v-if="playStatus === PlayStatus.play">{{duration}}s</span>
                        <span v-else-if="playStatus !== PlayStatus.playBefore">{{item.sound_duration}}s</span>
                      </div>
                    </div>
                    <div class="game-price-group">¥<span>{{item.price * number}}</span>/局</div>
                  </section>
                  <section class="rowACenter game-option">
                    <aside
                        v-for="(optionItem,index) in optionData"
                        :key="'option-'+index"
                    >{{optionItem.label}}: {{item[optionItem.key]}}{{optionItem.em}}</aside>
                  </section>
                  <section class="rowACenter game-option game-number">
                    <section class="rowACenter flex-1">
                      <span>数量:</span>
                      <stepper v-model:value="number" class="stepper-margin"></stepper>
                    </section>
                    <div class="game-button center overflow cursor-pointer"
                         :class="{'game-reverse': item.reverse}"
                         v-for="(item,index) in buttonData"
                         :key="'button-game-'+index"
                         @click="trigger(item,index,true)"
                    >{{item.label}}</div>
                  </section>

                </div>
              </header>
              <!--    交易流程    -->
              <section class="game-transaction rowACenter between">
                <div class="game-introduce">
                  交易流程
                </div>
                <section
                    v-for="(item,index) in transactionData"
                    :key="'transaction-'+index"
                    class="rowACenter"
                >
                  <svg v-if="index!==0" class="transaction-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6020" width="200" height="200"><path d="M672 512L352 232v560l320-280z" fill="#cfcfcf" p-id="6021"></path></svg>
                  <aside

                      class="transaction-item center"
                  >
                    <v-image :src="item.icon" mode="center" class="transaction-icon" />
                    <div>{{item.label}}</div>
                  </aside>
                </section>
              </section>
              <!--    描述    -->
              <section class="game-describe rowACenter between">
                <aside
                    v-for="(item,index) in describeData"
                    :key="'describe-'+index"
                    class="rowACenter"
                >
                  <svg t="1623067452203" class="game-describe-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7732" width="200" height="200" v-html="item.icon"></svg>
                  <div>{{item.label}}</div>
                </aside>
              </section>
              <!--    分类    -->
              <div
                  :class="{'flex-1':height<=0}"
                  ref="content">
                <tab
                    :data="tabData"
                    :auto-height="true"
                    ref="tab"
                    v-if="height>0"
                >
                  <template v-slot:header="{data,trigger,select}">
                    <header class="rowACenter game-tab-header">
                      <section class="flex-1 row">
                        <aside
                            v-for="(item,index) in data"
                            :key="'tab-'+index"
                            class="game-tab-item relative center"
                            :class="{
                  'cursor-pointer': index !== select,
                  'game-tab-item-select': index === select
                }"
                            @click="trigger(index)"
                        >{{item.label}}{{item.number?evaluate_number:''}}<div v-if="index === select" class="absolute game-tab-line"></div></aside>
                      </section>
                      <div class="rowACenter game-tab-score">
                        <div>评分</div>
                        <div class="game-score-number">{{item.evaluate_info && item.evaluate_info.avg_rate || 0}}</div>
                      </div>
                    </header>
                  </template>
                  <template
                      v-slot:[cItem.slot]
                      v-for="(cItem,index) in tabData"
                  >
                    <component
                        :is="cItem.component"
                        v-if="cItem.component"
                        :height="height"
                        :key="'tab-component-'+index"
                        :config="item"
                    ></component>
                  </template>
                </tab>
              </div>
            </section>
          </scroll-view>

        </div>


      </template>

    </flat-list>

  </section>
</template>

<script>
import {
  scrollView,
  vImage,
  FlatList,
  stepper,
  tab
} from '$components';
import skill from '../components/skill';
import commentList from '../components/comment-list';
import giftWall from '../components/gift-wall';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "game",

  components:{
    scrollView,
    vImage,
    FlatList,
    stepper,
    tab,
    skill,
    commentList,
    giftWall
  },
  props,
  mixins
}
</script>

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

<style>
.game-describe-icon path{
  fill: #999 !important;
}
</style>
