<template>
  <div class="searchTool">
    <div class="searchToolTitle">
      语义分析类别选择
    </div>
    <div class="searchToolContent flex align-center">
      <div class="searchToolContentTitle">分析类别：</div>
      <el-cascader  style=" width: calc(100% - 70px)" :show-all-levels="false" clearable filterable placeholder=" 请选择标签"

        :options="dict.D_GSXT_FXLB" v-model="selectedValues" @change="handleChange" :props="endProps"
        ref="myCascader" :collapse-tags="true"  :collapse-tags-tooltip="true" :max-collapse-tags="10"/>
    </div>
  </div>

</template>

<script setup>
import { onMounted, computed, ref, watch } from 'vue'
import emitter from "@/utils/eventBus.js";
onMounted(() => {
})
const props = defineProps({
  dict: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  }

})

const selectedValues = ref([]);
const endProps = {
  children: "itemList",
  value: "dm",
  label: "zdmc",
  checkStrictly: false,
  multiple: true,
};
const myCascader = ref()


const handleChange = (val) => {

  const obj = myCascader.value.getCheckedNodes().map(item => {
    return {
      label: item.label,
      value: item.value
    }
  })
  emitter.emit('changeTab', obj)
}
watch(() => props.title, (val) => {
  console.log(myCascader.value);

  myCascader.value.handleClear()
})

</script>

<style lang="scss" scoped>
.searchTool {
  background-color: #fff;
  color: #000;
  padding: 16px 20px;
  border-radius: 5px;

  .searchToolTitle {
    font-size: 18px;
    font-family: 'verdana';
    position: relative;
  }

  .searchToolContent {
    margin-top: 16px;

    .searchToolContentTitle {
      width: 70px;
    }

    .searchToolContentSelect {
      width: 100%;
      //
    }
  }

  .searchToolTitle::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 80px;
    border-radius: 5px;
    height: 4px;
    background-color: #0386fb;
    background: linear-gradient(90deg, #0aa1ff 2%, #ffffff 100%);
  }
}
</style>
