<template>
    <div class="pro-form-example">
        <el-card class="example-card">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 基础表单 -->
                <el-tab-pane label="基础表单" name="basic">
                    <div class="form-section">
                        <h3>基础表单示例</h3>
                        <pro-form
                            ref="basicFormRef"
                            :columns="basicColumns"
                            :initial-values="basicInitialValues"
                            :rules="basicRules"
                            :label-width="'120px'"
                            :cols="4"
                            @submit="handleBasicSubmit"
                            @values-change="handleBasicValuesChange"
                        >
                            <template #actions="{ form }">
                                <div class="form-actions">
                                    <el-button type="primary" @click="form.submit()">提交</el-button>
                                    <el-button @click="form.reset()">重置</el-button>
                                    <el-button @click="handleGetValues(form)">获取值</el-button>
                                    <el-button @click="handleResetField(form, 'name', '异地调货业务')"
                                        >重置异地调货业务</el-button
                                    >
                                    <el-button @click="handleResetField(form, 'age', '是否异地调货')"
                                        >重置是否异地调货</el-button
                                    >
                                    <el-button @click="handleResetField(form, 'phone', '充值赠送编码')"
                                        >重置充值赠送编码</el-button
                                    >
                                    <el-button
                                        @click="
                                            handleResetFields(
                                                form,
                                                ['name', 'age', 'email'],
                                                ['异地调货业务', '是否异地调货', '是否C2C客户'],
                                            )
                                        "
                                        >重置多个字段</el-button
                                    >
                                </div>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- 复杂表单 -->
                <el-tab-pane label="复杂表单" name="complex">
                    <div class="form-section">
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 20px;
                            "
                        >
                            <h3 style="margin: 0">复杂表单示例（包含多种字段类型）</h3>
                            <el-button-group>
                                <el-button
                                    :type="!isComplexReadonly ? 'primary' : 'default'"
                                    @click="isComplexReadonly = false"
                                >
                                    编辑模式
                                </el-button>
                                <el-button
                                    :type="isComplexReadonly ? 'primary' : 'default'"
                                    @click="isComplexReadonly = true"
                                >
                                    只读模式
                                </el-button>
                                <el-button
                                    :type="!isComplexReadonly && isComplexEditStyleAsReadonly ? 'primary' : 'default'"
                                    @click="
                                        isComplexReadonly = false;
                                        isComplexEditStyleAsReadonly = !isComplexEditStyleAsReadonly;
                                    "
                                >
                                    编辑-只读布局
                                </el-button>
                            </el-button-group>
                        </div>
                        <pro-form
                            ref="complexFormRef"
                            :columns="complexModeColumns"
                            :initial-values="complexInitialValues"
                            :rules="complexModeRules"
                            :label-width="'120px'"
                            :cols="4"
                            :enable-readonly-overflow-tooltip="true"
                            :edit-style-as-readonly="!isComplexReadonly && isComplexEditStyleAsReadonly"
                            @submit="handleComplexSubmit"
                        >
                            <!-- 自定义 Cascader 节点前缀 -->
                            <template #cascaderNodePrefix="{ data }">
                                <span v-if="data._isSelectAll" style="color: #409eff; margin-right: 4px">⭐</span>
                            </template>
                            <template #actions="{ form }">
                                <div class="form-actions">
                                    <el-button type="primary" @click="form.submit()">提交</el-button>
                                    <el-button @click="form.reset()">重置</el-button>
                                </div>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- 只读表单 -->
                <el-tab-pane label="只读表单" name="readonly">
                    <div class="form-section">
                        <h3>只读表单示例</h3>
                        <pro-form
                            :columns="readonlyColumns"
                            :initial-values="readonlyInitialValues"
                            :label-width="'120px'"
                            :cols="4"
                            :enable-readonly-overflow-tooltip="true"
                        />
                    </div>
                </el-tab-pane>

                <!-- 收起/展开表单 -->
                <el-tab-pane label="收起/展开表单" name="collapsible">
                    <div class="form-section">
                        <h3>收起/展开表单示例</h3>
                        <pro-form
                            ref="collapsibleFormRef"
                            :columns="collapsibleColumns"
                            :initial-values="collapsibleInitialValues"
                            :rules="collapsibleRules"
                            :label-width="'120px'"
                            :cols="4"
                            :collapsible="true"
                            :default-collapsed="true"
                            @submit="handleCollapsibleSubmit"
                        >
                            <template #actions="{ form }">
                                <el-button type="primary" @click="form.submit()">查询</el-button>
                                <el-button @click="form.reset()">重置</el-button>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- 加载状态表单 -->
                <el-tab-pane label="加载状态" name="loading">
                    <div class="form-section">
                        <h3>加载状态示例（骨架屏）</h3>
                        <div style="margin-bottom: 16px">
                            <el-button @click="toggleLoading">切换加载状态</el-button>
                            <span style="margin-left: 12px; color: #909399">
                                当前状态：{{ loading ? '加载中' : '已加载' }}
                            </span>
                        </div>
                        <pro-form
                            :columns="basicColumns"
                            :initial-values="basicInitialValues"
                            :label-width="'120px'"
                            :cols="4"
                            :loading="loading"
                        />
                    </div>
                </el-tab-pane>

                <!-- 响应式 fieldProps 示例 -->
                <el-tab-pane label="响应式 fieldProps" name="reactive">
                    <div class="form-section">
                        <h3>响应式 fieldProps 示例（支持 computed 和函数）</h3>
                        <div style="margin-bottom: 16px">
                            <el-button @click="updatePaginationData">更新分页数据</el-button>
                            <span style="margin-left: 12px; color: #909399">
                                查询参数：{{ query.value }} | 总数：{{ total.value }} | 加载中：{{
                                    paginationLoading.value
                                }}
                            </span>
                        </div>
                        <pro-form
                            ref="reactiveFormRef"
                            :columns="reactiveColumns"
                            :initial-values="reactiveInitialValues"
                            :label-width="'120px'"
                            :cols="4"
                            @submit="handleReactiveSubmit"
                        >
                            <template #actions="{ form }">
                                <div class="form-actions">
                                    <el-button type="primary" @click="form.submit()">查询</el-button>
                                    <el-button @click="form.reset()">重置</el-button>
                                </div>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- Disabled 字段 Placeholder 自动替换示例 -->
                <el-tab-pane label="Disabled Placeholder" name="disabledPlaceholder">
                    <div class="form-section">
                        <h3>Disabled 字段 Placeholder 自动替换示例</h3>
                        <div style="margin-bottom: 16px; padding: 12px; background-color: #f5f7fa; border-radius: 4px">
                            <p style="margin: 0 0 8px 0; color: #606266; font-size: 14px">
                                <strong>说明：</strong>
                            </p>
                            <ul
                                style="margin: 0; padding-left: 20px; color: #606266; font-size: 14px; line-height: 1.8"
                            >
                                <li>
                                    当字段设置为
                                    <code style="background: #fff; padding: 2px 4px; border-radius: 2px"
                                        >disabled: true</code
                                    >
                                    时，placeholder 会自动替换
                                </li>
                                <li>
                                    选择类字段（select、area、date 等）：placeholder 替换为
                                    <code style="background: #fff; padding: 2px 4px; border-radius: 2px"
                                        >"不可选择"</code
                                    >
                                </li>
                                <li>
                                    输入类字段（text、textarea 等）：placeholder 替换为
                                    <code style="background: #fff; padding: 2px 4px; border-radius: 2px"
                                        >"不可输入"</code
                                    >
                                </li>
                                <li>
                                    如果 placeholder 包含
                                    <code style="background: #fff; padding: 2px 4px; border-radius: 2px"
                                        >"自动带入"</code
                                    >
                                    关键字，则不会被替换
                                </li>
                            </ul>
                        </div>
                        <pro-form
                            ref="disabledPlaceholderFormRef"
                            :columns="disabledPlaceholderColumns"
                            :initial-values="disabledPlaceholderInitialValues"
                            :label-width="'120px'"
                            :cols="3"
                            @submit="handleDisabledPlaceholderSubmit"
                        >
                            <template #actions="{ form }">
                                <div class="form-actions">
                                    <el-button type="primary" @click="form.submit()">提交</el-button>
                                    <el-button @click="form.reset()">重置</el-button>
                                </div>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- 胶囊单选/多选示例 -->
                <el-tab-pane label="胶囊选择" name="pillSelect">
                    <div class="form-section">
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 20px;
                            "
                        >
                            <h3 style="margin: 0">胶囊单选 / 多选示例</h3>
                            <el-button-group>
                                <el-button
                                    :type="!isPillReadonly ? 'primary' : 'default'"
                                    @click="isPillReadonly = false"
                                >
                                    编辑模式
                                </el-button>
                                <el-button
                                    :type="isPillReadonly ? 'primary' : 'default'"
                                    @click="isPillReadonly = true"
                                >
                                    只读模式
                                </el-button>
                            </el-button-group>
                        </div>
                        <div style="margin-bottom: 16px; color: #909399; font-size: 12px; line-height: 1.6">
                            <div>胶囊单选：fieldProps.optionType = 'radio'，适用于单选场景</div>
                            <div>胶囊多选：fieldProps.optionType = 'checkbox'，需配合 multiple: true</div>
                        </div>
                        <pro-form
                            ref="pillFormRef"
                            :columns="pillModeColumns"
                            :initial-values="pillInitialValues"
                            :rules="pillModeRules"
                            :label-width="'120px'"
                            :cols="1"
                            :enable-readonly-overflow-tooltip="true"
                            @submit="handlePillSubmit"
                            @values-change="handlePillValuesChange"
                        >
                            <template #actions="{ form }">
                                <div class="form-actions">
                                    <el-button type="primary" @click="form.submit()">提交</el-button>
                                    <el-button @click="form.reset()">重置</el-button>
                                </div>
                            </template>
                        </pro-form>
                    </div>
                </el-tab-pane>

                <!-- 基础组件溢出 Tooltip 示例 -->
                <el-tab-pane label="基础组件 Tooltip" name="baseTooltip">
                    <div class="form-section">
                        <h3>基础组件溢出 Tooltip 示例</h3>
                        <div style="display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 420px">
                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">Input（禁用）</div>
                                <el-input
                                    v-model="demoInputValue"
                                    disabled
                                    show-overflow-tooltip
                                    placeholder="不可输入"
                                />
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">Input（可编辑）</div>
                                <el-input v-model="demoInputValue" show-overflow-tooltip placeholder="可编辑" />
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">Select（禁用）</div>
                                <el-select
                                    v-model="demoSelectValue"
                                    disabled
                                    show-overflow-tooltip
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="opt in demoSelectOptions"
                                        :key="opt.value"
                                        :label="opt.label"
                                        :value="opt.value"
                                    />
                                </el-select>
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">Select（可编辑）</div>
                                <el-select
                                    v-model="demoSelectValue"
                                    show-overflow-tooltip
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="opt in demoSelectOptions"
                                        :key="opt.value"
                                        :label="opt.label"
                                        :value="opt.value"
                                    />
                                </el-select>
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">Cascader（禁用）</div>
                                <el-cascader
                                    v-model="demoCascaderValue"
                                    :options="demoCascaderOptions"
                                    disabled
                                    show-overflow-tooltip
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">
                                    Cascader（可编辑）
                                </div>
                                <el-cascader
                                    v-model="demoCascaderValue"
                                    :options="demoCascaderOptions"
                                    show-overflow-tooltip
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">
                                    DatePicker（禁用）
                                </div>
                                <el-date-picker
                                    v-model="demoDateValue"
                                    type="datetime"
                                    disabled
                                    show-overflow-tooltip
                                    format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </div>

                            <div>
                                <div style="margin-bottom: 6px; color: #606266; font-size: 12px">
                                    DatePicker（可编辑）
                                </div>
                                <el-date-picker
                                    v-model="demoDateValue"
                                    type="datetime"
                                    show-overflow-tooltip
                                    format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </div>
                        </div>

                        <div style="margin-top: 10px; color: #909399; font-size: 12px">
                            容器宽度较窄时出现省略号，hover 才会弹出 tooltip（禁用/非禁用保持一致）。
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>

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

