<template>
  <div class="super-form-example">
    <el-card shadow="never" class="example-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">超级表单组件使用示例</span>
          <el-button type="primary" size="small" @click="handleCreate"
            >新增示例</el-button
          >
        </div>
      </template>

      <el-tabs v-model="activeTab" type="border-card" class="form-tabs">
        <!-- 基础示例 -->
        <el-tab-pane label="基础示例" name="basic">
          <SuperForm
            ref="basicFormRef"
            v-model="basicFormData"
            :config="basicFormConfig"
            :items="basicFormItems"
            :rules="basicFormRules"
            @submit="handleBasicSubmit"
            @success="handleSubmitSuccess"
            @error="handleSubmitError"
          />
        </el-tab-pane>

        <!-- 高级示例 -->
        <el-tab-pane label="高级示例" name="advanced">
          <SuperForm
            ref="advancedFormRef"
            v-model="advancedFormData"
            :config="advancedFormConfig"
            :items="advancedFormItems"
            :save-api="saveApiUrl"
            :update-api="updateApiUrl"
            :fetch-api="fetchApiUrl"
            @success="handleSubmitSuccess"
            @error="handleSubmitError"
          />
        </el-tab-pane>

        <!-- 自定义样式示例 -->
        <el-tab-pane label="自定义样式" name="custom">
          <SuperForm
            ref="customFormRef"
            v-model="customFormData"
            :config="customFormConfig"
            :items="customFormItems"
          />
        </el-tab-pane>

        <!-- 动态表单示例 -->
        <el-tab-pane label="动态表单" name="dynamic">
          <el-button type="primary" @click="toggleDynamicFields"
            >切换字段显示</el-button
          >
          <SuperForm
            ref="dynamicFormRef"
            v-model="dynamicFormData"
            :config="dynamicFormConfig"
            :items="dynamicFormItems"
          />
        </el-tab-pane>

        <!-- 带插槽的表单 -->
        <el-tab-pane label="自定义插槽" name="slots">
          <SuperForm
            ref="slotFormRef"
            v-model="slotFormData"
            :config="slotFormConfig"
            :items="slotFormItems"
            @submit="handleSlotSubmit"
          >
            <!-- 自定义插槽：用户信息 -->
            <template #userInfo="{ item, value, onChange }">
              <div class="custom-user-info">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleChangeAvatar"
                  >更换头像</el-button
                >
              </div>
            </template>

            <!-- 自定义插槽：数据展示 -->
            <template #dataDisplay="{ item, value }">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="用户名">{{
                  slotFormData.username
                }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{
                  slotFormData.email
                }}</el-descriptions-item>
                <el-descriptions-item label="注册时间">{{
                  slotFormData.registerTime
                }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag
                    :type="slotFormData.status === 1 ? 'success' : 'danger'"
                  >
                    {{ slotFormData.status === 1 ? "正常" : "禁用" }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </template>

            <!-- 自定义插槽：富文本编辑器 -->
            <template #richText="{ item, value, onChange }">
              <div class="rich-text-editor">
                <el-input
                  type="textarea"
                  :rows="6"
                  :model-value="value"
                  @input="onChange"
                  placeholder="请输入富文本内容..."
                />
                <div class="editor-toolbar">
                  <el-button size="small" @click="insertText('<b>粗体</b>')"
                    >粗体</el-button
                  >
                  <el-button size="small" @click="insertText('<i>斜体</i>')"
                    >斜体</el-button
                  >
                  <el-button size="small" @click="insertText('<u>下划线</u>')"
                    >下划线</el-button
                  >
                </div>
              </div>
            </template>
          </SuperForm>
        </el-tab-pane>

        <!-- 组件集成示例 - 使用懒加载优化性能 -->
        <el-tab-pane label="组件集成" name="integration">
          <div class="integration-container">
            <!-- 通用选择器集成 -->
            <div class="integration-section">
              <div class="section-title">CommonSelector 通用选择器</div>
              <SuperForm
                ref="selectorFormRef"
                v-model="selectorFormData"
                :config="selectorFormConfig"
                :items="selectorFormItems"
              />
            </div>

            <!-- 财务表格集成 - 使用虚拟滚动优化 -->
            <div class="integration-section">
              <div class="section-title">FinancialTable 财务表格</div>
              <FinancialTable
                v-model="financialTableData"
                :is-preview="false"
              />
            </div>

            <!-- 动态表单表格集成 - 使用分页加载 -->
            <div class="integration-section">
              <div class="section-title">FormDynamicTable 动态表格</div>
              <FormDynamicTable
                v-model="dynamicTableData"
                :columns="dynamicTableColumns"
                :default-row="defaultRow"
                :select-options="selectOptions"
                :show-import-export="true"
                export-name="动态表格数据"
              />
            </div>

            <!-- 年度计划集成 - 使用计算属性优化 -->
            <div class="integration-section">
              <div class="section-title">AnnualPlan 年度计划</div>
              <el-button
                type="primary"
                size="small"
                @click="toggleAnnualPlan"
                style="margin-bottom: 12px"
              >
                {{ showAnnualPlan ? '隐藏' : '显示' }}年度计划
              </el-button>
              <AnnualPlan
                v-if="showAnnualPlan"
                v-model="annualPlanData"
                :dynamic-time-list="annualPlanTimeList"
                :is-preview="false"
              />
            </div>
          </div>
        </el-tab-pane>

        <!-- 性能优化示例 -->
        <el-tab-pane label="性能优化" name="performance">
          <div class="performance-container">
            <el-alert
              title="性能优化技巧"
              type="info"
              :closable="false"
              style="margin-bottom: 20px"
            >
              <template #default>
                <ul class="performance-tips">
                  <li>✅ 使用 computed 缓存计算结果</li>
                  <li>✅ 使用 v-once 渲染静态内容</li>
                  <li>✅ 使用虚拟滚动处理大列表</li>
                  <li>✅ 使用防抖/节流优化频繁触发的事件</li>
                  <li>✅ 按需加载组件，减少初始渲染压力</li>
                  <li>✅ 合理使用 v-show 和 v-if</li>
                </ul>
              </template>
            </el-alert>

            <div class="performance-demo">
              <div class="demo-item">
                <div class="demo-title">大数据表单（1000+ 字段）</div>
                <el-progress
                  :percentage="loadingProgress"
                  :status="loadingProgress === 100 ? 'success' : undefined"
                />
                <el-button
                  type="primary"
                  @click="loadLargeForm"
                  :loading="isLoadingLargeForm"
                  style="margin-top: 12px"
                >
                  加载大表单
                </el-button>
                <div v-if="largeFormItems.length > 0" class="form-stats">
                  <el-tag type="success">字段数: {{ largeFormItems.length }}</el-tag>
                  <el-tag type="info">加载时间: {{ loadTime }}ms</el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted, defineAsyncComponent } from "vue";
import { ElMessage } from "element-plus";
import SuperForm from "@/components/common/SuperForm.vue";

// 🚀 性能优化：使用异步组件按需加载，减少初始渲染时间
const FinancialTable = defineAsyncComponent(() =>
  import("@/components/FinancialTable.vue")
);
const FormDynamicTable = defineAsyncComponent(() =>
  import("@/components/FormDynamicTable/index.vue")
);
const AnnualPlan = defineAsyncComponent(() =>
  import("@/views/everydayPage/annualPlan.vue")
);
const CommonSelector = defineAsyncComponent(() =>
  import("@/components/CommonSelector.vue")
);

const activeTab = ref("basic");
const basicFormRef = ref();
const advancedFormRef = ref();
const customFormRef = ref();
const dynamicFormRef = ref();
const slotFormRef = ref();
const selectorFormRef = ref();

// API 配置
const saveApiUrl = "/api/example/create";
const updateApiUrl = "/api/example/update";
const fetchApiUrl = "/api/example/detail";

// 性能优化相关
const loadingProgress = ref(0);
const isLoadingLargeForm = ref(false);
const largeFormItems = ref([]);
const loadTime = ref(0);
const showAnnualPlan = ref(false); // 默认隐藏年度计划，按需显示

// ==================== 基础表单示例 ====================
const basicFormData = ref({
  username: "",
  password: "",
  gender: "1",
  hobby: [],
  birthDate: "",
  email: "",
  phone: "",
  age: 25,
  introduce: "",
});

const basicFormConfig = {
  labelWidth: "120px",
  labelPosition: "right",
  gutter: 20,
  size: "default",
  showButtons: true,
  showSubmit: true,
  showReset: true,
  submitText: "提交",
  resetText: "重置",
  submitType: "primary",
};

const basicFormItems = computed(() => [
  {
    field: "username",
    label: "用户名",
    type: "input",
    span: 12,
    required: true,
    clearable: true,
    placeholder: "请输入用户名",
    maxlength: 20,
    "show-word-limit": true,
  },
  {
    field: "password",
    label: "密码",
    type: "password",
    span: 12,
    required: true,
    clearable: true,
    placeholder: "请输入密码",
    "show-password": true,
  },
  {
    field: "email",
    label: "邮箱",
    type: "input",
    span: 12,
    required: true,
    clearable: true,
    placeholder: "请输入邮箱",
    rules: [
      { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
    ],
  },
  {
    field: "phone",
    label: "手机号",
    type: "input",
    span: 12,
    clearable: true,
    placeholder: "请输入手机号",
    rules: [
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号",
        trigger: "blur",
      },
    ],
  },
  {
    field: "gender",
    label: "性别",
    type: "radio",
    span: 12,
    required: true,
    options: [
      { label: "男", value: "1" },
      { label: "女", value: "2" },
      { label: "保密", value: "0" },
    ],
  },
  {
    field: "age",
    label: "年龄",
    type: "number",
    span: 12,
    min: 0,
    max: 150,
    step: 1,
  },
  {
    field: "hobby",
    label: "爱好",
    type: "checkbox",
    span: 12,
    options: [
      { label: "阅读", value: "reading" },
      { label: "运动", value: "sports" },
      { label: "音乐", value: "music" },
      { label: "旅行", value: "travel" },
    ],
  },
  {
    field: "birthDate",
    label: "出生日期",
    type: "date",
    span: 12,
    "value-format": "YYYY-MM-DD",
    placeholder: "请选择出生日期",
  },
  {
    field: "introduce",
    label: "个人简介",
    type: "textarea",
    span: 24,
    rows: 4,
    maxlength: 200,
    "show-word-limit": true,
    placeholder: "请输入个人简介",
  },
]);

const basicFormRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于 6 位", trigger: "blur" },
  ],
};

