<!--
* @FileDescription: 字典
* @Author: 黄琪勇
* @Date:2022-07-08 16:37:56
-->
<template>
   <el-cascader
      class="h_dictionary"
      :show-all-levels="false"
      :props="propsOpt"
      :clearable="props.clearable"
      :popperClass="popperClass + ' dictionaryPopper'"
      v-bind="$attrs"
   />
</template>

<script setup lang="ts">
import { baseSize } from "@/libs/rem"
import { CascaderProps } from "element-plus"
import { computed, useAttrs } from "vue"
import dictionaryCacheStore from "@/store/modules/dictionaryCache"

const attrs = useAttrs()
const dictionaryCacheStoreHook = dictionaryCacheStore()
const props = withDefaults(
   defineProps<{
      clearable?: boolean
      propsOpt?: Omit<CascaderProps, "lazyLoad" | "emitPath" | "lazy">
      dictionaryKey?: string
      popperClass?: string
      width?: number
      height?: number
   }>(),
   {
      clearable: true,
      propsOpt: () => {
         return {}
      }
   }
)
const propsOpt: CascaderProps = {
   emitPath: Array.isArray(attrs.modelValue) ? true : false, //当可能为多级字典时候 emitPath为true 值为数组模式
   lazy: props.dictionaryKey ? true : false,
   leaf: "haveChild",
   async lazyLoad({ level, data }, resolve) {
      const dictionaryData = await dictionaryCacheStoreHook.getDictionary(level === 0 ? props.dictionaryKey! : (data!.itemdetailid as string))
      resolve(dictionaryData)
   }
}
//赋值
Object.assign(propsOpt, props.propsOpt)

const _h_width = computed(() => {
   return props.width ? (props.width / baseSize).toFixed(5) + "rem" : "100%"
})
const _h_height = computed(() => {
   return (((props.height || 32) - 4) / baseSize).toFixed(5) + "rem"
})
</script>

<style lang="scss">
.h_dictionary {
   flex-shrink: 0;
   width: v-bind(_h_width);
   .el-input {
      --el-input-text-color: #333;
      font-size: 16px;
   }
   .el-input__suffix {
      font-size: 14px;
   }
   .el-input__wrapper {
      border-radius: 20px;
      box-shadow: none;
      padding: 1px 26px 1px 16px;
      border: 1px solid transparent;
      &.is-focus {
         border-color: #ff8057 !important;
         box-shadow: 0px 0px 4px 0px rgba(255, 155, 109) !important;
      }
      .el-input__inner {
         --el-input-inner-height: v-bind(_h_height);
      }
   }
}

.el-cascader__dropdown.el-popper.is-light.dictionaryPopper {
   box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 17px 0px;
   border-radius: 12px;
   border: none;
   .el-cascader-menu__list {
      padding: 12px 0;
   }
   .el-cascader-node:not(.is-disabled):hover,
   .el-cascader-node:not(.is-disabled):focus {
      background-color: transparent;
   }
   .el-cascader-menu {
      &:last-child .el-cascader-node {
         padding: 0 12px;
         line-height: 40px;
         height: 40px;
      }
   }
   .el-cascader-node__prefix {
      display: none;
   }
   .is-active .el-cascader-node__label {
      color: #994d1c;
   }
   .el-cascader-node__label {
      font-size: 16px;
      border-radius: 8px;
      &:hover {
         color: #994d1c;
         background: #fff3d7;
      }
   }
   .el-popper__arrow {
      display: none;
   }
}
</style>
