<template>
    <LayoutApp :show-back="true" :hideHeader="hideHeader">
        <div class="root-content">
            <div class="left-content">
                <Scroll>
                    <div class="category-left-item-root"
                      v-for="(item, index) in categoryParent"
                      :key="index"
                      :class="{'category-left-item-select-flag' : item.isSelect }"
                      :data-id="item"
                      @click="onClick(item)">
                      <p
                        class="category-left-item-title"
                        :class="{'category-left-item-select' : item.isSelect }">
                        {{item.name}}
                      </p>
                    </div>
                </Scroll>
            </div>
            <div class="right-content">
                <Scroll>
                    <div v-for="(itemSub, index) in categorySubList" :key="index">
                      <CategoryTitle>{{itemSub.name}}</CategoryTitle>
                        <div class="category-sub-root">
                            <div 
                                 v-for="(item, index) in itemSub.sub"
                                 :key="index"
                                 :data-id="item.id"
                                 :class="item.className">
                              <LayoutLink :href="item.url">
                                  <div :class="item.type ? 'item-imge-div-brand' : 'item-imge-div'" @click="goProductList(item,index, itemSub)">
                                      <ImgSize
                                        class="item-imge"
                                        :src="item.image"
                                        :width="144"
                                        :height="144"
                                      />
                                      <p v-if="!item.type" class="item-title">{{item.name}}</p>
                                  </div>
                                </LayoutLink>
                            </div>
                        </div>
                    </div>
                </Scroll>
            </div>

        </div>
    </LayoutApp>
</template>
<script>
import { Scroll } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
import Vue from 'vue';

import CategoryTitle from './components/category-title';
import ImgSize from '../../components/img-size';

const { mapState, mapActions } = createNamespacedHelpers('category');
export default {
  name: 'category',
  props: ['hideHeader'],
  components: {
    Scroll,
    ImgSize,
    CategoryTitle
  },
  data() {
    return {
      sortItem:{
        id:'-1',
        name:'brand',
      }
    };
  },
  mounted() {
    this.fetchCategoryParentList();
    let categorySubResult = this.fetchBrandList({});
    // this.reportPaser(categorySubResult);
    // console.log('categorySubList')
    // console.log(...categorySubResult)
  },
  methods: {
    ...mapActions(['fetchCategoryParentList', 'selectCategoryParent', 'fetchBrandList', 'fetchCategorySubList']),
    onClick(item) {
      if (!item.isSelect) {
        this.sortItem = item;
        let id = item.id;
        let name = item.name;
        // console.log('onClick==item')
        // console.log(item)

        this.$store.dispatch('reportYas', {
          params: {
            appop: 'XY_UFO_CATEGORY_TAB_LIST',
            param: {
              CATE_ID: id,
              CATE_NM: item.name
            }
          }
        });
        let subList ;
        if (id === '-1') {
          subList = this.fetchBrandList({ id });
        } else {
          subList = this.fetchCategorySubList({ id, name });
        }
        // this.reportPaser(subList);
      }
    },
    goProductList(item, index, itemSub) {
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_SORT_FLR_C',
          param: {
            CATE_ID: this.sortItem.id,
            CATE_NM: this.sortItem.name,
            CATE_INDEX: this.sortItem.index,
            F_ID: itemSub.id,
            F_NAME: itemSub.name,
            F_INDEX: itemSub.index,
            I_INDEX: index,
            TO_TYPE: item.linkType,
            TO_ID: item.link,
          }
        }
      });
    },
    reportPaser(subList) {
      console.log('reportPaser')
      console.log(...subList);
      if(subList && subList.length > 0){
        let reportSub = [];
        subList.forEach((val, index) => {
          val.su
                
            let reportItem = {
              CATE_ID: this.sortItem.id || '',
              CATE_NM: this.sortItem.name || '',
              CATE_INDEX: this.sortItem.index || '',
              F_ID: index,
              F_NAME: val.name,
              F_INDEX: index,
              I_INDEX: index,
              TO_TYPE: 'brand',
              TO_ID: val.id,
            }
            
            reportSub.push(subItem);

            });
      }
      
      
    }
  },
  computed: {
    ...mapState(['categoryParent', 'categorySubList']),
  },
};
</script>

<style scoped>
    .root-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      background-color: #FFFFFF;
    }

    .left-content {
      width: 28%;
      height: 100%;
      border-right: 1px solid #EEEEEE;
      flex-shrink: 0;
    }

    .right-content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      margin: 0 20px;
    }

    .category-left-item-root {
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      height: 104px;
      line-height: 104px;
      position: relative;
    }

    .category-left-item-title {
      color: #999999;
      font-size: 30px;
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .category-left-item-select {
      font-size: 44px;
      color: #000000;
    }

    .category-left-item-select-flag:before {
      content: "";
      width: 6px;
      height: 48px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -24px;
      background-color: #000000;
    }

    .category-sub-root {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding-bottom: 20px;
      margin-left: 5%;
      margin-right: 5%;
    }

    .sub-title {
      font-size: 24px;
      color: #000;
      text-align: center;
    }

    .item-div {
      display: flex;
      flex: 0 0 33%;
      height: 195px;
      justify-content: center;
    }

    .item-div-brand {
      display: flex;
      flex: 0 0 33%;
      height: 140px;
      justify-content: center;
    }

    .item-div-brand-right {
      display: flex;
      flex: 0 0 33%;
      height: 140px;
      justify-content: center;
      border-right: 1px solid  #EEEEEE;
    }

    .item-div-brand-bottom {
      display: flex;
      flex: 0 0 33%;
      height: 140px;
      justify-content: center;
      border-bottom: 1px solid  #EEEEEE;
    }
    .item-div-brand-right-bottom {
      display: flex;
      flex: 0 0 33%;
      height: 140px;
      justify-content: center;
      border-right: 1px solid  #EEEEEE;
      border-bottom: 1px solid  #EEEEEE;
    }

    .item-imge-div {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    .item-imge-div-brand {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .item-imge {
      object-fit: contain;
      height: 80%;
      width: 100%;
    }

    .item-title {
      font-family: 'SFProText-Regular';
      font-size: 22px;
      color: #000000;
      text-align: center;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-a-div {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 99;
    }
</style>