// ==================== 高级表单示例 ====================
const advancedFormData = ref({
  name: "",
  category: [],
  tags: [],
  publishTime: "",
  validDate: [],
  isPublished: false,
  priority: 50,
  rating: 3,
  color: "#409EFF",
  region: [],
  treeSelect: "",
  files: [],
});

const advancedFormConfig = {
  labelWidth: "140px",
  gutter: 20,
  showButtons: true,
  customButtons: [
    {
      key: "draft",
      text: "保存草稿",
      type: "info",
      icon: "Document",
      handler: () => {
        ElMessage.info("保存草稿成功");
      },
    },
    {
      key: "preview",
      text: "预览",
      type: "success",
      icon: "View",
      handler: () => {
        ElMessage.success("预览模式");
      },
    },
  ],
};

const advancedFormItems = computed(() => [
  {
    field: "name",
    label: "内容名称",
    type: "input",
    span: 12,
    required: true,
    clearable: true,
    placeholder: "请输入内容名称",
  },
  {
    field: "category",
    label: "内容分类",
    type: "select",
    span: 12,
    clearable: true,
    filterable: true,
    placeholder: "请选择分类",
    options: [
      { label: "技术", value: "tech" },
      { label: "生活", value: "life" },
      { label: "娱乐", value: "entertainment" },
      { label: "体育", value: "sports" },
    ],
    props: {
      multiple: true,
    },
  },
  {
    field: "tags",
    label: "标签",
    type: "checkbox",
    span: 12,
    options: [
      { label: "热门", value: "hot" },
      { label: "推荐", value: "recommend" },
      { label: "最新", value: "latest" },
      { label: "精选", value: "featured" },
    ],
  },
  {
    field: "publishTime",
    label: "发布时间",
    type: "datetime",
    span: 12,
    "value-format": "YYYY-MM-DD HH:mm:ss",
    placeholder: "请选择发布时间",
  },
  {
    field: "validDate",
    label: "有效期",
    type: "daterange",
    span: 12,
    "value-format": "YYYY-MM-DD",
    "start-placeholder": "开始日期",
    "end-placeholder": "结束日期",
  },
  {
    field: "isPublished",
    label: "是否发布",
    type: "switch",
    span: 8,
    "active-text": "已发布",
    "inactive-text": "未发布",
  },
  {
    field: "priority",
    label: "优先级",
    type: "slider",
    span: 16,
    min: 0,
    max: 100,
    marks: {
      0: "低",
      50: "中",
      100: "高",
    },
  },
  {
    field: "rating",
    label: "评分",
    type: "rate",
    span: 12,
    max: 5,
    "allow-half": true,
    "show-text": true,
    texts: ["极差", "失望", "一般", "满意", "惊喜"],
  },
  {
    field: "color",
    label: "主题色",
    type: "colorPicker",
    span: 12,
    "show-alpha": true,
  },
  {
    field: "region",
    label: "地区",
    type: "cascader",
    span: 12,
    clearable: true,
    placeholder: "请选择地区",
    options: [
      {
        value: "zhejiang",
        label: "浙江省",
        children: [
          { value: "hangzhou", label: "杭州市" },
          { value: "ningbo", label: "宁波市" },
        ],
      },
      {
        value: "jiangsu",
        label: "江苏省",
        children: [
          { value: "nanjing", label: "南京市" },
          { value: "suzhou", label: "苏州市" },
        ],
      },
    ],
  },
  {
    field: "treeSelect",
    label: "部门",
    type: "treeSelect",
    span: 12,
    clearable: true,
    placeholder: "请选择部门",
    data: [
      {
        id: "1",
        label: "技术部",
        children: [
          { id: "1-1", label: "前端组" },
          { id: "1-2", label: "后端组" },
        ],
      },
      {
        id: "2",
        label: "市场部",
        children: [
          { id: "2-1", label: "销售组" },
          { id: "2-2", label: "推广组" },
        ],
      },
    ],
    props: {
      label: "label",
      value: "id",
      children: "children",
    },
  },
  {
    field: "files",
    label: "文件上传",
    type: "upload",
    span: 24,
    action: "/api/upload",
    "show-file-list": true,
    "on-success": (response, file, fileList) => {
      ElMessage.success("上传成功");
    },
    "on-error": (error, file, fileList) => {
      ElMessage.error("上传失败");
    },
  },
]);