<script setup>
import { ref, computed, h } from 'vue';
import {
    ElCard,
    ElButton,
    ElButtonGroup,
    ElTabs,
    ElTabPane,
    ElMessage,
    ElIcon,
    ElInput,
    ElSelect,
    ElOption,
    ElCascader,
    ElDatePicker,
} from '@deppon/deppon-ui';
import { Search } from '@deppon/deppon-ui/icons-vue';
import { ProForm } from '@deppon/deppon-template';
import areaData from '@/assets/json/area/area.json';

const mode = ref('edit');
const activeTab = ref('basic');
const loading = ref(false);
const isComplexReadonly = ref(false);
const isComplexEditStyleAsReadonly = ref(false);
const isPillReadonly = ref(false);

const basicFormRef = ref(null);
const complexFormRef = ref(null);
const collapsibleFormRef = ref(null);
const reactiveFormRef = ref(null);
const disabledPlaceholderFormRef = ref(null);
const pillFormRef = ref(null);

// 基础组件 tooltip 示例数据
const demoInputValue = ref(
    '快递装卸费方式+业务方式+比例or固定值；零担快递装卸费方式+业务方式+比例or固定值；快递装卸费方式+业务方式+比例or固定值',
);
const demoSelectOptions = ref([
    { label: '短选项', value: 'short' },
    { label: '快递装卸费方式+业务方式+比例or固定值（超长选项用于测试省略与tooltip）', value: 'long' },
]);
const demoSelectValue = ref('long');
const demoCascaderOptions = ref([
    {
        label: '一级-超长节点名称用于测试省略与tooltip',
        value: 'L1',
        children: [
            {
                label: '二级-超长节点名称用于测试省略与tooltip',
                value: 'L2',
                children: [{ label: '三级-超长节点名称用于测试省略与tooltip', value: 'L3' }],
            },
        ],
    },
]);
const demoCascaderValue = ref(['L1', 'L2', 'L3']);
const demoDateValue = ref('2026-03-30 19:33:23');

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

const pillColumns = [
    {
        name: 'pillRadio',
        label: '胶囊单选',
        valueType: 'select',
        required: true,
        fieldProps: {
            optionType: 'radio',
            options: fruitOptions,
        },
    },
    {
        name: 'pillCheckbox',
        label: '胶囊多选',
        valueType: 'select',
        required: true,
        fieldProps: {
            optionType: 'checkbox',
            multiple: true,
            options: fruitOptions,
        },
    },
];

const pillModeColumns = computed(() => {
    if (isPillReadonly.value) {
        return pillColumns.map(column => ({
            ...column,
            mode: 'read',
        }));
    }
    return pillColumns;
});

const pillModeRules = computed(() => (isPillReadonly.value ? undefined : pillRules));

const pillInitialValues = {
    pillRadio: 'apple',
    pillCheckbox: ['apple', 'banana', 'orange'],
};

const pillRules = {
    pillRadio: [{ required: true, message: '请选择水果', trigger: 'change' }],
    pillCheckbox: [{ required: true, message: '请至少选择一种水果', trigger: 'change', type: 'array' }],
};

// 响应式 fieldProps 示例：分页相关数据
const query = ref('');
const total = ref(0);
const paginationLoading = ref(false);

// 部门选择器相关数据（带分页功能）
const departmentOptions = ref([]);
const departmentQuery = ref('');
const departmentTotal = ref(0);
const departmentLoading = ref(false);

