<template>
    <div class="pro-field-example">
        <el-card class="example-card">
            <template #header>
                <div class="card-header">
                    <span>ProField 组件示例</span>
                    <el-button-group>
                        <el-button :type="mode === 'read' ? 'primary' : ''" @click="mode = 'read'">只读模式</el-button>
                        <el-button :type="mode === 'edit' ? 'primary' : ''" @click="mode = 'edit'">编辑模式</el-button>
                    </el-button-group>
                </div>
            </template>

            <el-tabs v-model="activeTab" type="border-card">
                <!-- 文本类型 -->
                <el-tab-pane label="文本类型" name="text">
                    <div class="field-section">
                        <h3>基础文本 (text)</h3>
                        <el-form :model="formData" label-width="120px">
                            <el-form-item label="普通文本">
                                <pro-field
                                    v-model:text="formData.text"
                                    value-type="text"
                                    disabled
                                    :mode="mode"
                                    :field-props="{ placeholder: '请输入文本' }"
                                />
                            </el-form-item>
                            <el-form-item label="带前缀后缀">
                                <pro-field
                                    v-model:text="formData.textWithPrefix"
                                    value-type="text"
                                    :mode="mode"
                                    disabled
                                    :field-props="{ prefix: '¥', suffix: '元' }"
                                />
                            </el-form-item>
                            <el-form-item label="带前缀图标">
                                <pro-field
                                    v-model:text="formData.textWithPrefixIcon"
                                    value-type="text"
                                    :mode="mode"
                                    :field-props="{ prefixIcon: Search, placeholder: '请输入搜索内容' }"
                                />
                            </el-form-item>
                            <el-form-item label="带后缀图标">
                                <pro-field
                                    v-model:text="formData.textWithSuffixIcon"
                                    value-type="text"
                                    :mode="mode"
                                    :field-props="{ suffixIcon: Calendar, placeholder: '请选择日期' }"
                                />
                            </el-form-item>
                            <el-form-item label="多行文本 (textarea)">
                                <pro-field
                                    v-model:text="formData.textarea"
                                    value-type="textarea"
                                    :mode="mode"
                                    disabled
                                    :field-props="{ rows: 4, placeholder: '请输入多行文本' }"
                                />
                            </el-form-item>
                            <el-form-item label="密码 (password)">
                                <pro-field
                                    v-model:text="formData.password"
                                    value-type="password"
                                    :mode="mode"
                                    :field-props="{ placeholder: '请输入密码' }"
                                />
                            </el-form-item>
                            <el-form-item label="文本范围 (textRange)">
                                <pro-field
                                    v-model:text="formData.textRange"
                                    value-type="textRange"
                                    :mode="mode"
                                    :field-props="{
                                        placeholder: ['请输入最小值', '请输入最大值'],
                                        rangeFormat: 'array',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="文本范围 (字符串格式)">
                                <pro-field
                                    v-model:text="formData.textRangeString"
                                    value-type="textRange"
                                    :mode="mode"
                                    :field-props="{
                                        placeholder: ['请输入起始值', '请输入结束值'],
                                        rangeFormat: 'string',
                                    }"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>

                <!-- 选择类型 -->
                <el-tab-pane label="选择类型" name="select">
                    <div class="field-section">
                        <h3>下拉选择 (select)</h3>
                        <el-form :model="formData" label-width="120px">
                            <el-form-item label="单选">
                                <pro-field
                                    v-model:text="formData.select"
                                    value-type="select"
                                    :mode="mode"
                                    disabled
                                    :field-props="{
                                        options: selectOptions,
                                        placeholder: '请选择',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="多选">
                                <pro-field
                                    v-model:text="formData.selectMultiple"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        options: selectOptions,
                                        multiple: true,
                                        placeholder: '请选择多个选项',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="可搜索">
                                <pro-field
                                    v-model:text="formData.selectFilterable"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        options: selectOptions,
                                        filterable: true,
                                        placeholder: '可搜索选择',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="胶囊单选">
                                <div style="margin-bottom: 8px; color: #909399; font-size: 12px">
                                    optionType: 'radio'，适用于单选场景
                                </div>
                                <pro-field
                                    v-model:text="formData.selectPillRadio"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        optionType: 'radio',
                                        options: fruitOptions,
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="胶囊多选">
                                <div style="margin-bottom: 8px; color: #909399; font-size: 12px">
                                    optionType: 'checkbox'，需配合 multiple: true
                                </div>
                                <pro-field
                                    v-model:text="formData.selectPillCheckbox"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        optionType: 'checkbox',
                                        multiple: true,
                                        options: fruitOptions,
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="使用 valueEnum">
                                <pro-field
                                    v-model:text="formData.selectWithEnum"
                                    value-type="select"
                                    :mode="mode"
                                    :value-enum="statusEnum"
                                    :field-props="{
                                        options: statusOptions,
                                        placeholder: '请选择状态',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="远程搜索 (default)">
                                <div style="margin-bottom: 8px; color: #909399; font-size: 12px">
                                    不显示搜索图标后缀，支持分页
                                </div>
                                <pro-field
                                    v-model:text="formData.selectRemote"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        options: remoteOptions,
                                        multiple: true,
                                        filterable: true,
                                        remote: true,
                                        reserveKeyword: true,
                                        placeholder: '请输入关键字',
                                        remoteMethod: handleRemoteMethod,
                                        loading: remoteLoading,
                                        pagination: {
                                            pageSize: 10,
                                        },
                                        query: remoteQuery,
                                        total: remoteTotal,
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="远程搜索 (无分页)">
                                <div style="margin-bottom: 8px; color: #909399; font-size: 12px">
                                    不显示搜索图标后缀，不支持分页（兼容老的代码）
                                </div>
                                <pro-field
                                    v-model:text="formData.selectRemoteNoPagination"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        options: remoteOptionsNoPagination,
                                        multiple: true,
                                        filterable: true,
                                        remote: true,
                                        reserveKeyword: true,
                                        placeholder: '请输入关键字',
                                        remoteMethod: handleRemoteMethodNoPagination,
                                        loading: remoteLoadingNoPagination,
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="远程搜索 (remote-show-suffix)">
                                <div style="margin-bottom: 8px; color: #909399; font-size: 12px">
                                    显示搜索图标后缀（输入时在输入框右侧显示搜索图标）
                                </div>
                                <pro-field
                                    v-model:text="formData.selectRemoteSuffix"
                                    value-type="select"
                                    :mode="mode"
                                    :field-props="{
                                        options: remoteOptionsSuffix,
                                        multiple: true,
                                        filterable: true,
                                        remote: true,
                                        reserveKeyword: true,
                                        remoteShowSuffix: true,
                                        placeholder: '请输入关键字',
                                        remoteMethod: handleRemoteMethodSuffix,
                                        loading: remoteLoadingSuffix,
                                    }"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>

                <!-- 日期类型 -->
                <el-tab-pane label="日期类型" name="date">
                    <div class="field-section">
                        <h3>日期选择 (date)</h3>
                        <el-form :model="formData" label-width="120px">
                            <el-form-item label="日期">
                                <pro-field
                                    v-model:text="formData.date"
                                    value-type="date"
                                    :mode="mode"
                                    disabled
                                    :field-props="{
                                        format: 'YYYY-MM-DD',
                                        valueFormat: 'YYYY-MM-DD',
                                        placeholder: '请选择日期',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="日期时间">
                                <pro-field
                                    v-model:text="formData.dateTime"
                                    value-type="dateTime"
                                    :mode="mode"
                                    :field-props="{
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                        placeholder: '请选择日期时间',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="日期范围">
                                <pro-field
                                    v-model:text="formData.dateRange"
                                    value-type="dateRange"
                                    :mode="mode"
                                    :field-props="{
                                        format: 'YYYY-MM-DD',
                                        valueFormat: 'YYYY-MM-DD',
                                        placeholder: '请选择日期范围',
                                    }"
                                />
                            </el-form-item>
                            <el-form-item label="时间">
                                <pro-field
                                    v-model:text="formData.time"
                                    value-type="time"
                                    :mode="mode"
                                    :field-props="{
                                        format: 'HH:mm:ss',
                                        valueFormat: 'HH:mm:ss',
                                        placeholder: '请选择时间',
                                    }"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <!-- 数据展示 -->
            <el-card class="data-card data-card--values">
                <template #header>
                    <span>当前表单数据</span>
                </template>
                <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
            </el-card>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElCard, ElButton, ElButtonGroup, ElTabs, ElTabPane, ElForm, ElFormItem } from '@deppon/deppon-ui';
