<template>
  <form-datepicker v-if="attrs.type === 'date'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-input v-else-if="attrs.type === 'input'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-radio v-else-if="attrs.type === 'radio'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-region v-else-if="attrs.type === 'region'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-select v-else-if="attrs.type === 'select'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-textarea v-else-if="attrs.type === 'textarea'" v-bind="attrs" :form="form" :disableChange="disableChange"
    @change="change" />
  <form-mult-disease v-else-if="attrs.type === 'selfMultipleDiseases'" v-bind="attrs" :form="form"
    @change="change"></form-mult-disease>
  <form-mult-disease v-else-if="attrs.type === 'diagnosis'" v-bind="attrs" :form="form"
    @change="change"></form-mult-disease>
  <form-upload v-else-if="attrs.type === 'files'" v-bind="attrs" :form="form" @change="change" />

  <!-- 
  <form-operation v-else-if="attrs.title === 'surgicalHistory'" v-bind="attrs" :form="form" @change="change"
    @addRule="addRule" />
  <form-mult v-else-if="attrs.type === 'multiSelectAndOther'" v-bind="attrs" :form="form" @change="change"
    @addRule="addRule" />
  <customer-mult-disease v-else-if="attrs.type === 'selfMultipleDiseases'" v-bind="attrs" :form="form"
    @change="change"></customer-mult-disease> -->
  <!-- <view v-else-if="type" class="py-20rpx px-30rpx border-bottom"> {{ type }} {{ attrs.name }}</view> -->
</template>
<script setup>
import { useAttrs } from 'vue';

import formInput from './form-input.vue';
import formSelect from './form-select.vue';
import formRadio from './form-radio.vue';
import formDatepicker from './form-datepicker.vue';
import formRegion from './form-region.vue';
import formTextarea from './form-textarea.vue';
import formMultDisease from './form-multiple-diseases.vue';
import formUpload from './form-upload.vue';

defineProps({
  form: {
    type: Object,
    default: () => ({})
  },
  disableChange: {
    type: Boolean,
    default: false
  }
})

const attrs = useAttrs();
const emits = defineEmits(['change']);

function change(data) {
  emits('change', data)
}
</script>

<!-- <script>
import formDatepicker from './form-datepicker.vue';
import formInput from './form-input.vue';
import formRadio from './form-radio.vue';
import formSelect from './form-select.vue';
import formRegion from './form-region/form-region.vue';
import formTextarea from './form-textarea.vue';
import formMult from './form-multiSelectAndOther.vue';
import formOperation from './form-operation.vue';
import customerMultDisease from '../custom-cell/custom-multiple-diseases.vue';
export default {
  components: {
    formInput,
    formSelect,
    formDatepicker,
    formRadio,
    formRegion,
    formTextarea,
    formMult,
    formOperation,
    customerMultDisease
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    componentName() {
      return FormComponent[this.attrs.type]
    }
  },
  methods: {
    change(data) {
      this.$emit('change', data)
    },
    addRule(data) {
      this.$emit('addRule', data)
    }
  }
}
</script> -->

<style lang="scss" scoped></style>