// ==================== 自定义样式示例 ====================
const customFormData = ref({});

const customFormConfig = {
  labelWidth: "100px",
  labelPosition: "top",
  gutter: 30,
  size: "large",
  showButtons: true,
  submitType: "success",
  submitText: "保存修改",
  submitIcon: "Check",
  buttonSpan: 24,
};

const customFormItems = computed(() => [
  {
    field: "productName",
    label: "产品名称",
    type: "input",
    span: 8,
    itemClass: "custom-form-item",
    placeholder: "请输入产品名称",
    prefixIcon: "Goods",
  },
  {
    field: "productCode",
    label: "产品编码",
    type: "input",
    span: 8,
    placeholder: "请输入产品编码",
    prefixIcon: "Tickets",
  },
  {
    field: "productPrice",
    label: "产品价格",
    type: "inputNumber",
    span: 8,
    min: 0,
    precision: 2,
    "controls-position": "right",
  },
  {
    field: "productDesc",
    label: "产品描述",
    type: "textarea",
    span: 24,
    rows: 5,
    placeholder: "请输入产品描述",
  },
]);

// ==================== 动态表单示例 ====================
const showDynamicFields = ref(true);

const dynamicFormData = ref({});

const dynamicFormConfig = {
  labelWidth: "120px",
  gutter: 20,
};

