<template>
  <div>
    <!-- 文本 -->
    <CInput
      v-if="formItems.type === 'input'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 文本域 -->
    <CTextarea
      v-if="formItems.type==='textarea'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 计数器 -->
    <CInputNumber
      v-if="formItems.type==='inputNumber'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 计数器2 -->
    <CInputNumber2
      v-if="formItems.type==='inputNumber2'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 选择 （单选 多选） -->
    <CSelect
      v-if="formItems.type==='select'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 选择（单选 多选） 调接口 -->
    <CSelectApi
      v-if="formItems.type==='selectApi'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 选择树（单选 多选）  -->
    <CSelectTree
      v-if="formItems.type==='selectTree'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 选择树（单选 多选）调接口  未完成 -->
    <CSelectTreeApi
      v-if="formItems.type==='selectTreeApi'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 金额（数字输入） -->
    <CInputFinance
      v-if="formItems.type==='inputFinance'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- input数字 年月日 -->
    <CInputDate
      v-if="formItems.type==='inputDate'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 日期选择器 -->
    <CPickerDate
      v-if="formItems.type==='pickerDate'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 时间选择器 -->
    <CPickerTime
      v-if="formItems.type==='pickerTime'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 时间选择器 -->
    <CPickerTimeHHMM
      v-if="formItems.type==='pickerTimeHHMM'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 日期 时间 选择器 -->
    <CpickerDateTime
      v-if="formItems.type==='pickerDateTime'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 单选 -->
    <CRadio
      v-if="formItems.type==='radio'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 多选 -->
    <CCheckbox
      v-if="formItems.type==='checkbox'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 开关 -->
    <CSwitch
      v-if="formItems.type==='switch'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 级联选择 -->
    <CCascader
      v-if="formItems.type==='cascader'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 穿梭 -->
    <CTransfer
      v-if="formItems.type==='transfer'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 日期选择器拆分单个日期 -->
    <CPickerDateSingle
      v-if="formItems.type==='pickerDateSingle'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />

    <!-- 上传-->
  </div>
</template>
<script>
import CInput from './components/input';
import CTextarea from './components/textarea';
import CSelect from './components/select';
import CSelectApi from './components/selectApi';
import CSelectTree from './components/selectTree';
import CSelectTreeApi from './components/selectTreeApi';
import CInputNumber from './components/inputNumber';
import CInputFinance from './components/inputFinance';
import CInputDate from './components/inputDate';
import CPickerDate from './components/pickerDate';
import CPickerTime from './components/pickerTime';
import CPickerTimeHHMM from './components/pickerTimeHHMM';
import CpickerDateTime from './components/pickerDateTime';
import CRadio from './components/radio';
import CCheckbox from './components/checkbox';
import CSwitch from './components/switch';
import CCascader from './components/cascader';
import CTransfer from './components/transfer';
import CInputNumber2 from './components/inputNumber2';
import CPickerDateSingle from './components/pickerDateSingle';
export default {
  name: 'FormItem',
  components: {
    CInput,
    CTextarea,
    CSelect,
    CSelectApi,
    CSelectTree,
    CSelectTreeApi,
    CInputNumber,
    CInputFinance,
    CInputDate,
    CPickerDate,
    CPickerTime,
    CPickerTimeHHMM,
    CPickerDateSingle,
    CpickerDateTime,
    CRadio,
    CCheckbox,
    CSwitch,
    CCascader,
    CTransfer,
    CInputNumber2,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    handleInput(val) {
      this.$emit('input', val);
    },
    outOperation(val, num) {
      this.$emit('outOperation', val, num);
    },
  },
};
</script>

