<template>
  <article class="row relative view-cate">
    <aside
        v-for="(item,index) in loading ? 0 : recommendRoomCate"
        class="cate-item talking-cate-item center cursor-pointer"
        :class="{'cate-item-select': loading ? false : item.tid === useCheckedId}"
        :key="'view-cate-'+index"
        @click="triggerItem(item)"
    >
      <v-image v-if="!loading" mode="center" backgroundColor="transparent"
               class="cate-icon"
               :src="item.image"
      ></v-image>
      <div v-if="!loading" class="cate-item-label">{{item.label}}</div>
    </aside>
    <transition name="skewHeight">
      <section v-show="value" class="absolute view-cate-container talking-view-cate-container">
        <scroll-view v-if="roomCate">
          <section>
            <article class="row wrap cate-all">
              <aside
                  class="cate-all-item center cursor-pointer"
                  :class="{'cate-item-select': item.tid === useCheckedId}"
                  :key="'view-cate-'+item.tid"
                  @click="triggerItem(item)"
                  v-for="(item,index) in roomCate"
              >
                <v-image mode="center" backgroundColor="transparent"
                   class="cate-all-icon"
                   :src="item.image"
                ></v-image>
                <div class="cate-all-item-label">{{item.label}}</div>
              </aside>
            </article>
          </section>

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

<script>
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 {
      value:false,
      useCheckedId:0,
      loading:true
    }
  },

  methods:{

    triggerChangeItem(){
      return this.$emit('change',{
        id: this.useCheckedId > 0 ? this.useCheckedId : '',
        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.tid) {
          this.storageItem = item;
          this.useCheckedId = item.tid;
          this.$emit('input',{
            id: this.useCheckedId > 0 ? this.useCheckedId : '',
            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('initializationRoomCatePromise').then(()=>{

      this.loading = false;

      this.triggerItem(this.roomCate[1],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>