<template>
  <el-form-item :label="label" :prop="field" :rules="rules" :required="required" v-if="showField">
    <el-input v-if="type ==='textarea'" type="textarea" :rows="formData[attrs?.rows] || 5" :placeholder="placeholder" :maxlength="formData[attrs?.maxlength] || 200" v-model="formData[field]" show-word-limit v-bind="attrs"/>
    <el-input v-else-if="type ==='input'" :placeholder="placeholder" v-model="formData[field]" show-word-limit maxlength="200" v-bind="attrs" />
    <el-select
      v-else-if="type ==='select'"
      v-model="formData[field]"
      :placeholder="placeholder"
      style="width: 100%"
      v-bind="attrs"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-date-picker
      v-else-if="type ==='datePicker'"
      v-model="formData[field]"
      type="date"
      :placeholder="placeholder"
      style="width: 100%"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
      v-bind="attrs"
    />
    <el-date-picker
      v-else-if="type ==='datetimePicker'"
      v-model="formData[field]"
      type="datetime"
      :placeholder="placeholder"
      style="width: 100%"
      format="YYYY/MM/DD hh:mm:ss"
      value-format="YYYY-MM-DD hh:mm:ss"
      v-bind="attrs"
    />
  </el-form-item>
</template>
<script setup lang="ts">
import { isFunction } from 'lodash-es'
import { computed } from 'vue'

interface Props {
  field: string;
  label: string;
  type: 'input' | 'textarea' | 'select' | 'datePicker' | 'datetimePicker' | 'timeSelect';
  placeholder?: string;
  required?: boolean
  rules?: any
  options?: any
  formData: any
  attrs: any
  show: Function
}
const props = withDefaults(defineProps<Props>(), {
  attrs: {}
})

const emit = defineEmits([])

const showField = computed(() => {
  if (props.show && isFunction(props.show)) {
    return props.show(props.formData['写作场景'])
  }
  return true;
})
</script>

<style scoped lang="scss">

</style>