// 远程搜索部门（模拟 API 调用）
const handleDepartmentRemoteMethod = async (queryStr, page = 1, pageSize = 10) => {
    departmentQuery.value = queryStr || '';
    const start = (page - 1) * pageSize;
    departmentLoading.value = true;

    // 模拟 API 延迟
    await new Promise(resolve => setTimeout(resolve, 500));

    if (queryStr) {
        // 模拟数据：生成长短不一的部门名称
        const prefixes = ['', '华东', '华南', '华北', '西南', '西北', '东北', '华中'];
        const suffixes = ['', '分公司', '营业部', '配送中心', '仓储中心', '物流中心', '转运中心', '分拨中心'];
        const locations = ['', '上海', '北京', '广州', '深圳', '杭州', '成都', '武汉', '西安', '南京', '重庆', '天津'];
        const types = ['', '运营', '销售', '客服', '财务', '人事', '技术', '市场', '采购', '质量', '安全'];

        // 生成长短不一的模拟数据
        const mockData = Array.from({ length: 50 }, (_, i) => {
            // 随机组合不同长度的名称
            const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
            const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
            const location = locations[Math.floor(Math.random() * locations.length)];
            const type = types[Math.floor(Math.random() * types.length)];

            // 随机生成不同长度的部门名称
            let label = '';
            const pattern = Math.floor(Math.random() * 6);

            switch (pattern) {
                case 0:
                    // 短名称：如 "华东营业部"
                    label = `${prefix}${suffix}` || `部门${i + 1}`;
                    break;
                case 1:
                    // 中等名称：如 "上海运营中心"
                    label = `${location}${type}${suffix}` || `${prefix}${location}${suffix}`;
                    break;
                case 2:
                    // 较长名称：如 "华东上海运营配送中心"
                    label = `${prefix}${location}${type}${suffix}` || `${location}${type}配送中心`;
                    break;
                case 3:
                    // 超长名称：如 "华东地区上海分公司运营配送中心"
                    label =
                        `${prefix}地区${location}分公司${type}${suffix}` || `${prefix}${location}${type}运营${suffix}`;
                    break;
                case 4:
                    // 带查询关键字的长名称
                    label = `${prefix}${location}${queryStr}${type}${suffix}` || `${queryStr}${location}${type}中心`;
                    break;
                default:
                    // 混合模式
                    const parts = [prefix, location, queryStr, type, suffix].filter(Boolean);
                    label = parts.join('') || `部门${i + 1}-${queryStr}`;
            }

            // 确保名称不为空
            if (!label) {
                label = `部门${i + 1}-${queryStr}`;
            }

            return {
                value: `DEPT${String(i + 1).padStart(3, '0')}-${queryStr}`,
                label: label,
                orgCode: `DEPT${String(i + 1).padStart(3, '0')}`,
                orgName: label,
            };
        });

        // 分页处理
        const startIndex = (page - 1) * pageSize;
        const endIndex = startIndex + pageSize;
        const fetched = mockData.slice(startIndex, endIndex);

        if (page === 1) {
            departmentOptions.value = fetched;
        } else {
            // 追加数据（滚动加载）
            departmentOptions.value = [...departmentOptions.value, ...fetched];
        }

        departmentTotal.value = mockData.length;
    } else {
        departmentOptions.value = [];
        departmentTotal.value = 0;
    }

    departmentLoading.value = false;
};

// 切换加载状态
const toggleLoading = () => {
    loading.value = !loading.value;
};

// 转换省市区数据格式
// 将原始 JSON 数据转换为 Cascader 组件需要的格式 {value, label, children}
const convertAreaData = data => {
    if (!data || !Array.isArray(data)) {
        return [];
    }

    // 过滤掉"全国"项（pid为"0"或id为"1"的顶级项），只保留省份级别（level为1）
    const provinces = data.filter(item => {
        return item.level === 1 && item.pid !== '0' && item.id !== '1';
    });

    // 递归转换函数：将原始数据项转换为 Cascader 格式
    const convertItem = item => {
        const result = {
            // 优先使用 ad_code（行政区划代码），如果没有则使用 id
            value: item.ad_code || item.id,
            // 优先使用 name，如果没有则使用 ad_name
            label: item.name || item.ad_name,
        };

        // 如果有children，递归转换
        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
            // 过滤掉"全部"项（name为"全部"或letter为"all"的项）
            const validChildren = item.children.filter(child => child.name !== '全部' && child.letter !== 'all');
            if (validChildren.length > 0) {
                // 递归转换所有有效的子项
                result.children = validChildren.map(convertItem);
            }
        }

        return result;
    };

    // 转换所有省份数据
    return provinces.map(convertItem);
};

// 省市区数据示例（使用真实数据）
const areaOptions = convertAreaData(areaData.LocalList);

