<template>
	<span v-if="mode === 'text'" class="input_text" v-bind="$attrs">{{$attrs.value}}</span>
	<a-input v-else-if="mode === 'input'" v-bind="$attrs"></a-input>
	<a-textarea v-else-if="mode === 'textarea'" style="width:100%;" v-bind="$attrs"></a-textarea>
	<a-input-number v-else-if="mode === 'number'" v-bind="$attrs"></a-input-number>
	<a-switch v-else-if="mode === 'switch'" v-bind="$attrs"></a-switch>
	<a-radio-group v-else-if="mode === 'radio'" v-bind="$attrs">
		<a-radio v-for="(item,index) in getValues" :key="index" :value="item.value">{{item.label}}</a-radio>
	</a-radio-group>
	<a-checkbox-group v-else-if="mode === 'checkbox'" v-bind="$attrs">
		<a-checkbox v-for="(item,index) in getValues" :key="index" :value="item.value">{{item.label}}</a-checkbox>
	</a-checkbox-group>
	<a-rate v-else-if="mode === 'rate'" v-bind="$attrs" />
	<a-select v-else-if="mode === 'select'" v-bind="$attrs" :mode="$attrs.dmode">
		<a-select-option v-for="(item,index) in getValues" :key="index" v-bind="item">{{item.label}}</a-select-option>
	</a-select>

	<a-date-picker v-else-if="mode === 'date'" v-bind="$attrs" />
	<a-range-picker v-else-if="mode === 'daterange'" v-bind="$attrs" />
	<a-date-picker show-time v-else-if="mode === 'datetime'" v-bind="$attrs" />
	<DIYUPLoad v-bind="$attrs" v-else-if="mode === 'file'" />
	<DIYUPLoad v-bind="$attrs" v-else-if="mode === 'fileurls'" />
	<a-cascader v-else-if="mode === 'cascader'" :options="getValues" v-bind="$attrs" />
	<a-slider v-else-if="mode === 'slider'" v-bind="$attrs" />
</template>
<script setup>
import { computed, onMounted, useAttrs } from "vue";

const props = defineProps({
	mode:String,
	values:{type:Array,default:()=>[]},
});

const getValues = computed(()=>{
	return props.values.map(v=>{
		if(typeof v === 'string'){
			return {label:v,value:v};
		} else if(Array.isArray(v)){
			return {label:v[0],value:v[1]};
		} else {
			return v;
		}
	});
});
</script>