<template>
  <div>
    <vee-select v-if="type==='select'" v-model="model.value" :options="model.options"></vee-select>
    <vee-number v-else-if="type==='number'" v-model="model.value"></vee-number>
    <vee-switch v-else-if="type==='boolean'" v-model="model.value"></vee-switch>
    <vee-json-edit v-else-if="type==='object'" :model="model" :showTitle="objShowTitle"></vee-json-edit>
    <vee-json-edit v-else-if="type==='array'" :model="model" :showTitle="objShowTitle"></vee-json-edit>
    <VeeObjectEdit v-else-if="type==='mObject'" :model="model" :parentPropPath="parentPropPath" :showTitle="objShowTitle"></VeeObjectEdit>
    <VeeArrayEdit v-else-if="type==='mArray'" :model="model" :parentPropPath="parentPropPath" :showTitle="objShowTitle"></VeeArrayEdit>
    <VeeTypeArrayEdit v-else-if="type==='mTypeArray'" :model="model" :parentPropPath="parentPropPath" :showTitle="objShowTitle"></VeeTypeArrayEdit>
    <VeeArrayEdit v-else-if="type==='mRichMap'" :model="model" :parentPropPath="parentPropPath" :showTitle="objShowTitle"></VeeArrayEdit>
    <vee-input v-else v-model="model.value"></vee-input>
  </div>
</template>
<script>

import VeeInput from '../components/VeeInput'
import VeeNumber from '../components/VeeNumber'
import VeeSelect from '../components/VeeSelect'
import VeeSwitch from '../components/VeeSwitch'
import VeeJsonEdit from './VeeJsonEdit'
export default {
  name: 'VeeEditItem',
  components: {
    VeeInput,
    VeeNumber,
    VeeSelect,
    VeeSwitch,
    VeeJsonEdit,
    // 递归组件：https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6
    VeeObjectEdit: () => import('./VeeObjectEdit.vue'),
    VeeArrayEdit: () => import('./VeeArrayEdit.vue'),
    VeeTypeArrayEdit: () => import('./VeeTypeArrayEdit')
  },
  props: {
    model: {
      type: Object,
      default () {
        return {}
      }
    },
    objShowTitle: {
      type: Boolean,
      default: true,
    },
    parentPropPath: {
      type: String,
      default: ''
    }
  },
  computed: {
    type () {
      const { type, eType, value } = this.model
      if (type === 'object') {
        return 'mObject' // m是model的意思
      } else if (type === 'array') {
        return 'mArray'
      } else if (type === 'typeArray') {
        return 'mTypeArray'
      } else if (type === 'richMap') {
        return 'mRichMap'
      } else if (eType) {
        return eType
      } else if (typeof (value) === 'number') {
        return 'number'
      } else if (typeof (value) === 'boolean') {
        return 'boolean'
      } else if (Array.isArray(value)) {
        return 'array'
      } else if (typeof (value) === 'object') {
        return 'object'
      }
      return 'string'
    }
  }
}
</script>