// 增值产品类型级联选择数据
const inrcProductTypeOptions = ref([
    {
        label: '通电验机',
        value: 'TDYJF',
    },
    {
        label: '代收货款',
        value: 'HK',
        children: [
            {
                label: '三日退',
                value: '代收货款-三日退',
                subType: 'R3',
                subName: '三日退',
            },
            {
                label: '即日退',
                value: '代收货款-即日退',
                subType: 'R1',
                subName: '即日退',
            },
            {
                label: '固定退',
                value: '代收货款-固定退',
                subType: 'RF',
                subName: '固定退',
            },
        ],
    },
    {
        label: '中转费',
        value: 'ZZ',
        children: [
            {
                label: '签收前中转折扣',
                value: '中转费-签收前中转折扣',
                subType: 'BEFORE_SIGN',
                subName: '签收前中转折扣',
            },
            {
                label: '签收后中转折扣',
                value: '中转费-签收后中转折扣',
                subType: 'AFTER_SIGN',
                subName: '签收后中转折扣',
            },
            {
                label: '返回收入部门所在城市单票固定值',
                value: '中转费-返回收入部门所在城市单票固定值',
                subType: 'INCOME_CITY',
                subName: '返回收入部门所在城市单票固定值',
            },
            {
                label: '破损返货折扣',
                value: '中转费-破损返货折扣',
                subType: 'DAMAGE_RETURN',
                subName: '破损返货折扣',
            },
            {
                label: '零担返货折扣',
                value: '中转费-零担返货折扣',
                subType: 'LTL_RETURN',
                subName: '零担返货折扣',
            },
        ],
    },
    {
        label: '超长货',
        value: 'YXH',
        children: [
            {
                label: '超长货(2-3.1m]',
                value: '超长货-超长货(2-3.1m]',
                subType: '7',
                subName: '超长货(2-3.1m]',
            },
            {
                label: '床垫1.5米内网派送',
                value: '超长货-床垫1.5米内网派送',
                subType: '1.5',
                subName: '床垫1.5米内网派送',
            },
            {
                label: '超长货(1.6-2m]',
                value: '超长货-超长货(1.6-2m]',
                subType: '6',
                subName: '超长货(1.6-2m]',
            },
            {
                label: '床垫1.8米内网派送',
                value: '超长货-床垫1.8米内网派送',
                subType: '1.8',
                subName: '床垫1.8米内网派送',
            },
        ],
    },
    {
        label: '送货上楼',
        value: 'SHSL',
        children: [
            {
                label: '有电梯',
                value: '送货上楼-有电梯',
                subType: 'HaveElevator',
                subName: '有电梯',
            },
            {
                label: '无电梯',
                value: '送货上楼-无电梯',
                subType: 'NoElevator',
                subName: '无电梯',
            },
        ],
    },
    {
        label: '外发操作费',
        value: 'CYCZF',
    },
    {
        label: '拍照签收',
        value: 'PZQS',
    },
    {
        label: '空运专车费',
        value: 'AIRSTF',
    },
    {
        label: '保价',
        value: 'BF',
        children: [
            {
                label: '易碎保',
                value: '保价-易碎保',
                subType: 'YSB',
                subName: '易碎保',
            },
            {
                label: '基础保',
                value: '保价-基础保',
                subType: 'JCB',
                subName: '基础保',
            },
            {
                label: '全额保',
                value: '保价-全额保',
                subType: 'QEB',
                subName: '全额保',
            },
            {
                label: '票票保',
                value: '保价-票票保',
                subType: 'PPB',
                subName: '票票保',
            },
        ],
    },
    {
        label: '协商再投',
        value: 'XSZT',
    },
    {
        label: '验证揽收',
        value: 'QJM',
    },
    {
        label: '超重货服务',
        value: 'CZHF',
    },
    {
        label: '拆包装服务',
        value: 'CBF',
        children: [
            {
                label: '拆非木包装',
                value: '拆包装服务-拆非木包装',
                subType: 'unpackNonWoodenPackage',
                subName: '拆非木包装',
            },
            {
                label: '拆木包装',
                value: '拆包装服务-拆木包装',
                subType: 'unpackWoodenPackage',
                subName: '拆木包装',
            },
        ],
    },
    {
        label: '签收单',
        value: 'QS',
        children: [
            {
                label: '原件返回',
                value: '签收单-原件返回',
                subType: 'ORIGINAL',
                subName: '原件返回',
            },
            {
                label: '电子返回',
                value: '签收单-电子返回',
                subType: 'FAX',
                subName: '电子返回',
            },
            {
                label: '电子云签',
                value: '签收单-电子云签',
                subType: 'ONLINE',
                subName: '电子云签',
            },
        ],
    },
    {
        label: '清点码货',
        value: 'QDMH',
    },
    {
        label: '派送加收费',
        value: 'PSJS',
    },
    {
        label: '包装服务',
        value: 'BZ',
        children: [
            {
                label: '非标准木托',
                value: '包装服务-非标准木托',
                subType: 'NONSTANDARD_SALVER',
                subName: '非标准木托',
            },
            {
                label: '标准木托',
                value: '包装服务-标准木托',
                subType: 'SALVER',
                subName: '标准木托',
            },
            {
                label: '木架',
                value: '包装服务-木架',
                subType: 'FRAME',
                subName: '木架',
            },
            {
                label: '木箱',
                value: '包装服务-木箱',
                subType: 'BOX',
                subName: '木箱',
            },
        ],
    },
    {
        label: '进仓取件',
        value: 'JCQJ',
    },
    {
        label: '揽收拍照',
        value: 'LSPZ',
    },
    {
        label: '贵重包装返还',
        value: 'RP',
    },
    {
        label: '拍照签收-国补',
        value: 'PZQSGB',
    },
    {
        label: '双人派送',
        value: 'SRPS',
    },
    {
        label: '贴码服务',
        value: 'TMFWF',
    },
    {
        label: '口令签收',
        value: 'PS',
    },
    {
        label: '打包服务',
        value: 'DBFWF',
        children: [
            {
                label: '标准打包',
                value: '打包服务-标准打包',
                subType: 'stdPacking',
                subName: '标准打包',
            },
        ],
    },
    {
        label: '送货进仓',
        value: 'SHJC',
        children: [
            {
                label: '按工序收费',
                value: '送货进仓-按工序收费',
                subType: 'processBilling',
                subName: '按工序收费',
                children: [
                    {
                        label: '开箱点数',
                        value: 'WP_04',
                        subType: 'WP_04',
                        subName: '开箱点数',
                        disabled: true,
                    },
                    {
                        label: '清货',
                        value: 'WP_03',
                        subType: 'WP_03',
                        subName: '清货',
                        disabled: true,
                    },
                    {
                        label: '上架',
                        value: 'WP_02',
                        subType: 'WP_02',
                        subName: '上架',
                        disabled: true,
                    },
                    {
                        label: '预约排队',
                        value: 'WP_01',
                        subType: 'WP_01',
                        subName: '预约排队',
                        disabled: true,
                    },
                ],
            },
            {
                label: '按票收费',
                value: '送货进仓-按票收费',
                subType: 'wholeOrderBilling',
                subName: '按票收费',
            },
        ],
    },
    {
        label: '委托寄件',
        value: 'WTSJF',
    },
    {
        label: '保管费',
        value: 'SF',
    },
    {
        label: '夜间揽收',
        value: 'YJLSF',
    },
    {
        label: '零担超远派送费',
        value: 'CYPSF',
    },
    {
        label: '省心保',
        value: 'SXB',
    },
    {
        label: '床垫操作费',
        value: 'XZZCDCZF',
    },
]);

// 业务类型级联选择数据
const businessTypeOptions = [
    {
        label: '送货进仓',
        value: 'SHJC',
        children: [
            {
                label: '按工序收费',
                value: '送货进仓-按工序收费',
                subType: 'processBilling',
                subName: '按工序收费',
                allowParentSelect: true, // 特殊处理：允许选择父级选项
                children: [
                    {
                        label: '开箱点数',
                        value: 'WP_04',
                        subType: 'WP_04',
                        subName: '开箱点数',
                        disabled: true,
                    },
                    {
                        label: '清货',
                        value: 'WP_03',
                        subType: 'WP_03',
                        subName: '清货',
                    },
                    {
                        label: '上架',
                        value: 'WP_02',
                        subType: 'WP_02',
                        subName: '上架',
                    },
                    {
                        label: '预约排队',
                        value: 'WP_01',
                        subType: 'WP_01',
                        subName: '预约排队',
                    },
                ],
            },
            {
                label: '按票收费',
                value: '送货进仓-按票收费',
                subType: 'wholeOrderBilling',
                subName: '按票收费',
            },
        ],
    },
];

// 基础表单配置
const basicColumns = computed(() => [
    {
        name: 'name',
        label: '客户试发/长假优惠指定梯度',
        warningTooltip: '系统自动清理规则：每月2号00:00:00自动将是清空',
        valueType: 'text',
        disabled: true,
        required: true,
        // 不设置 colSpan，使用 cols 计算值
        fieldProps: {
            placeholder: '请输入姓名',
        },
    },
    {
        name: 'npriceVersion',
        label: '价格版本',
        valueType: 'date',
        fieldProps: {
            showOverflowTooltip: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'x', // 输出时间戳（毫秒）
            placeholder: '请选择',
        },
    },
    {
        name: 'age',
        label: '是否异地调货',
        valueType: 'text',
        hideInForm: true,
        required: true,
        // 不设置 colSpan，使用 cols 计算值
        fieldProps: {
            placeholder: '请输入年龄',
        },
    },
    {
        name: 'email',
        label: '是否C2C客户',
        valueType: 'text',
        required: true,
        // 不设置 colSpan，使用 cols 计算值
        fieldProps: {
            placeholder: '请输入邮箱',
            disabled: true,
        },
    },
    {
        name: 'phone',
        label: '充值赠送编码',
        valueType: 'text',
        // 不设置 colSpan，使用 cols 计算值
        fieldProps: {
            showOverflowTooltip: false,
            placeholder: '请输入手机号',
        },
    },
    {
        name: 'status',
        label: '状态（禁用）',
        valueType: 'select',
        disabled: true,
        fieldProps: {
            options: [
                { label: '启用', value: 'enabled' },
                { label: '禁用', value: 'disabled' },
                { label: '待审核', value: 'pending' },
            ],
            placeholder: '请选择状态',
        },
    },
    {
        name: 'autoPlaceholder',
        label: '自动带入（禁用）',
        valueType: 'select',
        disabled: true,
        fieldProps: {
            options: [
                { label: '选项1', value: 'option1' },
                { label: '选项2', value: 'option2' },
                { label: '选项3', value: 'option3' },
            ],
            placeholder: '自动带入',
        },
    },

    {
        name: 'customerCode',
        label: '客户编码',
        valueType: 'text',
        fieldProps: {
            placeholder: '请输入客户编码',
        },
        warningTooltip: '此字段为必填项，请谨慎填写',
        required: true,
        // 使用 slots.append 配置搜索按钮
        slots: {
            append: ({ item, value }) => {
                return h(
                    ElButton,
                    {
                        icon: h(ElIcon, null, { default: () => h(Search) }),
                        style: {
                            backgroundColor: '#409eff',
                            borderColor: '#409eff',
                            color: '#fff',
                            borderTopLeftRadius: '0',
                            borderBottomLeftRadius: '0',
                        },
                        onClick: () => {
                            ElMessage.info(`搜索客户编码: ${value || '空值'}`);
                            console.log('当前客户编码值:', value);
                        },
                    },
                    { default: () => '' },
                );
            },
        },
    },
    {
        name: 'dateRangeDisabled',
        label: '日期范围（禁用）',
        valueType: 'dateRange',
        fieldProps: {
            showOverflowTooltip: true,
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            placeholder: '请选择日期范围',
        },
    },
    {
        name: 'address',
        label: '地址',
        valueType: 'textarea',
        colSpan: 24, // 地址字段占满整行
        fieldProps: {
            rows: 3,
            placeholder: '请输入地址',
        },
    },
    {
        name: 'handlingFee',
        label: '装卸费',
        valueType: 'text',
        warningTooltip: '示例:快递装卸费方式+业务方式+比例or固定值）；零担快递装卸费方式+业务方式+比例or固定值',
        colSpan: 6, // 地址字段占满整行
        fieldProps: {
            showOverflowTooltip: true,
            placeholder: '请输入',
        },
    },
    {
        name: 'remark',
        label: '备注',
        valueType: 'text',
        colSpan: 24,
        fieldProps: {
            placeholder: '请输入备注信息',
        },
    },
]);