import { Search, Calendar } from '@deppon/deppon-ui/icons-vue';
import { ProField } from '@deppon/deppon-template';

const mode = ref('edit');
const activeTab = ref('text');

// 表单数据
const formData = ref({
    text: '示例文本',
    textWithPrefix: '100',
    textWithPrefixIcon: '',
    textWithSuffixIcon: '',
    textarea: '这是多行文本示例\n第二行',
    password: 'password123',
    textRange: ['10', '100'],
    textRangeString: '50 - 200',
    select: 'option1',
    selectMultiple: ['option1', 'option2'],
    selectFilterable: 'option2',
    selectPillRadio: 'apple',
    selectPillCheckbox: ['apple', 'banana', 'orange'],
    selectWithEnum: 'active',
    selectRemote: [],
    selectRemoteNoPagination: [],
    selectRemoteSuffix: [],
    date: '2024-01-01',
    dateTime: '2024-01-01 12:00:00',
    dateRange: ['2024-01-01', '2024-01-31'],
    time: '12:00:00',
});

// 选择选项
const selectOptions = [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' },
    { label: '选项3', value: 'option3' },
    { label: '选项4', value: 'option4' },
];

// 胶囊样式示例选项
const fruitOptions = [
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '橘子', value: 'orange' },
];

// 状态枚举
const statusEnum = {
    active: { text: '激活', status: 'success' },
    inactive: { text: '未激活', status: 'info' },
    pending: { text: '待审核', status: 'warning' },
};

