<template>
  <template v-if="item.inputMode !== 'slot'">
    <el-input
      v-if="item.inputMode === 'input'"
      v-bind="attrs"
      v-model="formData[item.searchKey || item.key]"
      :placeholder="item.disabled && showDisabled ? '' : '请输入'"
      clearable
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      :maxlength="item.maxlength"
      show-word-limit
      @keyup.enter="enterFun"
      @input="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <el-input
      v-if="item.inputMode === 'textarea'"
      v-bind="attrs"
      v-model="formData[item.searchKey || item.key]"
      type="textarea"
      autosize
      :placeholder="item.disabled && showDisabled ? '' : '请输入'"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      :maxlength="item.maxlength"
      show-word-limit
      @keyup.enter="enterFun"
      @input="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <el-input-number
      v-if="item.inputMode === 'inputNumber'"
      v-bind="attrs"
      v-model="formData[item.searchKey || item.key]"
      :placeholder="item.disabled && showDisabled ? '' : '请输入'"
      :min="0"
      step-strictly
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @input="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <el-select
      v-if="item.inputMode === 'select'"
      v-bind="attrs"
      v-model="formData[item.searchKey || item.key]"
      :placeholder="item.disabled && showDisabled ? '' : '请选择'"
      clearable
      :options="item.options"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="
        () =>
          changeFun(
            item.key,
            item.options.find((i: any) => i.value === formData[item.key])
          )
      "
      @clear="clearFun"
    ></el-select>
    <el-radio-group
      v-if="item.inputMode === 'radio'"
      v-bind="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.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.searchKey || item.key]"
      :disabled="attrs.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'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :options="item.options"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <el-date-picker
      v-if="item.inputMode === 'date'"
      v-bind="attrs"
      v-model="formData[item.searchKey || 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="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <el-date-picker
      v-if="item.inputMode === 'daterange'"
      v-bind="attrs"
      v-model="formData[item.searchKey || 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="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <ChoseFile
      v-if="item.inputMode === 'choseFile'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @remove="(val: any) => removeFun(item.key, val)"
    />
    <UploadImg
      v-if="item.inputMode === 'uploadImg'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
    />
    <UserSelect
      v-if="item.inputMode === 'userSelect'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <ProjectSelect
      v-if="['projectSelect', 'projectIdSelect'].includes(item.inputMode)"
      :showCodeList="item.inputMode === 'projectSelect' ? false : true"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <UserSelect
      v-if="item.inputMode === 'userSelectMultiple'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      multiple
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <ProjectSelect
      v-if="['projectSelectMultiple', 'projectIdSelectMultiple'].includes(item.inputMode)"
      :showCodeList="item.inputMode === 'projectSelectMultiple' ? false : true"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      multiple
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <ApproveList
      v-if="item.inputMode === 'approveList'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
    <FileName
      v-if="item.inputMode === 'fileName'"
      :attrs="attrs"
      v-model="formData[item.searchKey || item.key]"
      :disabled="attrs.disabled || (item.disabled && showDisabled)"
      @change="(val: any) => changeFun(item.key, val)"
      @clear="clearFun"
    />
  </template>
  <slot
    v-if="item.inputMode === 'slot' && $slots[`form-${item.key}`]"
    :name="`form-${item.key}`"
    :row="formData"
    :attrs="attrs"
    >表单插槽</slot
  >
  <slot
    v-if="item.inputMode === 'slot' && $slots[`search-${item.key}`]"
    :name="`search-${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 ChoseFile from './choseFile.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';
import FileName from './fileName.vue';

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

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

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

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

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

const enterFun = () => {
  emit('enter');
};

const clearFun = () => {
  emit('clear');
};

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

watch(
  () => props.form,
  (val: any) => {
    formData.value = val;
    if (props.item.inputMode === 'select') {
      if (typeof formData.value[props.item.key] === 'number') {
        formData.value[props.item.key] = String(formData.value[props.item.key]);
      }
    }
  },
  { immediate: true }
);
</script>
