<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="choosing-skill-container flex relative">
      <header class="rowACenter choosing-skill-header">
        <div class="choosing-skill-title flex-1">选择技能</div>
      </header>
      <div @click="close" class="choosing-skill-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="choosing-skill-close"></icon>
      </div>

      <section class="flex-1 overflow">

        <scroll-view>
          <aside
              v-for="(item,index) in gameStatusCate"
              :key="'skill-cate-'+index"
              :class="{'skill-cate-margin':index!==0}"
          >
            <header class="row aCenter skill-header-item">
              <div class="skill-header-icon"></div>
              <div>{{item.label}}</div>
            </header>

            <section class="rowACenter wrap skill-header-content">
              <template
                  v-for="(item) in item.children"
              >
                <aside
                    class="skill-item center"
                    :key="'skill-'+item.gid"
                    v-if="item.gid > 0"
                    :class="{
                      'skill-status-item': statusData[item.status],
                      'skill-item-disabled': statusData[item.status] && statusData[item.status].disabled
                    }"
                    @click="getGame(item)"
                >
                  <v-image
                      :src="item.game_ico"
                      class="skill-icon"
                      mode="center"
                      backgroundColor="transparent"
                  ></v-image>
                  <div class="line-1">{{item.game_name}}</div>
                  <div class="skill-status" v-if="statusData[item.status]">({{statusData[item.status].label}})</div>
                </aside>
              </template>
            </section>

          </aside>
        </scroll-view>

      </section>


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

<script>
import {
  Popup,
  icon,
  vImage,
  scrollView
} from '$components';
import mixins from '../mixins';
export default {
  name: "popup-choosing",
  components:{
    Popup,
    icon,
    vImage,
    scrollView
  },
  mixins
}
</script>

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