<template>
  <template v-if="item.inputMode !== 'slot'">
    <el-input
      v-if="item.inputMode === 'input'"
      v-bind="attrs"
      v-model="formData[item.key]"
      :placeholder="(item.disabled && showDisabled) ? '' : '请输入'"
      clearable
      :disabled="item.disabled && showDisabled"
      @input="(val: any) => changeFun(item.key, val)"
    />
    <el-input
      v-if="item.inputMode === 'textarea'"
      v-bind="attrs"
      v-model="formData[item.key]"
      type="textarea"
      autosize
      :placeholder="(item.disabled && showDisabled) ? '' : '请输入'"
      :disabled="item.disabled && showDisabled"
      @input="(val: any) => changeFun(item.key, val)"
    />
    <el-input-number
      v-if="item.inputMode === 'inputNumber'"
      v-bind="attrs"
      v-model="formData[item.key]"
      :placeholder="(item.disabled && showDisabled) ? '' : '请输入'"
      :min="0"
      :step="item.step"
      step-strictly
      :disabled="item.disabled && showDisabled"
      @input="(val: any) => changeFun(item.key, val)"
    />
    <el-select
      v-if="item.inputMode === 'select'"
      v-bind="attrs"
      v-model="formData[item.key]"
      :placeholder="(item.disabled && showDisabled) ? '' : '请选择'"
      clearable
      :options="item.options"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    ></el-select>
    <el-radio-group
      v-if="item.inputMode === 'radio'"
      v-bind="attrs"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    >
      <el-radio v-for="(val) in item.options" :key="val.value" :label="val.label" :value="val.value" />
    </el-radio-group>
    <el-checkbox-group
      v-if="item.inputMode === 'checkbox'"
      v-bind="attrs"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    >
      <el-checkbox v-for="(val) in item.options" :key="val.value" :label="val.label" :value="val.value" />
    </el-checkbox-group>
    <MultipleSelect
      v-if="item.inputMode === 'multipleSelect'"
      v-model="formData[item.key]"
      :options="item.options"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <el-date-picker
      v-if="item.inputMode === 'date'"
      v-bind="attrs"
      v-model="formData[item.key]"
      type="datetime"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      :placeholder="(item.disabled && showDisabled) ? '' : '请选择'"
      clearable
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <el-date-picker
      v-if="item.inputMode === 'daterange'"
      v-bind="attrs"
      v-model="formData[item.key]"
      type="datetimerange"
      start-placeholder="开始时间"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      end-placeholder="结束时间"
      clearable
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <el-upload
      v-if="item.inputMode === 'choseFile'"
      v-bind="attrs"
      v-model:file-list="formData[item.key]"
      class="upload-btn"
      :limit="item.limit"
      :multiple="item.limit ? (item.limit > 1) : false"
      :auto-upload="false"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
      @remove="(val: any) => removeFun(item.key, val)"
    >
      <template #trigger><el-button type="primary" :disabled="item.disabled && showDisabled">选择文件</el-button></template>
    </el-upload>
    <UploadImg
      v-if="item.inputMode === 'uploadImg'"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <UserSelect
      v-if="item.inputMode === 'userSelect'"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <ProjectSelect
      v-if="item.inputMode === 'projectSelect'"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <UserSelect
      v-if="item.inputMode === 'userSelectMultiple'"
      v-model="formData[item.key]"
      multiple
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <ProjectSelect
      v-if="item.inputMode === 'projectSelectMultiple'"
      v-model="formData[item.key]"
      multiple
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <ApproveList
      v-if="item.inputMode === 'approveList'"
      v-model="formData[item.key]"
      :disabled="item.disabled && showDisabled"
      @change="(val: any) => changeFun(item.key, val)"
    />
  </template>
  <slot v-else :name="`form-${item.key}`" :row="formData">插槽</slot>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import MultipleSelect from './multipleSelect.vue';
import UploadImg from './uploadImg.vue';
import UserSelect from '@/components/common/userSelect/index.vue';
import ProjectSelect from '@/components/common/projectSelect/index.vue';
import ApproveList from '@/components/common/approveList/index.vue';

interface Props {
  item: any;
  form: any;
  showDisabled?: boolean;
  attrs?: any;
}

const props = withDefaults(defineProps<Props>(), {
  item: {},
  form: {},
  showDisabled: false,
  attrs: {},
});

watch(() => props.form, (val: any) => {
  formData.value = val;
});

const emit = defineEmits(['change', 'remove']);

const formData = ref<any>(props.form);

const changeFun = (key: string, val: any) => {
  emit('change', {
    key,
    val,
    data: formData.value,
  });
};

const removeFun = (key: string, val: any) => {
  emit('remove', {
    key,
    val,
    data: formData.value,
  });
};
</script>

<style lang="scss" scoped>
.upload-btn {
  width: 100%;
}
</style>
