<template>
    <div class="dynamic-component-example">
        <h2>动态组件示例</h2>
        
        <div class="form-group">
            <h3>输入框</h3>
            <DynamicFormItem
                :config="inputConfig"
                v-model="inputValue"
                @change="handleChange"
            />
            <p>当前值: {{ inputValue }}</p>
        </div>

        <div class="form-group">
            <h3>下拉选择</h3>
            <DynamicFormItem
                :config="selectConfig"
                v-model="selectValue"
                @change="handleChange"
            />
            <p>当前值: {{ selectValue }}</p>
        </div>

        <div class="form-group">
            <h3>复选框组</h3>
            <DynamicFormItem
                :config="checkboxConfig"
                v-model="checkboxValue"
                @change="handleChange"
            />
            <p>当前值: {{ checkboxValue }}</p>
        </div>

        <div class="form-group">
            <h3>单选框组</h3>
            <DynamicFormItem
                :config="radioConfig"
                v-model="radioValue"
                @change="handleChange"
            />
            <p>当前值: {{ radioValue }}</p>
        </div>

        <div class="form-group">
            <h3>开关</h3>
            <DynamicFormItem
                :config="switchConfig"
                v-model="switchValue"
                @change="handleChange"
            />
            <p>当前值: {{ switchValue }}</p>
        </div>

        <div class="form-group">
            <h3>文本域</h3>
            <DynamicFormItem
                :config="textareaConfig"
                v-model="textareaValue"
                @change="handleChange"
            />
            <p>当前值: {{ textareaValue }}</p>
        </div>

        <div class="form-group">
            <h3>数字输入框</h3>
            <DynamicFormItem
                :config="numberConfig"
                v-model="numberValue"
                @change="handleChange"
            />
            <p>当前值: {{ numberValue }}</p>
        </div>

        <div class="form-group">
            <h3>日期选择器</h3>
            <DynamicFormItem
                :config="dateConfig"
                v-model="dateValue"
                @change="handleChange"
            />
            <p>当前值: {{ dateValue }}</p>
        </div>

        <div class="form-group">
            <h3>日期时间选择器</h3>
            <DynamicFormItem
                :config="datetimeConfig"
                v-model="datetimeValue"
                @change="handleChange"
            />
            <p>当前值: {{ datetimeValue }}</p>
        </div>

        <div class="form-group">
            <h3>日期范围选择器</h3>
            <DynamicFormItem
                :config="dateRangeConfig"
                v-model="dateRangeValue"
                @change="handleChange"
            />
            <p>当前值: {{ dateRangeValue }}</p>
        </div>

        <div class="form-group">
            <h3>时间选择器</h3>
            <DynamicFormItem
                :config="timeConfig"
                v-model="timeValue"
                @change="handleChange"
            />
            <p>当前值: {{ timeValue }}</p>
        </div>

        <div class="form-group">
            <h3>颜色选择器</h3>
            <DynamicFormItem
                :config="colorConfig"
                v-model="colorValue"
                @change="handleChange"
            />
            <p>当前值: {{ colorValue }}</p>
        </div>

        <div class="form-group">
            <h3>评分组件</h3>
            <DynamicFormItem
                :config="rateConfig"
                v-model="rateValue"
                @change="handleChange"
            />
            <p>当前值: {{ rateValue }}</p>
        </div>

        <div class="form-group">
            <h3>滑块组件</h3>
            <DynamicFormItem
                :config="sliderConfig"
                v-model="sliderValue"
                @change="handleChange"
            />
            <p>当前值: {{ sliderValue }}</p>
        </div>

        <div class="form-group">
            <h3>多选下拉</h3>
            <DynamicFormItem
                :config="multiSelectConfig"
                v-model="multiSelectValue"
                @change="handleChange"
            />
            <p>当前值: {{ multiSelectValue }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DynamicFormItem from './DynamicFormItem.vue'
import type { SysConfigVO } from '@/types/sys/config'

// 表单值
const inputValue = ref('')
const selectValue = ref('')
const checkboxValue = ref(['music', 'sports'])
const radioValue = ref('')
const switchValue = ref(false)
const textareaValue = ref('')
const numberValue = ref(0)
const dateValue = ref('')
const datetimeValue = ref('')
const dateRangeValue = ref(null)
const timeValue = ref('')
const colorValue = ref('#409eff')
const rateValue = ref(0)
const sliderValue = ref(50)
const multiSelectValue = ref([])

// 配置对象
const inputConfig: SysConfigVO = {
    configId: 'input-demo',
    name: '用户名',
    description: '请输入用户名',
    renderType: 'input',
    configType: 'String',
    re: {
        required: true,
        minLength: 3,
        maxLength: 20,
        pattern: '^[a-zA-Z0-9_]+$',
        message: '用户名只能包含字母、数字和下划线'
    }
}

const selectConfig: SysConfigVO = {
    configId: 'select-demo',
    name: '用户角色',
    description: '请选择用户角色',
    renderType: 'select',
    configType: 'String',
    options: [
        { value: 'admin', label: '管理员' },
        { value: 'user', label: '普通用户' },
        { value: 'guest', label: '访客' }
    ],
    re: {
        required: true
    }
}

const checkboxConfig: SysConfigVO = {
    configId: 'checkbox-demo',
    name: '兴趣爱好',
    description: '选择你的兴趣爱好',
    renderType: 'checkbox',
    configType: 'String',
    options: [
        { value: 'reading', label: '阅读' },
        { value: 'music', label: '音乐' },
        { value: 'sports', label: '运动' },
        { value: 'travel', label: '旅行' }
    ]
}

const radioConfig: SysConfigVO = {
    configId: 'radio-demo',
    name: '性别',
    description: '选择你的性别',
    renderType: 'radio',
    configType: 'String',
    options: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' },
        { value: 'other', label: '其他' }
    ],
    re: {
        required: true
    }
}

