<template>
  <div style="width: 100%">
    <!-- radio -->
    <el-radio-group v-model="modelVal" @change="onChange" v-if="props.selectType === 'radio'" :disabled="props.disabled">
      <el-radio v-for="(item, i) in props.dictData" :key="i" :label="item.value ? item.value : item.dm" :disabled="item.disabled" @click="getlable(item)">{{
        item.label ? item.label : item.zdmc
      }}</el-radio>
    </el-radio-group>
    <!-- select -->
    <el-select
      class="pxdx_box"
      v-model="modelVal"
      clearable
      :multiple="props.multiple"
      :disabled="props.disabled"
      :placeholder="props.placeholder"
      v-else-if="props.selectType === 'select'"
      @change="onChange"
      @clear="changeclear"
      style="width: 100%"
      :collapse-tags="collapseTags"
    >
      <el-option v-for="item in props.dictData" :key="item.value" :label="item.label" :value="item.value" @click="getlable(item)" :disabled="item.disabled" />
    </el-select>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, watchEffect, watch } from "vue"
const props = defineProps({
  modelValue: String, //选中值 || 回显
  dictData: Array, //数据
  disabled: {
    type: Boolean,
    default: false
  }, //禁用
  placeholder: {
    type: String,
    default: "请选择"
  },
  //是否多选
  multiple: {
    type: Boolean,
    default: false
  },
  //选择方式
  selectType: {
    type: String,
    default: "radio" //radio || select
  },
  /** 原生属性 -- 多选时是否将选中值按文字的形式展示 */
  collapseTags: {
    type: Boolean,
    default: undefined
  },
  //需要禁用的某个或者多个选项
  disabledItem: Array,
  /** 自动清空字典匹配不上的内容(目前仅做单选) */
  autoClear: {
    type: Boolean,
    default: true
  }
})
const modelVal = defineModel()
const emits = defineEmits(["update:modelValue", "onChange", "getselect", "changeclear"])
const onChange = val => {
  emits("update:modelValue", val)
  let namearr = []
  if (props.multiple) {
    for (let i = 0; i < val.length; i++) {
      const name = props.dictData && props.dictData.find(item => item.value == val[i])?.label
      namearr.push(name)
    }
    emits("onChange", val, namearr)
  } else {
    const label = props.dictData && props.dictData.find(item => item.value == val)?.label
    emits("onChange", val, label)
  }
}
function getlable(val) {
  if (props.disabled) return
  emits("getselect", val)
}
function changeclear(val) {
  emits("changeclear", val)
}
/** 获取需要的内容 */
const getNeedVal = (val, dictData) => {
  let arr = []
  if (typeof val === "string" && val) {
    arr = val.split(",")
  } else if (Array.isArray(val)) {
    arr = val.map(item => item)
  }
  /** 是否有脏数据,即字典没有的数据 */
  const isSomeNotHad = arr.some(value => {
    return !dictData.find(item => item.value == value)
  })
  if (isSomeNotHad) {
    arr = arr.filter(value => {
      const obj = dictData.find(item => item.value == value)
      return obj
    })
  }
  return arr
}
watch(
  [() => props.dictData, () => props.modelValue],
  ([opt, val]) => {
    if (props.autoClear && opt?.length && val?.length) {
      // 多选
      if (props.multiple) {
        // const newVal = getNeedVal(val,opt)
        // emits("update:modelValue", newVal)
        // 单选
      } else {
        // 清除不存在的项
        let arr = Array.isArray(opt) ? opt : []
        const curr = arr.find(item => item?.value == val || item?.dm == val) // select 用value ,radio 用value或者dm
        // if (!curr) emits("update:modelValue", '')
        if (!curr) modelVal.value = ""
      }
    }
  },
  {
    immediate: true
  }
)
watchEffect(() => {
  //处理是否禁用选项
  if (props.dictData?.length) {
    props.dictData.forEach(item => {
      item.disabled = false
    })
    if (props.disabledItem?.length) {
      props.dictData.forEach(item => {
        props.disabledItem.forEach(it => {
          if (item.value == it) {
            item.disabled = true
          }
        })
      })
    } else {
      props.dictData.forEach(item => {
        item.disabled = false
      })
    }
  }
})
</script>
<style>
.el-select-dropdown__item.is-disabled {
  color: #999 !important;
}
</style>
