<template>
  <div v-loading="loading" :element-loading-background="elementLoadingBackground" style="width: 100%;">
    <el-cascader
       style="width: 100%;"
       v-bind="$attrs"
       v-model="paramVal"
       :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
       :options="options"
       :clearable="$util.isValue($attrs.clearable) ? $attrs.clearable : true"
       :filterable="$util.isValue($attrs.filterable) ? $attrs.filterable : true"
       :props="propsCpt"
       :teleported="false"
       :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
    >
      <template #default="{ node, data }">
        <slot v-bind="{node, data}">
          <div class="cascader-item __text-ellipsis">
            <template v-if="panelMaxWidth">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="data[propsCpt.label]"
                  placement="top"
              >
                <span>{{ data[propsCpt.label] }}</span>
              </el-tooltip>
            </template>
            <template v-else>
              <span>{{ data[propsCpt.label] }}</span>
            </template>
          </div>
        </slot>
      </template>
    </el-cascader>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    param: {},
    label: {},
    options: { type: Array, default: () => [] },
    props: {},
    panelMaxWidth: {
      default: null
    },
    static: {default: false}
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramVal: props.param,
      defaultProps: {
        expandTrigger: 'hover' as const,
        checkStrictly: true,
        emitPath: false,
        label: 'label',
        value: 'value'
      },
      loading: true,
      elementLoadingBackground: inject('element-loading-background', null),
      formView: inject('form-view', false),
    })
    watch(() => state.paramVal, (n) => {
      emit('emitParam', n)
    })
    watch(() => props.param, (n) => {
      state.paramVal = n
    })
    watch(() => [props.options, props.static], () => {
      state.loading = false
    })
    const propsCpt = computed(() => {
      return props.props ? props.props : state.defaultProps
    })
    onMounted(() => {
      if (props.static !== false || props.options?.length > 0) {
        state.loading = false
      }
    })
    return {
      ...toRefs(state),
      propsCpt
    }
  },
})
</script>

<style scoped lang="scss">
:deep(.el-cascader__dropdown) {
  .el-cascader-node__label {
    $cmw: v-bind(panelMaxWidth);
    @if($cmw) {
      max-width: $cmw;
    }
    .cascader-item {
      width: 100%;
    }
  }
  .el-cascader__suggestion-item {
    height: auto !important;
  }
}

</style>