const basicInitialValues = {
    name: '张三',
    age: '25',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    customerCode: '',
    status: 'enabled', // 状态字段初始值
    autoPlaceholder: undefined, // 不设置值，让 placeholder 自动带入显示
    dateRangeDisabled: ['2024-01-01', '2024-01-31'],
    address: '北京市朝阳区',
    handlingFee: '快递装卸费方式+业务方式+比例or固定值',
    remark: '',
    npriceVersion: Date.now(), // 价格版本初始化为当前时间（时间戳，毫秒）
};

const basicRules = {
    name: [{ required: true, message: '请输入异地调货业务请输入异地调货业务', trigger: 'change' }],
    age: [{ required: true, message: '请输入是否异地调货', trigger: 'change' }],
    email: [
        { required: true, message: '请输入是否C2C客户', trigger: 'change' },
        { type: 'email', message: '请输入正确的格式', trigger: 'change' },
    ],
};

// 复杂表单配置
const complexColumns = computed(() => [
    {
        name: 'name',
        label: '姓名',
        valueType: 'text',
        required: true,
        fieldProps: {
            prefix: '姓名',
            placeholder: '请输入姓名',
        },
        warningTooltip: '此字段为必填项，请谨慎填写',
    },
    {
        name: 'gender',
        label: '性别',
        valueType: 'select',
        fieldProps: {
            options: [
                { label: '男', value: 'male' },
                { label: '女', value: 'female' },
            ],
            placeholder: '请选择性别',
        },
        warningTooltip: '请选择正确的性别信息',
    },
    {
        name: 'weight',
        label: '重量',
        valueType: 'select',
        fieldProps: {
            options: [
                { label: '1', value: '1' },
                { label: '5', value: '5' },
                { label: '10', value: '10' },
                { label: '20', value: '20' },
                { label: '50', value: '50' },
            ],
            placeholder: '请选择重量',
            suffix: 'KG', // 选择器后缀示例
        },
    },
    {
        name: 'birthday',
        label: '生日',
        valueType: 'date',
        fieldProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'x',
            placeholder: '请选择生日',
        },
        warningTooltip: '请选择准确的出生日期\n注意：日期格式为 YYYY-MM-DD',
    },
    {
        name: 'birthdayRange',
        label: '生日范围',
        valueType: 'dateRange', // 日期范围类型，会在搜索表单中显示为日期范围选择器
        fieldProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'x', // 输出时间戳（毫秒）
            rangeSeparator: '-',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
        },
        // isReadonlyEditable: true,
        warningTooltip: '日期范围不能超过一年',
    },

    {
        name: 'status',
        label: '状态',
        valueType: 'select',
        valueEnum: {
            active: { text: '激活', status: 'success' },
            inactive: { text: '未激活', status: 'info' },
            pending: { text: '待审核', status: 'warning' },
        },
        fieldProps: {
            options: [
                { label: '激活', value: 'active' },
                { label: '未激活', value: 'inactive' },
                { label: '待审核', value: 'pending' },
            ],
            placeholder: '请选择状态',
        },
    },
    {
        name: 'amount',
        label: '金额',
        valueType: 'text',
        fieldProps: {
            prefix: '¥',
            suffix: '元',
            placeholder: '请输入金额',
        },
    },
    {
        name: 'priceRange',
        label: '价格范围',
        valueType: 'textRange',
        fieldProps: {
            prefix: ['', ''], // 第一个输入框使用 ¥，第二个输入框使用 $
            suffix: ['', ''], // 第一个输入框使用 %，第二个输入框使用 元
            placeholder: ['请输入最低价', '请输入最高价'],
            rangeFormat: 'array',
        },
        warningTooltip: '请输入有效的价格范围，最高价应大于最低价',
    },
    {
        name: 'area',
        label: '省市区（单选）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            level: 3, // 三级：省市区
            placeholder: '请选择省市区',
            filterable: true,
        },
    },
    {
        name: 'areaSelect',
        label: '地区选择',
        valueType: 'areaSelect',
        fieldProps: {
            areaOptions: areaOptions,
            level: 2,
            placeholder: '请选择省市区',
        },
    },
    {
        name: 'areaSelectMultiple',
        label: '地区选择（多选）',
        valueType: 'areaSelect',
        fieldProps: {
            areaOptions: areaOptions,
            level: 3,
            multiple: true,
            placeholder: '请选择省市区',
            maxCollapseTags: 3,
        },
    },
    {
        name: 'businessType',
        label: '业务类型（级联选择）',
        valueType: 'area',
        fieldProps: {
            areaOptions: businessTypeOptions,
            level: 3, // 三级级联
            placeholder: '请选择业务类型',
            filterable: true,
            cascaderProps: {
                value: 'value',
                label: 'label',
                children: 'children',
                emitPath: true, // 返回完整路径
                checkStrictly: true, // 允许选择任意级别的选项（父级和子级都可以选）
            },
        },
    },
    {
        name: 'areas',
        label: '省市区（多选）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            multiple: true,
            level: 3, // 三级：省市区
            placeholder: '请选择省市区',
            maxCollapseTags: 3, // 最大折叠标签数，超过此数量的标签会被折叠
            // 自定义头部按钮（支持全选功能）
            headerButton: {
                showSelectAll: true, // 显示全选按钮
                showClear: true, // 显示清空按钮
                type: 'primary', // 全选按钮类型
                clearType: 'default', // 清空按钮类型
                size: 'small', // 按钮大小
                selectAllText: '全选', // 全选按钮文字
                clearText: '清空', // 清空按钮文字
            },
            // 自定义 Cascader 配置
            cascaderProps: {
                value: 'value',
                label: 'label',
                children: 'children',
                // checkStrictly: true, // 只能选择最后一级
                emitPath: true, // 返回完整路径
            },
        },
    },
    {
        name: 'province',
        label: '省份（限制到省）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            level: 1, // 三级：省市区
            defaultSelectLevel: 1, //默认选中到第几级
            actionStrictly: false,
            multiple: true,
            maxCollapseTags: 5, // 最大折叠标签数示例
            cascaderProps: {
                value: 'value',
                label: 'label',
                children: 'children',
                emitPath: true, // 返回完整路径
            },
        },
    },
    {
        name: 'provinceExpand',
        label: '省份（level:1 但返回完整省市路径）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            level: 2, // 二级：到市
            multiple: true,
            filterable: true,
            levelAll: 'all',
            cascaderProps: {
                value: 'label',
                label: 'label',
                children: 'children',
                emitPath: true, // 返回完整路径
            },
        },
    },
    {
        name: 'city',
        label: '城市（限制到市）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            level: 2, // 二级：到市
            multiple: true,
            cascaderProps: {
                value: 'label',
                label: 'label',
                children: 'children',
                emitPath: true, // 返回完整路径
            },
        },
    },
    {
        name: 'areaWithPrefix',
        label: '省市区（自定义节点前缀）',
        valueType: 'area',
        fieldProps: {
            areaOptions: areaOptions,
            multiple: true,
            level: 3,
            actionStrictly: false, // 不联动，显示全选
            placeholder: '请选择省市区',
        },
    },
    {
        name: 'accuratePrice',
        label: '精准计价',
        valueType: 'text',
        warningTooltip: '对应付款方式开单的运单，运费保留2位小数',
        fieldProps: {
            disabled: true,
            placeholder: '自动带出',
        },
    },
    {
        name: 'configuredProductNames',
        label: '产地品名',
        valueType: 'tagInput',
        colSpan: 24,
        slots: {
            append: ({ addItem, disabled }) => {
                return h(
                    ElButton,
                    {
                        style: {
                            backgroundColor: '#409eff',
                            borderColor: '#409eff',
                            color: '#fff',
                            borderTopLeftRadius: '0',
                            borderBottomLeftRadius: '0',
                        },
                        disabled,
                        onClick: addItem,
                    },
                    { default: () => '添加' },
                );
            },
        },
        fieldProps: {
            // disabled: true,
            listLabel: '已配品名',
            placeholder: '请输入',
            tip: '最多添加20个(可按回车添加)，单个最多20个字，且拼接后总长度不超过150个字符',
            emptyPlaceholder: '暂无',
            readonlyJoinChar: '、',
            maxCount: 20,
            // 可选：添加时请求接口，再更新列表。返回数组则用该数组更新，不返回则默认追加当前输入
            // onAdd: async (name, currentList) => {
            //     const res = await apiAddProductName(name);
            //     return [...currentList, res.data?.name ?? name];
            // },
            // 可选：删除时请求接口，再更新列表。返回数组则用该数组更新，不返回则默认从当前列表移除该项
            // onRemove: async (index, name, currentList) => {
            //     await apiRemoveProductName(name);
            //     const next = [...currentList];
            //     next.splice(index, 1);
            //     return next;
            // },
        },
    },
    {
        name: 'description',
        label: '描述',
        valueType: 'textarea',
        colSpan: 24,
        fieldProps: {
            rows: 4,
            placeholder: '请输入描述',
        },
        warningTooltip: '描述信息请控制在500字以内',
    },
]);

