<template>
  <el-form-item :label="props.title" :prop="props.name">
    <template v-if="props.type === 'text'">
      <el-input v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
    </template>
    <template v-else-if="props.type === 'textarea'">
      <el-input type="textarea"
                v-model="dataValue"
                :placeholder="'请输入' + props.title"
                v-bind="itemBind"
      />
    </template>
    <template v-else-if="props.type === 'password'">
      <el-input
        show-password
        type="password"
        v-model="dataValue"
        :placeholder="'请输入' + props.title"
        v-bind="itemBind"
      />
    </template>
    <template v-else-if="props.type === 'switch'">
      <el-switch
        size="small"
        :model-value="dataValue"
        @update:modelValue="(val) => updatedataValue(val)"
        v-bind="itemBind"
      />
    </template>
    <template v-else-if="props.type === 'number'">
      <el-input-number v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
    </template>
    <template v-else-if="props.type === 'checkbox'">
      <el-checkbox-group v-model="dataValue" v-bind="itemBind">
        <el-checkbox v-for="item in (dataOptions || [])" :label="item.label" :value="item.value"  />
      </el-checkbox-group>
    </template>
    <template v-else-if="props.type === 'radio'">
      <el-radio-group v-model="dataValue" v-bind="itemBind">
        <el-radio v-for="item in (dataOptions || [])" :label="item.label" :value="item.value"  />
      </el-radio-group>
    </template>
    <template v-else-if="props.type === 'date'">
      <el-date-picker v-model="dataValue" type="date" :placeholder="'请选择' + props.title" v-bind="itemBind"/>
    </template>
    <template v-else-if="props.type === 'datetime'">
      <el-date-picker v-model="dataValue" type="datetime" :placeholder="'请选择' + props.title" v-bind="itemBind"/>
    </template>
    <template v-else-if="props.type === 'time'">
      <el-time-picker v-model="dataValue"  :placeholder="'请选择' + props.title" v-bind="itemBind" />
    </template>
    <template v-else-if="props.type === 'date_range'">
      <el-date-picker
        v-model="dataValue"
        type="daterange"
        v-bind="itemBind"
      />
    </template>
    <template v-else-if="props.type === 'datetime_range'">
      <el-date-picker
        v-model="dataValue"
        type="datetimerange"
        v-bind="itemBind"
      />
    </template>
    <template v-else-if="props.type === 'time_range'">
      <el-time-picker
        v-model="dataValue"
        is-range
        v-bind="itemBind"
      />
    </template>
  </el-form-item>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";
import {strToBind, strToOption, strToValue} from "@/utils/sys-config";

const props = defineProps<{
  name: string;
  title: string;
  type: string;
  value: string;
  options: string;
  itemBind: any
}>();

const dataValue = ref<any>();
const dataOptions = ref<any>()
onMounted(() => {
  dataValue.value = strToValue(props.type, props.value);
  dataOptions.value = strToOption(props.type, props.options);
  // console.log("渲染完成", props, dataValue.value, dataOptions.value);
});
const updatedataValue = (val) => {
  console.log("更新val", val);
}
</script>

<style scoped lang="scss">

</style>