const dynamicFormItems = computed(() => {
  const baseItems = [
    {
      field: "username",
      label: "用户名",
      type: "input",
      span: 12,
      required: true,
    },
    {
      field: "email",
      label: "邮箱",
      type: "input",
      span: 12,
    },
  ];

  if (showDynamicFields.value) {
    baseItems.push(
      {
        field: "phone",
        label: "手机号",
        type: "input",
        span: 12,
      },
      {
        field: "address",
        label: "地址",
        type: "input",
        span: 12,
      },
    );
  }

  return baseItems;
});

const toggleDynamicFields = () => {
  showDynamicFields.value = !showDynamicFields.value;
};

// ==================== 带插槽的表单示例 ====================
const slotFormData = ref({
  avatar: "",
  username: "",
  email: "",
  registerTime: "",
  status: 1,
  content: "",
});

const slotFormConfig = {
  labelWidth: "120px",
  gutter: 20,
  showButtons: true,
};

const slotFormItems = computed(() => [
  {
    field: "userInfo",
    label: "用户信息",
    type: "slot",
    slotName: "userInfo",
    span: 24,
  },
  {
    field: "username",
    label: "用户名",
    type: "input",
    span: 12,
  },
  {
    field: "email",
    label: "邮箱",
    type: "input",
    span: 12,
  },
  {
    field: "registerTime",
    label: "注册时间",
    type: "date",
    span: 12,
    "value-format": "YYYY-MM-DD",
  },
  {
    field: "status",
    label: "状态",
    type: "select",
    span: 12,
    options: [
      { label: "正常", value: 1 },
      { label: "禁用", value: 0 },
    ],
  },
  {
    field: "dataDisplay",
    label: "数据展示",
    type: "slot",
    slotName: "dataDisplay",
    span: 24,
  },
  {
    field: "content",
    label: "富文本内容",
    type: "slot",
    slotName: "richText",
    span: 24,
  },
]);