// 根据模式动态生成复杂表单的 columns
const complexModeColumns = computed(() => {
    if (isComplexReadonly.value) {
        return complexColumns.value.map(col => ({
            ...col,
            mode: 'read',
        }));
    }
    return complexColumns.value;
});

// 根据模式动态生成复杂表单的 rules
// 只读模式下，只保留设置了 isReadonlyEditable: true 的字段的校验规则
const complexModeRules = computed(() => {
    if (isComplexReadonly.value) {
        // 找出所有设置了 isReadonlyEditable: true 的字段
        const editableInReadonlyFields = complexColumns.value
            .filter(col => col.isReadonlyEditable)
            .map(col => col.name);

        // 只返回这些字段的校验规则
        const filteredRules = {};
        editableInReadonlyFields.forEach(fieldName => {
            if (complexRules[fieldName]) {
                filteredRules[fieldName] = complexRules[fieldName];
            }
        });
        return Object.keys(filteredRules).length > 0 ? filteredRules : undefined;
    }
    return complexRules;
});

const complexInitialValues = {
    name: '李四',
    gender: '',
    birthday: '1990-01-01',
    status: 'active',
    amount: '1000',
    weight: '10', // 重量初始值
    priceRange: ['100', '500'],
    area: ['110000', '110100', '110105'], // 北京市-市辖区-朝阳区
    inrcProductType: [], // 增值产品类型初始值
    areas: [
        ['110000', '110100', '110105'], // 北京市-市辖区-朝阳区
        ['310000', '310100', '310101'], // 上海市-市辖区-黄浦区
    ],
    province: [], // 北京市
    provinceExpand: ['110000'], // 北京市（level:1，但会返回所有市的完整路径）
    city: ['110000', '110100'], // 北京市-市辖区
    areaWithPrefix: [
        ['110000', '110100', '110105'], // 北京市-市辖区-朝阳区
    ],
    businessType: ['SHJC', '送货进仓-按工序收费', 'WP_04'], // 业务类型：送货进仓 -> 按工序收费 -> 开箱点数
    // configuredProductNames: ['苹果', '橙子', '荔枝'], // 产地品名 + 已配品名 类型示例
    description: '这是一个描述',
    birthdayRange: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()], // 生日范围：30天前到现在（时间戳数组）
};

const complexRules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    birthday: [{ required: true, message: '请选择生日', trigger: 'change' }],
    birthdayRange: [{ required: true, message: '请选择生日范围', trigger: 'change' }],
    configuredProductNames: [{ required: true, message: '请输入品名', trigger: 'blur' }],
    priceRange: [
        { required: true, message: '请输入价格范围', trigger: 'change' },
        {
            validator: (rule, value, callback) => {
                // value 是数组 [start, end]
                const valueArray = Array.isArray(value) ? value : [];
                const startValue = valueArray[0];
                const endValue = valueArray[1];

                // 校验第一个值不能为空
                if (!startValue || startValue === '') {
                    callback(new Error('请输入最低价'));
                    return;
                }

                // 校验第二个值不能为空
                if (!endValue || endValue === '') {
                    callback(new Error('请输入最高价'));
                    return;
                }

                const startNum = Number(startValue);
                const endNum = Number(endValue);

                // 校验是否为有效数字
                if (isNaN(startNum)) {
                    callback(new Error('最低价必须是数字'));
                    return;
                }
                if (isNaN(endNum)) {
                    callback(new Error('最高价必须是数字'));
                    return;
                }

                // 校验最低价必须小于最高价
                if (startNum >= endNum) {
                    callback(new Error('最低价必须小于最高价'));
                    return;
                }

                // 校验差值必须小于10
                const diff = endNum - startNum;
                if (diff >= 10) {
                    callback(new Error('最高价和最低价的差值必须小于10'));
                    return;
                }

                callback();
            },
            trigger: 'change',
        },
    ],
};

// 只读表单配置
const readonlyColumns = computed(() =>
    complexColumns.value.map(col => ({
        ...col,
        mode: 'read',
    })),
);

const readonlyInitialValues = {
    name: '王五',
    gender: '',
    birthday: '1995-05-15',
    status: 'pending',
    amount: '2000',
    area: ['320000', '320100', '320102'], // 江苏省-南京市-玄武区
    areas: [
        ['320000', '320100', '320102'], // 江苏省-南京市-玄武区
        ['330000', '330100', '330102'], // 浙江省-杭州市-上城区
    ],
    province: ['330000'], // 浙江省
    provinceExpand: ['330000'], // 浙江省（level:1，但会返回所有市的完整路径）
    city: ['330000', '330100'], // 浙江省-杭州市
    accuratePrice: '现金，月结，到付，预存卡，移动支付，网上支付，微信支付分，银行卡', // 精准计价：多个付款方式，用于演示只读模式下的多行文字问题
    configuredProductNames: ['苹果', '橙子', '荔枝', '樱桃'], // 产地品名只读示例：显示为「苹果、橙子、荔枝、樱桃」
    description: '这是只读模式的描述信息',
};

