<template>
    <LayoutApp :show-back="true">
        <div class="root-content">
            <div class="left-content">
                <Scroll>
                    <div class="category-left-item-root"
                        v-for="(item, index) in categoryParent" 
                        :key="index" 
                        :data-id="item"
                        @click="onClick(item)">
                            <div :class="{'category-left-item-select-flag' : item.isSelect }"></div>
                            <p 
                            class="category-left-item-title"
                            :class="{'category-left-item-select' : item.isSelect }" >
                            {{item.name}}
                            </p>
                    </div>
                </Scroll>
            </div>
            <div class="left-right-split-line"></div>
            <div class="right-content">
                <Scroll>
                    <div v-for="(itemSub, index) in categorySubList" :key="index">
                        <p class="sub-title">——— {{itemSub.name}} ———</p>
                        <div class="category-sub-root">
                            <div class="item-div"
                            v-for="(item, index) in itemSub.sub"
                            :key="index" 
                            :data-id="item.id" 
                            >
                                <div class="item-imge-div" @click="goProductList(item)">
                                    <ImgSize
                                        class="item-imge"
                                        :src="item.image" 
                                        :width="60" 
                                        :height="60"
                                    />
                                    <p class="item-title">{{item.name}}</p>
                                </div>
                                <a v-if="item.isShow" class="item-a-div" :href="item.link"></a>
                            </div>
                        </div>
                    </div>
                </Scroll>
            </div>

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

const {mapState, mapActions} = createNamespacedHelpers('category');
export default {
  name: 'category',
  components: {
    Scroll,
    ImgSize
  },
  data() {
    return {
      
    };
  },
  mounted() {
    this.fetchCategoryParentList();
    this.fetchBrandList({});
  },
  methods: {
    ...mapActions(['fetchCategoryParentList', 'selectCategoryParent', 'fetchBrandList', 'fetchCategorySubList']),
    onClick(item){
        if(!item.isSelect){
            let id = item.id;
            if(id === "-1"){
                this.fetchBrandList({id});
            }else {
                this.fetchCategorySubList({id})
            }
        }
    },
    goProductList(item) {
        let key = item.linkType;
        let value = item.id;
        this.$router.push({
        name: "List",
        params: {
            key : value
        },
      });
    }
  },
  computed: {
    ...mapState(['categoryParent','categorySubList']),
  },
};
</script>

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

    }
    .left-right-split-line{
        height: 100%;
        width: 2px;
        background-color: #EEEEEE;
    }
    .left-content{
        width: 25%;
        height: 100%;
        
    }
    .right-content{
        display: flex;
        flex-direction: column;
        width: 75%;
        height: 100%;
    }
    .category-left-item-root{
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        margin-top: 28px;
        margin-bottom: 28px;
        
    }
    .category-left-item-title{
        color: #999999;
        font-size: 30px;
        width: 100%;
        text-align: center;
    }

    .category-left-item-select{
        font-size: 48px;
        color: #000000;
        
    }
    .category-left-item-select-flag {
        width: 9px;
        height: 48px;
        margin-bottom: 10px;
        margin-top: 10px;
        background-color: #000000;
        align-self: flex-start;
        justify-self: flex-start;
    }
    .category-sub-root {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    .sub-title{
        font-size: 24px;
        color: #000;
        text-align: center;
    }
    .item-div {
        position: relative;
        display: flex;
        flex: 0 0 33%;
        height: 195px;
  }
  .item-imge-div {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position:absolute;
      z-index: 1;
      padding-top: 20px;
      padding-bottom: 20px;
  }
 .item-imge {
    object-fit: contain;
  }
  .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>