<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-if="props.type === 'json'">
      <el-input v-model="props.value" :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"
        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 option" :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 option" :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, toRaw} from "vue";
import {strToValue, valueToStr} from "@/utils/sys-config";

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

const dataValue = ref<any>();
onMounted(() => {
  dataValue.value = strToValue(props.type, props.value);
});
defineExpose({
  getDataValue(){
    /*
     * 格式化value为数据库可存储的字符串结构之后
     * 返回 name->value
     */
    return [props.name, valueToStr(props.type, toRaw(dataValue.value))];
  }
})
</script>

<style scoped lang="scss">

</style>
