<template>
  <view class="storeCategory">
    <scroll-view class="category_left" scroll-y>
      <view
        v-for="(item, index) in categoryMenu"
        :class="[
          'item',
          {
            current: categoryMenuIndex === index,
          },
        ]"
        @click="categoryMenuClick(index, $event)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="category_right" scroll-y>
      <view v-for="(item, index) in categoryList" class="box" :key="index">
        <view class="tit">{{ item.name }}</view>
        <view class="list">
            <navigator class="item"  :url="`/pagesub/index/store?store_id=${shop.store_id}`" v-if="item.storeList!=null"  v-for="(shop, cur) in item.storeList.items" :key="cur">
                  <image lazy-load class="img" :src="shop.store_logo"></image>
                  <view class="desc">{{ shop.store_name }}</view>
            </navigator>
        </view>
        <view class="nodata" v-if="item.storeList.items.length==0">该分类暂无店铺数据</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      categoryMenu: [],
      categoryList: [],
      categoryMenuIndex: 0,
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  mounted() {
    const _this = this;
    const params = {
      openFindStore: true,
      pageSize: 9999,
    };
    this.$.request({
      url: this.Config.URL.store.category,
      data: params,
      dataType: "json",
      success(data, status, msg, code) {
        const items = data.items
        _this.categoryMenu = items;
         _this.categoryList = items[_this.categoryMenuIndex]?.sub;
      },
    });
  },
  methods: {
    categoryMenuClick(index) {
      this.categoryMenuIndex = index;
      this.categoryList = this.categoryMenu[index]?.sub; 
    },
  },
};
</script>

<style lang="scss" scoped>
.category_left {
  width: 200rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12rpx;
  z-index: 1;
  box-sizing: border-box;
  .item {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222;
    font-size: 28rpx;
    font-weight: bold;
    padding: 16rpx;
    &.current {
      color: #fe411b;
    }
  }
}
.category_right {
  width: calc(100vw - 232rpx - 20rpx);
  position: absolute;
  top: 20rpx;
  bottom: 0;
  left: 232rpx;
  z-index: 1;
   .box {
    min-height: 180rpx;
    padding: 16rpx;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
    background: #fff;
    .list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10rpx;
    }
    .tit{
        padding-bottom: 10rpx;
    }
    .item{
         display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
         width: 140rpx;
        .img{
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
            margin-bottom: 8rpx;
        }
        .desc{
            width: 140rpx;
            text-align: center;
            font-size: 24rpx;
            color: #666;
             white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .nodata{
        text-align: center;
        color: #999;
        padding: 50rpx;
        font-size: 24rpx;
    }
  }
}
</style>