// 状态选项
const statusOptions = [
    { label: '激活', value: 'active' },
    { label: '未激活', value: 'inactive' },
    { label: '待审核', value: 'pending' },
];

// 远程搜索相关数据
const remoteList = ref([]);
const remoteOptions = ref([]);
const remoteLoading = ref(false);
const remoteQuery = ref('');
const remoteTotal = ref(0);
const remoteOptionsNoPagination = ref([]);
const remoteLoadingNoPagination = ref(false);
const remoteOptionsSuffix = ref([]);
const remoteLoadingSuffix = ref(false);

// 模拟数据（美国州名）
const states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
];

// 初始化远程搜索数据
onMounted(() => {
    remoteList.value = states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
    });
});

// 远程搜索方法（default）- 支持分页
const handleRemoteMethod = (query, page = 1, pageSize = 10) => {
    remoteQuery.value = query || '';
    if (query) {
        remoteLoading.value = true;
        setTimeout(() => {
            remoteLoading.value = false;
            // 过滤数据
            const filtered = remoteList.value.filter(item => {
                return item.label.toLowerCase().includes(query.toLowerCase());
            });
            // 设置总数
            remoteTotal.value = filtered.length;
            // 分页处理
            const start = (page - 1) * pageSize;
            const end = start + pageSize;
            remoteOptions.value = filtered.slice(start, end);
        }, 200);
    } else {
        remoteOptions.value = [];
        remoteTotal.value = 0;
    }
};

// 远程搜索方法（无分页）- 兼容老的代码，只接受一个参数
const handleRemoteMethodNoPagination = query => {
    console.log('handleRemoteMethodNoPagination', query);
    if (query) {
        remoteLoadingNoPagination.value = true;
        setTimeout(() => {
            remoteLoadingNoPagination.value = false;
            remoteOptionsNoPagination.value = remoteList.value.filter(item => {
                return item.label.toLowerCase().includes(query.toLowerCase());
            });
        }, 200);
    } else {
        remoteOptionsNoPagination.value = [];
    }
};

// 远程搜索方法（remote-show-suffix）
const handleRemoteMethodSuffix = query => {
    if (query) {
        remoteLoadingSuffix.value = true;
        setTimeout(() => {
            remoteLoadingSuffix.value = false;
            remoteOptionsSuffix.value = remoteList.value.filter(item => {
                return item.label.toLowerCase().includes(query.toLowerCase());
            });
        }, 200);
    } else {
        remoteOptionsSuffix.value = [];
    }
};
</script>

<style scoped lang="less">
.pro-field-example {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    .example-card {
        margin: 0 auto;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .field-section {
        padding: 20px 0;

        h3 {
            margin: 0 0 20px 0;
            color: var(--el-text-color-primary, #303133);
            font-size: 16px;
            font-weight: 600;
        }
    }

    .data-card {
        &--values {
            margin-top: 20px;
        }

        pre {
            margin: 0;
            padding: 16px;
            background: var(--el-fill-color-light, #f5f7fa);
            color: var(--el-text-color-primary, #303133);
            border-radius: 4px;
            font-size: 12px;
            line-height: 1.6;
            overflow-x: auto;
        }
    }
}
</style>
