<template>

<el-dropdown
  :teleported="false"
  ref="filter"
  trigger="click"
>

  <div class="filter">
    {{ filterText }} <div class="icon"></div>
  </div>

  <template #dropdown>
    <div class="submenu">
      <div
        v-for="xsub in useOptions"
        :key="xsub.type"
        class="x-submenu"
        @click="typeChange(xsub.type)"
      >
        {{ xsub.name }}
      </div>
    </div>
  </template>

</el-dropdown>

</template>

<script lang='ts' setup>
const emits = defineEmits(['okSelect'])

const props = defineProps<{
  defaultText: string,
  options: any[]
}>()

const act = defineModel()
const filter = ref(null)

const useOptions = computed(() => {
  return [
    { name: '全部', type: '' }, 
    ...props.options.map(({ name, type }) => {
      return { name, type }
    })
  ]
}) 

const filterText = computed(() => {

  if (!act.value) return props.defaultText

  const current = useOptions.value.find(item => item.type === act.value)
  return current.name

})

const typeChange = (type) => {

  act.value = type
    emits('okSelect', true)

  filter.value.handleClose()

}

</script>

<style lang='scss' scoped>

$Common_Url: '@/assets/images/common/';

.filter {
  color: white;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  .icon {
    width: 16px;
    height: 16px;
    background: url($Common_Url + 'filter.png') no-repeat;
    background-size: auto 100%;
    margin-left: 3px;
  }
}

.submenu {
  padding: 4px 0;
  .x-submenu {
    padding: 4px 20px;
    cursor: pointer;
    color: white;
    font-size: 13px;
    white-space: nowrap;

    &:not(.act):hover {
      background: rgba(124, 213, 255, 0.15);
    }
    
  }
}

</style>