<template>
  <article class="row between relative view-cate">
    <aside
        v-for="(item,index) in loading ? size : recommendGameCate"
        class="cate-item center cursor-pointer"
        :class="{'cate-item-select': loading ? false : item.gid === useCheckedId}"
        :key="'view-cate-'+index"
        @click="triggerItem(item)"
    >
      <v-image v-if="!loading" mode="center" backgroundColor="transparent"
               class="cate-icon"
               :src="item.game_ico"
      ></v-image>
      <div v-if="!loading" class="cate-item-label">{{item.game_name}}</div>
    </aside>
    <transition name="skewHeight">
      <section v-show="value" class="absolute view-cate-container">
        <scroll-view v-if="gameCate">
          <section
            v-for="(item,index) in gameCate"
            :key="'game-cate-'+index"
          >
            <header class="view-cate-header">
              <div class="view-cate-line"></div>
              <div>{{item.label}}</div>
            </header>
            <article class="row wrap cate-all">
              <aside
                  v-for="(item) in item.children"
                  class="cate-all-item center cursor-pointer"
                  :class="{'cate-item-select': item.gid === useCheckedId}"
                  :key="'view-cate-'+item.gid"
                  @click="triggerItem(item)"
              >
                <v-image mode="center" backgroundColor="transparent"
                   class="cate-all-icon"
                   :src="item.game_ico"
                ></v-image>
                <div class="cate-all-item-label">{{item.game_name}}</div>
              </aside>
            </article>
          </section>

        </scroll-view>
      </section>
    </transition>
  </article>
</template>

<script>
import cateData from '../data/cate';
import {
  vImage,
  scrollView
} from '$components';
import mixins from '../mixins';

import Throttle from '$utils/tool/throttle';

import cateConfig from '$config/cate';

export default {
  name: "view-cate",
  data(){
    return {
      cateData,
      value:false,
      useCheckedId:0,
      loading:true,
      size: cateConfig.gameCate.config.size
    }
  },

  methods:{

    triggerChangeItem(){
      return this.$emit('change',{
        id: this.useCheckedId > 0 ? this.useCheckedId : '',
        name: this.storageItem.game_name,
        options: this.storageItem.options
      });
    },

    triggerThrottleItem(){
      return this.triggerChangeItem();
    },

    triggerItem(item,change=true){

      // 判断如果为 分类更多
      if (item.cateMore) {
        this.value = !this.value;
      } else {

        if (this.value) {
          this.value = false;
        }

        if (this.useCheckedId !== item.gid) {
          this.storageItem = item;
          this.useCheckedId = item.gid;
          this.$emit('input',{
            id: this.useCheckedId > 0 ? this.useCheckedId : '',
            name: this.storageItem.game_name,
            options: this.storageItem.options
          });

          return change && this.triggerThrottleItem();
        }



      }

    }

  },

  created() {

    this.Throttle = new Throttle({
      call: this,
      handle: this.triggerThrottleItem,
      delay:600,
      first:false
    });

    this.triggerThrottleItem = this.Throttle.supper;

    this.$store.dispatch('initializationCatePromise').then(()=>{
      this.loading = false;

      this.triggerItem(this.recommendGameCate[0],false);

      return this.triggerChangeItem();
    });
  },

  mixins,

  components:{
    vImage,
    scrollView
  },

  beforeUnmount() {
    this.Throttle && this.Throttle.destroy();
    this.Throttle = null;
  }
}
</script>

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