<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import { merchantCategoryListApi } from "@/api/shop.js";

const emit = defineEmits(["getStoreList"]);

const categoryList = ref([]);
const active = ref(-1);
const cactive = ref(-1);
const sactive = ref(-1);
const show = ref(false);

const getCategoryList = () => {
  merchantCategoryListApi(259).then((res) => {
    categoryList.value = res.data;
    active.value = -1;
  });
};
// getCategoryList();

const changeActive = (index=-1, idnexc=-1) => {
    sactive.value = index;
  active.value = index;
  cactive.value = idnexc;
  console.log(index, idnexc);
  show.value = true;
  let mer_cate_id = '';
  if(index>=0 &&idnexc>=0) mer_cate_id = categoryList.value[index].children[idnexc].store_category_id;
  else if(index>=0) mer_cate_id = categoryList.value[index].store_category_id;
  emit("getStoreList", {
    mer_cate_id: mer_cate_id,
  }, true);
};
</script>

<template>
  <div class="classify"  @mouseout="show?show=false:show=true">
    <div
          class="itemP"
          :class="{ 'itemP-active': -1 == active }"
          @click="changeActive(-1)"
        >
          {{ '全部' }}
        </div>
    <el-popover
      placement="left"
      width="20rem"
      trigger="click"
      v-for="(item, index) in categoryList"
      :key="index"
      :visible="index==active && sactive==index"
    >
      <template #reference>
        <div
          class="itemP"
          :class="{ 'itemP-active': index == active }"
          @click="changeActive(index)"
          @mousemove="sactive=index"
        >
          {{ item.cate_name }}
        </div>
      </template>
      <div class="active-card"
        @mouseout="sactive=-1" @mousemove="sactive=index">
        <div class="title">{{ item.cate_name }}</div>
        <div class="list">
          <div
            :class="{ 'list-active': indexc == cactive }"
            link
            type="primary"
            v-for="(chil, indexc) in item.children"
            :key="indexc"
            @click="changeActive(index, indexc)"
          >
            {{ chil.cate_name }}
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<style scoped lang="scss">
.classify {
  height: 100%;
  width: 8rem;
  background-color: #fff;
  border-radius: 1.2rem;
  font-size: 1rem;
  color: #333;
  overflow-y: scroll;

  .itemP {
    width: 4rem;
    margin: 1rem;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 3rem;
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 多余文本使用省略号显示 */
  }
  .itemP-active {
    background-color: #1890ff;
    color: #fff;
  }
}

.active-card {
  .title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
  }
  .list {
    display: flex;
    div {
      margin-right: 1rem;
      margin-top: 0.5rem;
      cursor: pointer;
      color: #333;
    }
    .list-active {
      color: #1890ff;
    }
  }
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  display: none;
}
</style>