const switchConfig: SysConfigVO = {
    configId: 'switch-demo',
    name: '邮件通知',
    description: '是否接收邮件通知',
    renderType: 'switch',
    configType: 'Boolean'
}

const textareaConfig: SysConfigVO = {
    configId: 'textarea-demo',
    name: '个人简介',
    description: '请输入个人简介',
    renderType: 'textarea',
    configType: 'String',
    re: {
        maxLength: 500
    }
}

const numberConfig: SysConfigVO = {
    configId: 'number-demo',
    name: '年龄',
    description: '请输入年龄',
    renderType: 'number',
    configType: 'Integer',
    re: {
        required: true,
        min: 18,
        max: 120
    }
}

const dateConfig: SysConfigVO = {
    configId: 'date-demo',
    name: '出生日期',
    description: '选择出生日期',
    renderType: 'date',
    configType: 'String',
    re: {
        required: true
    }
}

const datetimeConfig: SysConfigVO = {
    configId: 'datetime-demo',
    name: '预约时间',
    description: '选择预约时间',
    renderType: 'datetime',
    configType: 'String',
    re: {
        required: true
    }
}

const dateRangeConfig: SysConfigVO = {
    configId: 'daterange-demo',
    name: '活动时间',
    description: '选择活动时间范围',
    renderType: 'dateRange',
    configType: 'String'
}

const timeConfig: SysConfigVO = {
    configId: 'time-demo',
    name: '提醒时间',
    description: '选择提醒时间',
    renderType: 'time',
    configType: 'String'
}

const colorConfig: SysConfigVO = {
    configId: 'color-demo',
    name: '主题颜色',
    description: '选择主题颜色',
    renderType: 'color',
    configType: 'String'
}

const rateConfig: SysConfigVO = {
    configId: 'rate-demo',
    name: '满意度评分',
    description: '请为服务打分',
    renderType: 'rate',
    configType: 'Integer',
    re: {
        max: 5
    }
}

const sliderConfig: SysConfigVO = {
    configId: 'slider-demo',
    name: '完成进度',
    description: '设置完成进度',
    renderType: 'slider',
    configType: 'Integer',
    re: {
        min: 0,
        max: 100,
        step: 10
    }
}

const multiSelectConfig: SysConfigVO = {
    configId: 'multiselect-demo',
    name: '技能标签',
    description: '选择你擅长的技能',
    renderType: 'multiSelect',
    configType: 'String',
    options: [
        { value: 'javascript', label: 'JavaScript' },
        { value: 'typescript', label: 'TypeScript' },
        { value: 'vue', label: 'Vue.js' },
        { value: 'react', label: 'React' },
        { value: 'nodejs', label: 'Node.js' },
        { value: 'python', label: 'Python' }
    ]
}

// 事件处理
const handleChange = (value: any) => {
    console.log('Value changed:', value)
}
</script>

<style lang="scss" scoped>
.dynamic-component-example {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;

    h2 {
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

    .form-group {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: #f9f9f9;

        h3 {
            margin-bottom: 15px;
            color: #555;
        }

        p {
            margin-top: 10px;
            padding: 8px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            color: #666;
        }
    }
}
</style>