<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"
    />
    <!-- 自定义列展示 -->
    <CSelectLabel
      v-if="formItems.type==='selectLabel'"
      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"
    />
    <!-- 周选择器 -->
    <CPickerWeek
      v-if="formItems.type==='pickerWeek'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 月选择器 -->
    <CPickerMonth
      v-if="formItems.type==='pickerMonth'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 年选择器 -->
    <CPickerYear
      v-if="formItems.type==='pickerYear'"
      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"
    />
    <!-- 时间范围选择器 -->
    <CPickerTimeRange
      v-if="formItems.type==='pickerTimeRange'"
      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"
    />
    <!-- 日期时间范围选择器 -->
    <CPickerDateTimeRange
      v-if="formItems.type==='pickerDateTimeRange'"
      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"
    />
    <!-- 选择-选择 -->
    <CSelectSelect
      v-if="formItems.type==='selectSelect'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 文本输入-选择 -->
    <CInputSelect
      v-if="formItems.type==='inputSelect'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 下拉懒加载 -->
    <CSelectLazyLoading
      v-if="formItems.type==='selectLazyLoading'"
      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"
    />
    <CSelectTable
      v-if="formItems.type==='selectTable'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 上传-->
    <!-- 穿梭框 -->
    <CSelectTransfer
      v-if="formItems.type==='selectTransfer'"
      v-model="formData[formItems.prop]"
      :form-items="formItems"
      @outOperation="outOperation"
    />
    <!-- 树结构 -->
    <CSelectTreeTable
      v-if="formItems.type==='selectTreeTable'"
      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 CSelectLabel from '../selectLabel';
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 CPickerTimeRange from '../pickerTimeRange';
import CPickerDateTime from '../pickerDateTime';
import CPickerDateTimeRange from '../pickerDateTimeRange';
import CPickerWeek from '../pickerWeek';
import CPickerMonth from '../pickerMonth';
import CPickerYear from '../pickerYear';
import CRadio from '../radio';
import CCheckbox from '../checkbox';
import CSwitch from '../switch';
import CCascader from '../cascader';
import CTransfer from '../transfer';
import CSelectSelect from '../select-select';
import CInputNumber2 from '../inputNumber2';
import CInputSelect from '../input-select';
import CSelectLazyLoading from '../selectLazyLoading';
import CPickerDateSingle from '../pickerDateSingle';
import CSelectTable from '../selectTable/index';
import CSelectTransfer from '../selectTransfer/index';
import CSelectTreeTable from '../selectTreeTable/index';
export default {
  name: 'FormItem',
  components: {
    CInput,
    CTextarea,
    CSelect,
    CSelectApi,
    CSelectTree,
    CSelectTreeApi,
    CInputNumber,
    CInputFinance,
    CInputDate,
    CPickerDate,
    CPickerTime,
    CPickerTimeRange,
    CPickerDateTime,
    CPickerDateTimeRange,
    CRadio,
    CCheckbox,
    CSwitch,
    CCascader,
    CTransfer,
    CSelectSelect,
    CInputNumber2,
    CInputSelect,
    CSelectLazyLoading,
    CPickerDateSingle,
    CSelectLabel,
    CPickerYear,
    CPickerWeek,
    CPickerMonth,
    CSelectTable,
    CSelectTransfer,
    CSelectTreeTable,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // formItems: {},
      // formData: {},
    };
  },
  watch: {
    // formItems(newval) {
    //   this.formItems = newval;
    // },
    // formData(newval) {
    //   this.formData = newval;
    // },
  },
  methods: {
    handleInput(val) {
      this.$emit('input', val);
    },
    outOperation(val, num) {
      this.$emit('outOperation', val, num);
    },
  },
};
</script>

