<template>
  <div>
    <van-nav-bar title="全部分类" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="category_body_com has_header">
      <scroller class="left_category_list_box_left">
        <ul>
          <li v-for="(item, index) in top_list" :key="index" :class="{ item_list: true, category_on: current_id == item.id }" @click="get_category_list(item.id)">
            <a href="javascript:void(0);">{{ item.name }}</a>
          </li>
        </ul>
      </scroller>
      <scroller :class="{ 'no-data': category_list.length == 0, left_category_list_box_right: true }">
        <van-row v-for="(item, index) in category_list" :key="index">
          <van-col span="24"><van-cell class="sec_category_name" :title="item.name" /></van-col>

          <van-col class="last_category_box" v-for="(ch_item, ch_index) in item.child" :key="ch_index" span="8">
            <img class="category_list_image" @click="$router.push({ name: 'goods_list', query: { category_id: ch_item.id } })" v-lazy="ch_item.image" />
            <div class="last_category_name">{{ ch_item.name }}</div>
          </van-col>
        </van-row>
      </scroller>
    </div>

    <common_footer :active_index="1"></common_footer>
  </div>
</template>

<script>
import common_footer from '@/components/common/footer';
import request from '@/utils/request';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  name: 'category_list',
  components: { common_footer },
  data() {
    return {
      top_list: [],
      category_list: [],
      current_id: 0
    };
  },
  created() {
    this.get_top_list();
  },
  methods: {
    get_top_list() {
      let self = this;
      let category_id = 0;
      if (this.$route.query.category_id > 0) {
        category_id = category_id;
      }
      request('get','/shop/ajax/getCategoryListByCategoryId.html?category_id=' + category_id).then(res => {
          self.top_list = res.data.data.list;
          if (self.top_list.length > 0) {
            self.get_category_list(self.top_list[0].id);
          }
        })
        .catch(e => {});
    },
    get_category_list(category_id) {
      let self = this;
      self.$toast.loading({
        mask: true,
        message: '加载中...'
      });
      self.current_id = category_id;
      request('get','/shop/ajax/getCategoryListByCategoryId.html?category_id=' + category_id)
        .then(res => {
          self.category_list = res.data.data.list;
          self.$toast.clear();
        })
        .catch(e => {});
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.sec_category_name {
  font-weight: bold;
}
.category_list_image {
  width: 1.2rem;
  background-color: #eee;
  height: 1.2rem;
  display: block;
  margin: 0 auto;
}
.last_category_name {
  font-size: 0.24rem;
}
.left_category_list_box_left {
  right: 5.7rem;
  width: auto !important;
  background-color: #f1f1f1;
}
.last_category_box {
  text-align: center;
  padding-bottom: 0.32rem;
}
.left_category_list_box_left li.item_list a {
  color: #333;
  padding: 0.3rem 0.16rem;
  font-size: 0.32rem;
  display: block;
}
.left_category_list_box_left .category_on {
  background-color: #fff;
}
.left_category_list_box_right {
  left: 1.8rem !important;
  right: 0;
  width: auto !important;
  background-color: #fff;
}
.category_body_com {
  height: calc(100% - 1rem);
  position: relative;
}
.category_body_com.has_header {
  height: calc(100% - 1.92rem);
}
</style>