// ==================== 组件集成示例 ====================
const selectorFormData = ref({
  matterType: "",
  projectType: "",
  investmentType: "",
});

const selectorFormConfig = {
  labelWidth: "140px",
  gutter: 20,
  showButtons: false,
};

const selectorFormItems = computed(() => [
  {
    field: "matterType",
    label: "事项类型",
    type: "component",
    component: CommonSelector,
    span: 8,
    componentProps: {
      dictName: "matterType",
      placeholder: "请选择事项类型",
    },
  },
  {
    field: "projectType",
    label: "项目类型",
    type: "component",
    component: CommonSelector,
    span: 8,
    componentProps: {
      dictName: "projectType",
      placeholder: "请选择项目类型",
    },
  },
  {
    field: "investmentType",
    label: "投资类型",
    type: "component",
    component: CommonSelector,
    span: 8,
    componentProps: {
      dictName: "investmentType",
      placeholder: "请选择投资类型",
    },
  },
]);

// 财务表格数据
const financialTableData = ref({
  indicatorList: [
    { name: "总收入", level: 0, serialNumber: 1 },
    { name: "  - 主营业务收入", level: 1, serialNumber: 2 },
    { name: "  - 其他业务收入", level: 1, serialNumber: 3 },
    { name: "总支出", level: 0, serialNumber: 4 },
    { name: "  - 运营成本", level: 1, serialNumber: 5 },
    { name: "  - 管理费用", level: 1, serialNumber: 6 },
  ],
  dynamicTimeList: [
    "2025及以前",
    "2026",
    "2026-小记",
    "2027",
    "2028",
    "2029",
  ],
  tableData: [],
});

