<!--搜索条件筛选，可多选，商品搜索列表、商户搜索列表中使用-->
<script setup lang="ts">
import { toRefs, ref, onMounted, shallowRef } from 'vue'
const props = defineProps({
  //列表数据
  list: {
    type: Array,
    default: [],
  },
})
const { list } = toRefs(props)
const emit = defineEmits(['handleSubmitChecked'])
const selectedList = ref({})

//判断是否展示 展开收起 按钮
onMounted(() => {
  list.value.forEach((item:any,index:number)=>{
    if(document.getElementById(`myElement${index}`)){
      let myElement = document.getElementById(`myElement${index}`);
      if(myElement.offsetHeight>38){
        item.isShowBtnMore=true
      }else{
        item.isShowBtnMore=false
      }
    }
  })
});

/**
 * 点击菜单
 * @param list 当前选中的大类
 * @param item 当前选中菜单的对象
 */
const handleMenu = (list: any, item: any) => {
  list.list.forEach((val, i) => {
    if (val.id == item.id) {
      val.isChoose = !val.isChoose
    }else{
      if(!list.multiple) val.isChoose =false
    }
  })
  //多选
  if(list.multiple){
    if (item.isChoose) {
      list.checked.push(item.id)
    } else {
      let index = list.checked.findIndex((itemn) => itemn === item.id)
      list.checked.splice(index,1)
    }
    selectedList.value[list.type] = list.checked
  }else{
    //单选
    if (item.isChoose) {
      selectedList.value[list.type] = item.id
    }else{
      selectedList.value[list.type] = ''
    }
  }
  emit('handleSubmitChecked', selectedList.value)
}
</script>

<template>
  <div class="b-rd-16px bg-#FFFFFF px-30px" v-if="list.length>0">
    <template v-for="(item, index) in list" :key="index">
      <div v-if="item.list && item.list.length"  class="sort acea-row">
        <div class="name mr-20px">{{ item.name }}：</div>
        <div class="listCon acea-row row-between text-#333 text-14px cursors w-1050px" :class="item.showMore?'on':''">
          <div :ref="'myElement'+index" :id="'myElement'+index" class="list acea-row w-960px h-auto">
            <div
                class="item"
                :class="(items.isChoose &&item.multiple) || (selectedList[item.type]===items.id && !item.multiple) ? 'font-color' : ''"
                v-for="(items, idx) in item.list"
                :key="idx"
                @click="handleMenu(item, items)"
            >
              {{ items.name || items.tagName }}
            </div>
          </div>
          <div v-if="!item.showMore && item.isShowBtnMore" class="cursors fontColor6 text-14px text-center" @click="item.showMore = !item.showMore">
            收起 <span class="iconfont icon-gao"></span>
          </div>
          <div v-if="item.showMore && item.isShowBtnMore" class="fontColor6 text-14px text-center cursors" @click="item.showMore = !item.showMore">
            展开 <span class="iconfont icon-di"></span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.on {
  height: 37px;
  overflow: hidden;
}
.sort {
  border-bottom: 1px dashed #eeeeee;
  padding-bottom: 11px;
  padding-top: 30px;
  &:last-child {
    border: none;
  }
  .name {
    width: 70px;
    font-size: 14px;
    color: #666666;
  }

  .item {
    margin-right: 30px;
    margin-bottom: 19px;
    .icon {
      font-size: 15px;
      margin-left: 5px;
    }
    .iconfont {
      font-size: 15px;
      color: #e2e2e2;
      margin-left: 5px;
    }
  }
}
</style>
