<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"
    />

    <!-- 单选 -->
    <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"
    />
    <!-- 上传-->
  </div>
</template>
<script>
import CInput from '../input';
import CTextarea from '../textarea';
import CSelect from '../select';
import CSelectApi from '../selectApi';
import CSelectTree from '../selectTree';
import CSelectTreeApi from '../selectTreeApi';
import CInputNumber from '../inputNumber';
import CInputFinance from '../finance';
import CInputDate from '../inputDate';
import CPickerDate from '../pickerDate';
import CPickerTime from '../pickerTime';
import CRadio from '../radio';
import CCheckbox from '../checkbox';
import CSwitch from '../switch';
import CCascader from '../cascader';
import CTransfer from '../transfer';
import CInputNumber2 from '../inputNumber2';
export default {
  name: 'FormItem',
  components: {
    CInput,
    CTextarea,
    CSelect,
    CSelectApi,
    CSelectTree,
    CSelectTreeApi,
    CInputNumber,
    CInputFinance,
    CInputDate,
    CPickerDate,
    CPickerTime,
    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>