// 动态表格数据
const dynamicTableData = ref([
  {
    projectName: "示例项目1",
    investmentAmount: 1000,
    investmentDate: "2025-01-01",
    projectType: "tech",
    description: "这是一个示例项目",
  },
]);

const dynamicTableColumns = computed(() => [
  {
    prop: "projectName",
    label: "项目名称",
    type: "input",
    minWidth: 180,
    headerGroup: "基本信息",
    placeholder: "请输入项目名称",
  },
  {
    prop: "investmentAmount",
    label: "投资金额(万元)",
    type: "number",
    minWidth: 160,
    headerGroup: "财务信息",
    placeholder: "请输入投资金额",
    precision: 2,
    min: 0,
  },
  {
    prop: "investmentDate",
    label: "投资日期",
    type: "date",
    minWidth: 160,
    headerGroup: "基本信息",
    placeholder: "请选择日期",
    format: "YYYY-MM-DD",
    valueFormat: "YYYY-MM-DD",
  },
  {
    prop: "projectType",
    label: "项目类型",
    type: "select",
    minWidth: 140,
    headerGroup: "基本信息",
    placeholder: "请选择类型",
    optionKey: "projectType",
  },
  {
    prop: "description",
    label: "项目描述",
    type: "textarea",
    minWidth: 240,
    headerGroup: "基本信息",
    placeholder: "请输入项目描述",
    rows: 2,
  },
]);

const defaultRow = {
  projectName: "",
  investmentAmount: 0,
  investmentDate: "",
  projectType: "",
  description: "",
};

const selectOptions = ref({
  projectType: [
    { key: "tech", name: "技术类" },
    { key: "life", name: "生活类" },
    { key: "entertainment", name: "娱乐类" },
  ],
});

// 年度计划数据
const annualPlanData = ref([]);
const annualPlanTimeList = ref(["2025及以前", "2026", "2026-小记", "2027", "2028", "2029"]);

const toggleAnnualPlan = () => {
  showAnnualPlan.value = !showAnnualPlan.value;
  if (showAnnualPlan.value && annualPlanData.value.length === 0) {
    // 初始化年度计划数据
    annualPlanData.value = Array.from({ length: 17 }, (_, i) => ({
      id: i + 1,
      name: `项目${i + 1}`,
      ...annualPlanTimeList.value.reduce((acc, time) => {
        acc[time] = 0;
        return acc;
      }, {}),
    }));
  }
};

// ==================== 性能优化示例 ====================
// 生成大表单字段（用于演示性能优化）
const loadLargeForm = async () => {
  const startTime = performance.now();
  isLoadingLargeForm.value = true;
  loadingProgress.value = 0;

  try {
    // 使用分批加载，避免一次性渲染大量字段导致卡顿
    const batchSize = 100;
    const totalFields = 1000;
    const batches = Math.ceil(totalFields / batchSize);

    for (let i = 0; i < batches; i++) {
      await new Promise(resolve => setTimeout(resolve, 10)); // 模拟异步加载

      const batch = Array.from({ length: batchSize }, (_, j) => ({
        field: `field_${i * batchSize + j}`,
        label: `字段 ${i * batchSize + j + 1}`,
        type: "input",
        span: 6,
        placeholder: `请输入字段${i * batchSize + j + 1}`,
      }));

      largeFormItems.value.push(...batch);
      loadingProgress.value = Math.round(((i + 1) / batches) * 100);
    }

    const endTime = performance.now();
    loadTime.value = Math.round(endTime - startTime);
    ElMessage.success(`大表单加载完成，共 ${totalFields} 个字段，耗时 ${loadTime.value}ms`);
  } catch (error) {
    ElMessage.error("加载失败");
  } finally {
    isLoadingLargeForm.value = false;
  }
};