// 收起/展开表单配置
const collapsibleColumns = computed(() => [
    {
        name: 'ruleName',
        label: '规则名称',
        valueType: 'text',
        showWhenCollapsed: true, // 收起时显示
        fieldProps: {
            placeholder: '请输入',
        },
    },
    {
        name: 'description',
        label: '描述',
        valueType: 'text',
        showWhenCollapsed: true, // 收起时显示
        fieldProps: {
            placeholder: '请输入',
        },
    },
    {
        name: 'serviceCount',
        label: '服务调用次数',
        valueType: 'text',
        showWhenCollapsed: true, // 收起时显示
        fieldProps: {
            placeholder: '请输入',
        },
    },
    {
        name: 'priceRange',
        label: '价格范围',
        valueType: 'textRange', // 文本范围类型，会在搜索表单中显示为两个输入框
        showWhenCollapsed: false, // 收起时隐藏，展开时显示
        required: true,
        // 支持数组形式的 rules，分别校验两个输入框
        // rules[0] 用于校验第一个输入框，rules[1] 用于校验第二个输入框
        rules: [
            { required: true, message: '请输入价格范围', trigger: 'change' },
            {
                validator: (rule, value, callback) => {
                    // value 是数组 [start, end]
                    const valueArray = Array.isArray(value) ? value : [];
                    const startValue = valueArray[0];
                    const endValue = valueArray[1];

                    // 校验第一个值不能为空
                    if (!startValue || startValue === '') {
                        callback(new Error('请输入最低价'));
                        return;
                    }

                    // 校验第二个值不能为空
                    if (!endValue || endValue === '') {
                        callback(new Error('请输入最高价'));
                        return;
                    }

                    const startNum = Number(startValue);
                    const endNum = Number(endValue);

                    // 校验是否为有效数字
                    if (isNaN(startNum)) {
                        callback(new Error('最低价必须是数字'));
                        return;
                    }
                    if (isNaN(endNum)) {
                        callback(new Error('最高价必须是数字'));
                        return;
                    }

                    // 校验最低价必须小于最高价
                    if (startNum >= endNum) {
                        callback(new Error('最低价必须小于最高价'));
                        return;
                    }

                    // 校验差值必须小于10
                    const diff = endNum - startNum;
                    if (diff >= 10) {
                        callback(new Error('最高价和最低价的差值必须小于10'));
                        return;
                    }

                    callback();
                },
                trigger: 'change',
            },
        ],
        fieldProps: {
            prefix: ['¥', '$'], // 第一个输入框使用 ¥，第二个输入框使用 $
            suffix: ['%', '元'], // 第一个输入框使用 %，第二个输入框使用 元
            placeholder: ['请输入最低价', '请输入最高价'],
            rangeFormat: 'array',
        },
    },
    {
        name: 'status',
        label: '状态',
        valueType: 'select',
        showWhenCollapsed: false, // 收起时隐藏，展开时显示
        fieldProps: {
            options: [
                { label: '启用', value: 'enabled' },
                { label: '禁用', value: 'disabled' },
            ],
            placeholder: '请选择',
        },
    },
    {
        name: 'weight',
        label: '重量',
        valueType: 'select',
        showWhenCollapsed: false, // 收起时隐藏，展开时显示
        fieldProps: {
            options: [
                { label: '1', value: '1' },
                { label: '5', value: '5' },
                { label: '10', value: '10' },
                { label: '20', value: '20' },
                { label: '50', value: '50' },
            ],
            placeholder: '请选择重量',
            suffix: 'KG', // 选择器后缀
        },
    },
    {
        name: 'lastScheduleTime',
        label: '上次调度时间',
        valueType: 'date',
        showWhenCollapsed: false, // 收起时隐藏，展开时显示
        fieldProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            placeholder: '请选择',
        },
    },
    {
        name: 'createTime',
        label: '创建时间',
        valueType: 'date',
        showWhenCollapsed: false, // 收起时隐藏，展开时显示
        fieldProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            placeholder: '请选择',
        },
    },
    // {
    //     name: 'updateTime',
    //     label: '更新时间',
    //     valueType: 'date',
    //     showWhenCollapsed: false, // 收起时隐藏，展开时显示
    //     fieldProps: {
    //         format: 'YYYY-MM-DD',
    //         valueFormat: 'YYYY-MM-DD',
    //         placeholder: '请选择',
    //     },
    // },
    // // {
    //     name: 'remark',
    //     label: '备注',
    //     valueType: 'textarea',
    //     colSpan: 24,
    //     showWhenCollapsed: false, // 收起时隐藏，展开时显示
    //     fieldProps: {
    //         rows: 3,
    //         placeholder: '请输入备注',
    //     },
    // },
]);

const collapsibleInitialValues = {
    ruleName: '',
    description: '',
    serviceCount: '',
    status: '',
    weight: '', // 重量初始值
    lastScheduleTime: '',
    createTime: '',
    updateTime: '',
    remark: '',
};

const collapsibleRules = {
    ruleName: [{ required: true, message: '请输入规则名称', trigger: 'change' }],
};

// 表单数据
const formData = ref({});

// 基础表单提交
const handleBasicSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('表单提交成功！');
    console.log('表单数据:', values);
};

// 基础表单值变化
const handleBasicValuesChange = (values, name, value) => {
    formData.value = { ...values };
    console.log('字段值变化:', name, value);
};

// 复杂表单提交
const handleComplexSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('表单提交成功！');
    console.log('表单数据:', values);
};

// 胶囊选择表单提交
const handlePillSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('表单提交成功！');
    console.log('胶囊选择表单数据:', values);
};

const handlePillValuesChange = values => {
    formData.value = { ...values };
};

// 获取表单值
const handleGetValues = form => {
    const values = form.getFieldsValue();
    formData.value = { ...values };
    ElMessage.info('已获取表单值，请查看下方数据展示区域');
    console.log('表单值:', values);
};

// 重置指定字段
const handleResetField = (form, fieldName, fieldLabel) => {
    if (form && form.resetFields) {
        form.resetFields([fieldName]);
        // 重置字段值到初始值
        if (basicInitialValues[fieldName] !== undefined) {
            form.setFieldsValue({ [fieldName]: basicInitialValues[fieldName] });
        } else {
            form.setFieldsValue({ [fieldName]: undefined });
        }
        ElMessage.success(`已重置字段：${fieldLabel || fieldName}`);
        // 更新表单数据展示
        const values = form.getFieldsValue();
        formData.value = { ...values };
    }
};

// 重置多个指定字段
const handleResetFields = (form, fieldNames, fieldLabels) => {
    if (form && form.resetFields) {
        form.resetFields(fieldNames);
        // 重置字段值到初始值
        const resetValues = {};
        fieldNames.forEach(fieldName => {
            if (basicInitialValues[fieldName] !== undefined) {
                resetValues[fieldName] = basicInitialValues[fieldName];
            } else {
                resetValues[fieldName] = undefined;
            }
        });
        form.setFieldsValue(resetValues);
        const labels = fieldLabels || fieldNames;
        ElMessage.success(`已重置字段：${labels.join('、')}`);
        // 更新表单数据展示
        const values = form.getFieldsValue();
        formData.value = { ...values };
    }
};

// 收起/展开表单提交
const handleCollapsibleSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('查询成功！');
    console.log('表单数据:', values);
};

// 响应式 fieldProps 示例：使用 computed 包装 fieldProps
const reactiveColumns = computed(() => [
    {
        name: 'keyword',
        label: '关键词',
        valueType: 'text',
        // 使用 computed 包装 fieldProps，确保响应式
        fieldProps: computed(() => ({
            placeholder: `请输入关键词（当前总数：${total.value}）`,
            disabled: paginationLoading.value,
        })),
    },
    {
        name: 'status',
        label: '状态',
        valueType: 'select',
        // 使用函数形式的 fieldProps，支持动态计算
        fieldProps: () => ({
            options: [
                { label: '启用', value: 'enabled' },
                { label: '禁用', value: 'disabled' },
                { label: '待审核', value: 'pending' },
            ],
            placeholder: paginationLoading.value ? '加载中...' : '请选择状态',
            disabled: paginationLoading.value,
            loading: paginationLoading.value,
        }),
    },
    {
        name: 'type',
        label: '类型',
        valueType: 'select',
        // 使用 computed 包装 fieldProps，访问响应式变量时使用 .value
        fieldProps: computed(() => {
            const options = [
                { label: '类型1', value: 'type1' },
                { label: '类型2', value: 'type2' },
                { label: '类型3', value: 'type3' },
            ];
            // 根据 query.value 动态过滤选项
            if (query.value) {
                return {
                    options: options.filter(opt => opt.label.includes(query.value)),
                    placeholder: `请选择类型（查询：${query.value}）`,
                    disabled: paginationLoading.value,
                };
            }
            return {
                options,
                placeholder: '请选择类型',
                disabled: paginationLoading.value,
            };
        }),
    },
    {
        name: 'department',
        label: '出发部门',
        valueType: 'select',
        required: true,
        // 使用 computed 包装 fieldProps，确保响应式
        // 注意：query、total、loading 使用 .value 访问，保持响应式更新
        fieldProps: computed(() => ({
            options: departmentOptions.value,
            filterable: true,
            remote: true,
            reserveKeyword: true,
            placeholder: '请输入关键字',
            remoteMethod: handleDepartmentRemoteMethod,
            pagination: {
                pageSize: 10,
            },
            query: departmentQuery.value,
            total: departmentTotal.value,
            loading: departmentLoading.value,
            onChange: value => {
                // 当部门选择变化时的处理
                const selectedOption = departmentOptions.value.find(
                    option => option.value === value || option.orgName === value,
                );
                if (selectedOption) {
                    console.log('选中的部门:', selectedOption);
                    ElMessage.success(`已选择部门：${selectedOption.label}`);
                }
            },
        })),
    },
]);

