<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"
                         :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',
  props: ['hideHeader'],
  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>