// ==================== 事件处理 ====================
const handleBasicSubmit = (data, isEdit) => {
  console.log("基础表单提交:", data, isEdit);
  ElMessage.success(`基础表单${isEdit ? "更新" : "创建"}成功`);
};

const handleSubmitSuccess = (response, data, isEdit) => {
  ElMessage.success(`操作成功: ${isEdit ? "更新" : "创建"}`);
  console.log("提交成功:", response, data);
};

const handleSubmitError = (error, data, isEdit) => {
  ElMessage.error(`操作失败: ${error.message || "未知错误"}`);
  console.error("提交失败:", error, data);
};

const handleSlotSubmit = (data) => {
  console.log("插槽表单提交:", data);
  ElMessage.success("提交成功");
};

const handleCreate = () => {
  basicFormData.value = {};
  advancedFormData.value = {};
  customFormData.value = {};
  dynamicFormData.value = {};
  slotFormData.value = {};
  ElMessage.info("已清空表单数据");
};

const handleChangeAvatar = () => {
  ElMessage.info("更换头像功能");
};

const insertText = (text) => {
  slotFormData.value.content += text;
};
</script>

<style scoped lang="less">
.super-form-example {
  padding: 20px;

  .example-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

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

      .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }

    .form-tabs {
      :deep(.el-tabs__content) {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
      }

      // 优化滚动条样式
      :deep(.el-tabs__content)::-webkit-scrollbar {
        width: 6px;
      }

      :deep(.el-tabs__content)::-webkit-scrollbar-thumb {
        background-color: #dcdfe6;
        border-radius: 3px;
      }

      :deep(.el-tabs__content)::-webkit-scrollbar-thumb:hover {
        background-color: #c0c4cc;
      }
    }
  }

  .integration-container {
    .integration-section {
      margin-bottom: 30px;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid #409eff;
      }
    }
  }

  .performance-container {
    .performance-tips {
      margin: 0;
      padding-left: 20px;

      li {
        margin-bottom: 8px;
        line-height: 1.6;
      }
    }

    .performance-demo {
      margin-top: 20px;

      .demo-item {
        padding: 20px;
        background-color: #f5f7fa;
        border-radius: 8px;

        .demo-title {
          font-size: 14px;
          font-weight: 600;
          color: #606266;
          margin-bottom: 12px;
        }

        .form-stats {
          display: flex;
          gap: 12px;
          margin-top: 16px;
        }
      }
    }
  }

  .custom-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .rich-text-editor {
    width: 100%;

    .editor-toolbar {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
  }

  :deep(.custom-form-item) {
    .el-form-item__label {
      color: #409eff;
      font-weight: 600;
    }
  }
}

// 全局样式优化
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-tree-select) {
  width: 100%;
}

:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-time-picker) {
  width: 100%;
}

:deep(.el-autocomplete) {
  width: 100%;
}

// 优化表格样式
:deep(.el-table) {
  font-size: 13px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

:deep(.el-table--border) {
  border-color: #ebeef5;
}

// 优化按钮样式
:deep(.el-button) {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }
}

// 优化卡片样式
:deep(.el-card) {
  border-radius: 8px;
  border: none;
}

:deep(.el-card__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 16px 20px;
}

// 优化标签页样式
:deep(.el-tabs--border-card) {
  border-radius: 8px;
  box-shadow: none;
}

:deep(.el-tabs__item) {
  font-weight: 500;

  &.is-active {
    color: #409eff;
    font-weight: 600;
  }
}
</style>
