
<!-- 动态封装新增编辑弹窗各个类型输入情况 -->
<script lang="ts">
import { h, renderSlot } from 'vue'
import { ElInput, ElSelect, ElOption, ElRadioGroup, ElSwitch } from 'element-plus'
export default {
  name: 'Edit',
  props: {
    modValue: { // 用于组件v-model数据更改
      type: [String, Number, Boolean],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    inputType: { // 输入类型
      type: String,
      default: 'text'
    },
    type: { // 输入类型 input select switch radio
      type: String,
      default: 'input'
    },
    options: { // select组件的option数组数据
      type: Array,
      default: null
    },
    selectProp: { // select组件的option数组数据字段
      type: Object,
      default: null
    }
  },
  emits: ['update:modValue'],
  setup(props: any, context: any) {
    switch (props.type) {
      case 'input': {
        let inputValue = props.modValue // 用于实时更改input的值
        return () => [
          h(ElInput, {
            ...ElInput.$el,
            ...ElInput.$attrs,
            placeholder: props.placeholder,
            type: props.inputType,
            modelValue: inputValue,
            'onUpdate:modelValue': ($event: any) => {
              // emit更新父组件数据
              context.emit('update:modValue', $event)
              return inputValue = $event // 更新input
            }
          })
        ]
      }
      case 'select': {
        let inputValue = props.modValue
        return () => [
          h(
            ElSelect,
            {
              ...ElSelect.$el,
              ...ElSelect.$attrs,
              placeholder: props.placeholder,
              type: props.inputType,
              modelValue: inputValue,
              'onUpdate:modelValue': ($event: any) => {
                // emit更新父组件数据
                context.emit('update:modValue', $event)
                return inputValue = $event
              },
            },
            () => [
              props.options.map((item: any) => {
                return h(ElOption, {
                  value: item[props.selectProp.value],
                  label: item[props.selectProp.label]
                })
              })
            ]
          )
        ]
      }
      case 'radio': {
        let inputValue = props.modValue
        return () => [
          h(
            ElRadioGroup,
            {
              ...ElRadioGroup.$el,
              ...ElRadioGroup.$attrs,
              modelValue: inputValue,
              'onUpdate:modelValue': ($event: any) => {
                // emit更新父组件数据
                context.emit('update:modValue', $event)
                return inputValue = $event
              },
            },
            () => [ // 以函数的形式避免eslint 警告
              renderSlot(context.slots, 'radios')
            ]
          )
        ]
      }
      case 'switch': {
        let inputValue = props.modValue
        return () => [
          h(
            ElSwitch,
            {
              ...ElSwitch.$el,
              ...ElSwitch.$attrs,
              modelValue: inputValue,
              activeValue: true,
              inactiveValue: false,
              'onUpdate:modelValue': ($event: any) => {
                // emit更新父组件数据
                context.emit('update:modValue', $event)
                return inputValue = $event
              },
            }
          )
        ]
      }
      default:
        // 默认输出为空
        return () => [
          h('p', {
           class: 'name'
          }, '123')
        ]
    }
  }
}
</script>

