<template>
  <div class="cate-container">
    <div class="cate-wrap">
      <div class="wrap-container">
        <div class="cate-title">分类</div>
        <template v-for="(item, key) in datas_list">
          <div class="cate-item" :class="cate_id == item.value && cate_child_id == '' ? 'cate-item-active' : ''" @click="handleClaSelect(item)">{{ item.title }}</div>
        </template>
      </div>
    </div>
    <div class="cate-line">
      <div class="cate-title">二级分类</div>
      <template v-for="(item, key) in datas_child_list">
        <div class="cate-item" :class="cate_child_id == item.value ? 'cate-item-active' : ''" @click="handleClaSelect(item)">{{ item.title }}</div>
      </template>
    </div>
  </div>
</template>
<script setup>
import _ from 'lodash';
const props = defineProps({
  datas: {
    type: Array,
    default: [],
  },
});

const emits = defineEmits(['claSelect']);

const { datas } = toRefs(props);

const cate_id = ref('');
const cate_child_id = ref('');
const datas_list = ref({});
const datas_child_list = ref();
watch(datas, () => {
  handleData();
});

function handleData() {
  datas_list.value = { 0: { title: '全部', value: '', children: [] } };
  let data = {};
  props.datas?.map(item => {
    if (!item.parentId) {
      data[item.key] = item;
    } else {
      if (!data[item.parentId]) {
        data[item.parentId] = {};
      }
      if (!data[item.parentId]?.children) {
        data[item.parentId].children = [];
      }
      data[item.parentId].children.push(item);
    }
  });
  Object.keys(data).map(item => {
    if (data[item]?.children?.length > 0 && data[item].value) {
      datas_list.value[item] = data[item];
    }
  });
}
//点击分类
function handleClaSelect(item) {
  cate_id.value = item.value;
  cate_child_id.value = '';
  let parama = '';
  if (item.parentId) {
    cate_id.value = item.parentId;
    cate_child_id.value = item.value;
  } else {
    datas_child_list.value = item.children || [];
  }
  if (!item.parentId && item.children.length > 0) {
    parama = item.children.map(item => item.value);
    parama = parama.join(',');
  }
  if (item.parentId) {
    parama = item.value;
  }
  emits('claSelect', parama);
}
</script>
<style scoped lang="scss">
.cate-container {
  margin-top: 10px;

  .cate-wrap {
    max-height: 40px;
    overflow: hidden;
    &:hover {
      overflow: visible;
      .wrap-container {
        border-radius: 4px;
        padding: 0 16px;
      }
    }

    .wrap-container {
      background-color: #ffffff;
      display: flex;
      flex-wrap: wrap;
      z-index: 2;
      border: solid 1px #fff;
      border-radius: 4px;
      padding: 0 16px;
    }
  }
  .cate-wrap,
  .cate-line {
    padding: 5px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .cate-line {
    margin-top: 10px;
  }
  .cate-title {
    display: flex;
    min-width: 35px;
    padding: 0;
    margin-right: 16px;
    color: #b4b8bf;
    cursor: default;
    align-items: center;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 32px;
  }
  .cate-item {
    flex-shrink: 0;
    margin: 0 12px 5px 0;
    min-width: 52px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid transparent;
    position: relative;
    height: 32px;
    padding: 0 15px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    transition:
      color 0.3s,
      background 0.3s,
      border-color 0.3s,
      box-shadow 0.3s;
    &:hover {
      cursor: pointer;
      color: #3a2be0;
    }
  }
  .cate-item-active {
    font-weight: 500;
    border: 1px solid #3a2be0;
    color: #3a2be0;
    background-color: #f4f3ff;
  }
}
</style>