const reactiveInitialValues = {
    keyword: '',
    status: '',
    type: '',
    department: '',
};

// 更新分页数据（模拟数据变化）
const updatePaginationData = () => {
    query.value = `查询${Math.floor(Math.random() * 100)}`;
    total.value = Math.floor(Math.random() * 1000);
    paginationLoading.value = !paginationLoading.value;
    setTimeout(() => {
        paginationLoading.value = false;
    }, 1000);
};

// 响应式表单提交
const handleReactiveSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('查询成功！');
    console.log('表单数据:', values);
    console.log('查询参数:', query.value);
    console.log('总数:', total.value);
    console.log('加载状态:', paginationLoading.value);
};

// Disabled Placeholder 示例配置
const disabledPlaceholderColumns = computed(() => [
    {
        name: 'textDisabled',
        label: '文本输入（禁用）',
        valueType: 'text',
        fieldProps: {
            placeholder: '请输入文本',
        },
    },
    {
        name: 'textAutoPlaceholder',
        label: '文本输入（禁用-自动带入）',
        valueType: 'text',
        disabled: true,
        fieldProps: {
            placeholder: '自动带入',
        },
    },
    {
        name: 'textareaDisabled',
        label: '多行文本（禁用）',
        valueType: 'textarea',
        disabled: true,
        colSpan: 24,
        fieldProps: {
            rows: 3,
            placeholder: '请输入多行文本',
        },
    },
    {
        name: 'selectDisabled',
        label: '下拉选择（禁用）',
        valueType: 'select',
        disabled: true,
        fieldProps: {
            options: [
                { label: '选项1', value: 'option1' },
                { label: '选项2', value: 'option2' },
                { label: '选项3', value: 'option3' },
            ],
            placeholder: '请选择选项',
        },
    },
    {
        name: 'selectAutoPlaceholder',
        label: '下拉选择（禁用-自动带入）',
        valueType: 'select',
        disabled: true,
        fieldProps: {
            options: [
                { label: '选项1', value: 'option1' },
                { label: '选项2', value: 'option2' },
            ],
            placeholder: '自动带入',
        },
    },
    {
        name: 'dateDisabled',
        label: '日期选择（禁用）',
        valueType: 'date',
        disabled: true,
        fieldProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            placeholder: '请选择日期',
        },
    },
    {
        name: 'dateRangeDisabled',
        label: '日期范围（禁用）',
        valueType: 'dateRange',
        disabled: true,
        fieldProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            placeholder: ['请选择开始日期', '请选择结束日期'],
        },
    },
    {
        name: 'areaDisabled',
        label: '省市区（禁用）',
        valueType: 'area',
        disabled: true,
        fieldProps: {
            areaOptions: areaOptions,
            level: 3,
            placeholder: '请选择省市区',
        },
    },
    {
        name: 'inrcProductType',
        label: '增值产品类型',
        valueType: 'area',
        required: true,
        rules: [
            {
                required: true,
                message: '请选择增值产品类型',
                trigger: 'change',
            },
        ],
        fieldProps: computed(() => ({
            areaOptions: inrcProductTypeOptions.value,
            level: 3, // 三级：一级是pricingEntryName，二级是subName
            showAllLevels: true,
            actionStrictly: true, // 是否联动
            multiple: false,
            filterable: true,
            filterMethod: (node, keyword) => {
                // 自定义过滤方法，支持多级搜索
                // Element Plus cascader 的 filterMethod 参数：
                // node: 节点对象，包含 text（显示文本）和 data（原始数据对象）
                // keyword: 搜索关键字
                if (!keyword || keyword.trim() === '') return true;

                const keywordLower = keyword.trim().toLowerCase();

                // 调试：打印 node 结构（开发时可以查看，确认 node 的实际结构）
                // 取消注释下面的行来查看 node 的实际结构
                // if (keyword === '送货') {
                //     console.log('filterMethod node:', node, 'keyword:', keyword);
                //     console.log('node.text:', node.text);
                //     console.log('node.data:', node.data);
                //     console.log('node.label:', node.label);
                // }

                // 获取节点的显示文本
                // Element Plus cascader 的 node 对象结构：
                // - node.text: 显示的文本（由 cascaderProps.label 决定）
                // - node.data: 原始数据对象，包含 label, value, children 等
                // 注意：需要同时检查 node.text 和 node.data.label，因为不同版本可能不同
                const nodeText = node.text || (node.data && node.data.label) || node.label || '';
                const nodeTextStr = typeof nodeText === 'string' ? nodeText : String(nodeText);

                // 检查当前节点的文本是否匹配（包括一级节点）
                if (nodeTextStr.toLowerCase().includes(keywordLower)) {
                    return true;
                }

                // 获取实际的数据对象（用于递归检查子节点）
                const data = node.data || node;

                // 递归检查所有后代节点是否有匹配的
                // 如果任何后代节点匹配，父节点也应该显示（这样用户才能展开到匹配的子节点）
                const hasMatchingDescendant = children => {
                    if (!children || !Array.isArray(children) || children.length === 0) {
                        return false;
                    }

                    for (const child of children) {
                        // 检查子节点的 label
                        const childLabel = child.label || '';
                        const childLabelStr = typeof childLabel === 'string' ? childLabel : String(childLabel);
                        if (childLabelStr.toLowerCase().includes(keywordLower)) {
                            return true;
                        }

                        // 递归检查子节点的所有后代节点
                        if (hasMatchingDescendant(child.children)) {
                            return true;
                        }
                    }

                    return false;
                };

                // 如果任何后代节点匹配，当前节点也应该显示
                // 这样当搜索子节点时，父节点也会显示出来，用户可以展开到匹配的子节点
                return hasMatchingDescendant(data.children);
            },
            cascaderProps: {
                value: 'value',
                label: 'label',
                children: 'children',
                emitPath: true, // 返回完整路径
            },
        })),
    },
    {
        name: 'textRangeDisabled',
        label: '文本范围（禁用）',
        valueType: 'textRange',
        disabled: true,
        fieldProps: {
            placeholder: ['请输入最小值', '请输入最大值'],
        },
    },
]);

const disabledPlaceholderInitialValues = {
    textAutoPlaceholder: undefined,
    selectAutoPlaceholder: undefined,
};

// Disabled Placeholder 表单提交
const handleDisabledPlaceholderSubmit = values => {
    formData.value = { ...values };
    ElMessage.success('表单提交成功！');
    console.log('表单数据:', values);
};
</script>

<style scoped lang="less">
.pro-form-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;
        }
    }

    .form-section {
        padding: 20px 0;

        h3 {
            margin: 0 0 20px 0;
            color: #303133;
            font-size: 16px;
            font-weight: 600;
        }

        .form-actions {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #ebeef5;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
    }

    .data-card {
        pre {
            margin: 0;
            padding: 16px;
            background: #f5f7fa;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1.6;
            overflow-x: auto;
        }
    }
}
</style>
