<script setup lang="tsx">
import type { LowCodeFormSchemaItem } from '../src/typings/FormSchema';
import { ElButton, ElCard, ElCollapseTransition, ElDivider, ElSpace, ElTag } from 'element-plus-cisdi';
import { reactive, ref } from 'vue';
import { useDetailRender } from '../src/composables/useDetailRender';
import { CustomItem } from './CustomItem';
import { CustomLayout } from './CustomLayout';

// ==================== 代码展示控制 ====================
const codeVisible = reactive<Record<string, boolean>>({});

function toggleCode(key: string) {
  codeVisible[key] = !codeVisible[key];
}

// 代码图标组件
function CodeIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      width="18"
      height="18"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      style={{ cursor: 'pointer' }}
    >
      <polyline points="16 18 22 12 16 6" />
      <polyline points="8 6 2 12 8 18" />
    </svg>
  );
}

// ==================== 示例源码 ====================
const sourceCode = {
  example1: `const [BasicDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '电话' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});`,
  example2: `// 2.1 垂直布局
const [VerticalDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true, direction: 'vertical' },
  },
});

// 2.2 无边框 + 2列
const [NoBorderDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '电话' },
    { prop: 'department', label: '部门' },
  ],
  layout: {
    props: { column: 2, border: false },
  },
});

// 2.3 单列布局 + 大尺寸
const [SingleColumnDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'email', label: '邮箱' },
    { prop: 'address', label: '地址' },
  ],
  layout: {
    props: { column: 1, border: true, size: 'large' },
  },
});

// 2.4 小尺寸
const [SmallDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true, size: 'small' },
  },
});`,
  example3: `const [CustomRenderDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄', formatter: v => \`\${v} 岁\` },
    {
      prop: 'status',
      label: '状态',
      render: v => (
        <ElTag type={v === 'active' ? 'success' : 'danger'}>
          {v === 'active' ? '在职' : '离职'}
        </ElTag>
      ),
    },
    { prop: 'salary', label: '薪资', formatter: v => \`¥\${v.toLocaleString()}\` },
    {
      prop: 'skills',
      label: '技能',
      render: v => (
        <ElSpace>
          {v.map(skill => (
            <ElTag key={skill} size="small" type="info">{skill}</ElTag>
          ))}
        </ElSpace>
      ),
    },
    { prop: 'manager', label: '直属领导', emptyText: '暂无' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});`,
  example4: `const formSchemas: LowCodeFormSchemaItem[] = [
  {
    componentCode: 'input-1',
    type: 'input',
    fieldId: 'name',
    name: '姓名',
    metaProps: {
      formItem: { label: '用户姓名' },
      code: 'input',
    },
  },
  // ... more schema items
];

const [SchemaDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  schemas: formSchemas,
  layout: {
    props: { column: 2, border: true, title: '从 Schema 自动生成' },
  },
});`,
  example5: `const [CustomComponentDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
    { prop: 'email', label: '邮箱' },
  ],
  layout: {
    component: CustomLayout,
    props: { title: '自定义卡片风格' },
  },
  item: {
    component: CustomItem,
  },
});`,
  example6: `const dynamicData = ref({
  name: '初始用户',
  count: 0,
  lastUpdate: new Date().toLocaleTimeString(),
});

const [DynamicDetail, dynamicApi] = useDetailRender({
  formType: 'element',
  data: dynamicData,
  columns: [
    { prop: 'name', label: '用户名' },
    { prop: 'count', label: '更新次数' },
    { prop: 'lastUpdate', label: '最后更新' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});

function updateDynamicData() {
  const newData = {
    name: \`用户_\${Math.random().toString(36).slice(2, 8)}\`,
    count: dynamicData.value.count + 1,
    lastUpdate: new Date().toLocaleTimeString(),
  };
  dynamicApi.setData(newData);
  dynamicData.value = newData;
}`,
  example7: `const userList = ref([
  { id: 1, name: '张三', age: 28, department: '技术部', status: 'active' },
  { id: 2, name: '李四', age: 32, department: '产品部', status: 'active' },
  { id: 3, name: '王五', age: 25, department: '设计部', status: 'inactive' },
]);

const [ListItemDetail] = useDetailRender({
  formType: 'element',
  data: {},
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' },
    { prop: 'department', label: '部门' },
    {
      prop: 'status',
      label: '状态',
      render: v => (
        <ElTag size="small" type={v === 'active' ? 'success' : 'info'}>
          {v === 'active' ? '在职' : '离职'}
        </ElTag>
      ),
    },
  ],
  layout: {
    props: { column: 4, border: true, size: 'small' },
  },
});

// Template 使用
<div v-for="item in userList" :key="item.id">
  <ListItemDetail :data="item" />
</div>`,
  example8: `const [MobileDetail] = useDetailRender({
  formType: 'vant',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄', formatter: v => \`\${v} 岁\` },
    { prop: 'department', label: '部门' },
    { prop: 'phone', label: '电话' },
    { prop: 'email', label: '邮箱' },
  ],
  layout: {
    props: { title: '基本信息', border: true },
  },
});`,
  example9: `const [GroupedDetail] = useDetailRender({
  formType: 'element',
  data: assetData.value,
  groups: [
    {
      title: '基本信息',
      columns: [
        { prop: 'assetName', label: '资产名称' },
        { prop: 'assetType', label: '资产类别' },
        // ... more columns
      ],
      layout: { column: 4, border: true },
    },
    {
      title: '使用管理信息',
      columns: [
        { prop: 'manageDept', label: '企业管理部门' },
        { prop: 'custodian', label: '保管人' },
        // ... more columns
      ],
      layout: { column: 4, border: true },
    },
    // ... more groups
  ],
});`,
  example10: `const [GroupedWithCustomRender] = useDetailRender({
  formType: 'element',
  data: attachmentData.value,
  groups: [
    {
      title: '文档信息',
      columns: [
        { prop: 'name', label: '文档名称' },
        { prop: 'type', label: '文档类型' },
      ],
      layout: { column: 2, border: true },
    },
    {
      title: '附件信息',
      columns: [],
      render: data => (
        <table class="attachment-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>附件类型</th>
              <th>附件内容</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            {data.attachments.map((item, index) => (
              <tr key={item.id}>
                <td>{String(index + 1).padStart(2, '0')}</td>
                <td>{item.type}</td>
                <td>{item.name}</td>
                <td>
                  <ElTag size="small" type={item.status === '已完成' ? 'success' : 'info'}>
                    {item.status}
                  </ElTag>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      ),
    },
  ],
});`,
};

// ==================== 模拟数据 ====================
const userData = ref({
  name: '张三',
  age: 28,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  status: 'active',
  department: '技术部',
  position: '前端工程师',
  joinDate: '2022-03-15',
  salary: 15000,
  address: '北京市朝阳区xxx街道xxx号',
  skills: ['Vue', 'React', 'TypeScript'],
  manager: null,
});

// ==================== 示例 1: 基础用法 ====================
const [BasicDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '电话' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});

// ==================== 示例 2: 不同布局样式 ====================
// 2.1 垂直布局
const [VerticalDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true, direction: 'vertical' },
  },
});

// 2.2 无边框 + 2列
const [NoBorderDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '电话' },
    { prop: 'department', label: '部门' },
  ],
  layout: {
    props: { column: 2, border: false },
  },
});

// 2.3 单列布局 + 大尺寸
const [SingleColumnDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'email', label: '邮箱' },
    { prop: 'address', label: '地址' },
  ],
  layout: {
    props: { column: 1, border: true, size: 'large' },
  },
});

// 2.4 小尺寸
const [SmallDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
  ],
  layout: {
    props: { column: 3, border: true, size: 'small' },
  },
});

// ==================== 示例 3: 自定义渲染 ====================
const [CustomRenderDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄', formatter: v => `${v} 岁` },
    {
      prop: 'status',
      label: '状态',
      render: v => (
        <ElTag type={v === 'active' ? 'success' : 'danger'}>
          {v === 'active' ? '在职' : '离职'}
        </ElTag>
      ),
    },
    { prop: 'salary', label: '薪资', formatter: v => `¥${v.toLocaleString()}` },
    {
      prop: 'skills',
      label: '技能',
      render: v => (
        <ElSpace>
          {(v as string[]).map(skill => (
            <ElTag key={skill} size="small" type="info">{skill}</ElTag>
          ))}
        </ElSpace>
      ),
    },
    { prop: 'manager', label: '直属领导', emptyText: '暂无' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});

// ==================== 示例 4: 复用 Schema ====================
const formSchemas: LowCodeFormSchemaItem[] = [
  {
    componentCode: 'input-1',
    type: 'input',
    fieldId: 'name',
    name: '姓名',
    metaProps: {
      formItem: { label: '用户姓名' },
      code: 'input',
    },
  },
  {
    componentCode: 'input-2',
    type: 'input',
    fieldId: 'email',
    name: '邮箱',
    metaProps: {
      formItem: { label: '电子邮箱' },
      code: 'input',
    },
  },
  {
    componentCode: 'input-3',
    type: 'input',
    fieldId: 'phone',
    name: '电话',
    metaProps: {
      formItem: { label: '联系电话' },
      code: 'input',
    },
  },
  {
    componentCode: 'input-4',
    type: 'input',
    fieldId: 'department',
    name: '部门',
    metaProps: {
      formItem: { label: '所属部门' },
      code: 'input',
    },
  },
  {
    componentCode: 'input-5',
    type: 'input',
    fieldId: 'position',
    name: '职位',
    metaProps: {
      formItem: { label: '职位名称' },
      code: 'input',
    },
  },
  {
    componentCode: 'hidden-1',
    type: 'input',
    fieldId: 'hiddenField',
    controls: { hidden: true },
    metaProps: { code: 'input' },
  },
];

const [SchemaDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  schemas: formSchemas,
  layout: {
    props: { column: 2, border: true, title: '从 Schema 自动生成' },
  },
});

// ==================== 示例 5: 自定义组件 ====================
const [CustomComponentDetail] = useDetailRender({
  formType: 'element',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'department', label: '部门' },
    { prop: 'position', label: '职位' },
    { prop: 'email', label: '邮箱' },
  ],
  layout: {
    component: CustomLayout,
    props: { title: '自定义卡片风格' },
  },
  item: {
    component: CustomItem,
  },
});

// ==================== 示例 6: 动态数据更新 ====================
const dynamicData = ref({
  name: '初始用户',
  count: 0,
  lastUpdate: new Date().toLocaleTimeString(),
});

const [DynamicDetail, dynamicApi] = useDetailRender({
  formType: 'element',
  data: dynamicData,
  columns: [
    { prop: 'name', label: '用户名' },
    { prop: 'count', label: '更新次数' },
    { prop: 'lastUpdate', label: '最后更新' },
  ],
  layout: {
    props: { column: 3, border: true },
  },
});

function updateDynamicData() {
  const newData = {
    name: `用户_${Math.random().toString(36).slice(2, 8)}`,
    count: dynamicData.value.count + 1,
    lastUpdate: new Date().toLocaleTimeString(),
  };
  dynamicApi.setData(newData);
  dynamicData.value = newData;
}

// ==================== 示例 7: 多条数据循环 ====================
const userList = ref([
  { id: 1, name: '张三', age: 28, department: '技术部', status: 'active' },
  { id: 2, name: '李四', age: 32, department: '产品部', status: 'active' },
  { id: 3, name: '王五', age: 25, department: '设计部', status: 'inactive' },
]);

const [ListItemDetail] = useDetailRender({
  formType: 'element',
  data: {},
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' },
    { prop: 'department', label: '部门' },
    {
      prop: 'status',
      label: '状态',
      render: v => (
        <ElTag size="small" type={v === 'active' ? 'success' : 'info'}>
          {v === 'active' ? '在职' : '离职'}
        </ElTag>
      ),
    },
  ],
  layout: {
    props: { column: 4, border: true, size: 'small' },
  },
});

// ==================== 示例 8: Mobile 模式 ====================
const [MobileDetail] = useDetailRender({
  formType: 'vant',
  data: userData.value,
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄', formatter: v => `${v} 岁` },
    { prop: 'department', label: '部门' },
    { prop: 'phone', label: '电话' },
    { prop: 'email', label: '邮箱' },
  ],
  layout: {
    props: { title: '基本信息', border: true },
  },
});

// ==================== 示例 9: 分组模式 ====================
const assetData = ref({
  // 基本信息
  assetName: '生产设备A',
  assetType: '机械设备',
  profitCenter: '利润中心001',
  assetProperty: '固定资产',
  assetCode: 'ASSET-2024-001',
  measureUnit: '台',
  assetQty: 5,
  unitLabel: '计量单位',
  modelSpec: 'XYZ-1000',
  enterpriseCode: 'ENT-001',
  barcode: '6901234567890',
  supplier: '供应商A',
  manufacturer: '生产厂家B',
  productionCountry: '中国',
  factoryNo: 'FN-2024-001',
  factoryDate: '2024-01-15',

  // 使用管理信息
  manageDept: '设备管理部',
  custodian: '张三',
  useDept: '生产一车间',
  user: '李四',
  useStatus: '在用',
  region: '华东区',
  location: '厂房A-3楼',

  // 技术信息
  techParam: '功率: 100kW',
  paramUnit: 'kW',
  designCapacity: '1000件/天',
  capacityUnit: '件/天',
  techStatus: '良好',
  economicLife: '10年',

  // 核算信息
  costCenter: 'CC-001',
  plateModule: '模块A',
  assetCategory: '机械设备',
  capitalSource: '自有资金',
  capitalChannel: '银行贷款',
  economicUse: '生产用',
  functionRange: '主要生产',
  projectCode: 'PRJ-2024-001',
  subjectCategory: '固定资产',
  depreciationSubject: '累计折旧',
  depreciationCostCenter: 'DCC-001',
  impairmentSubject: '资产减值',
  depreciationExpenseSubject: '折旧费用',
  depreciationCostSubject: '折旧成本',
  impairmentLossSubject: '减值损失',
  disposalLossSubject: '处置损失',
  disposalSubject: '资产处置',
  entryStatus: '已入账',
  entryDate: '2024-01-20',
  foreignCurrencyCode: 'USD',
});

const [GroupedDetail] = useDetailRender({
  formType: 'element',
  data: assetData.value,
  groups: [
    {
      title: '基本信息',
      columns: [
        { prop: 'assetName', label: '资产名称' },
        { prop: 'assetType', label: '资产类别' },
        { prop: 'profitCenter', label: '利润中心' },
        { prop: 'assetProperty', label: '资产属性' },
        { prop: 'assetCode', label: '资产标识' },
        { prop: 'measureUnit', label: '计量模式' },
        { prop: 'assetQty', label: '资产数量' },
        { prop: 'unitLabel', label: '计量单位' },
        { prop: 'modelSpec', label: '规格型号' },
        { prop: 'enterpriseCode', label: '企业自编号' },
        { prop: 'barcode', label: '资产条形号码' },
        { prop: 'supplier', label: '供应商' },
        { prop: 'manufacturer', label: '生产厂家' },
        { prop: 'productionCountry', label: '生产国别' },
        { prop: 'factoryNo', label: '出厂编号' },
        { prop: 'factoryDate', label: '出厂日期' },
      ],
      layout: { column: 4, border: true },
    },
    {
      title: '使用管理信息',
      columns: [
        { prop: 'manageDept', label: '企业管理部门' },
        { prop: 'custodian', label: '保管人' },
        { prop: 'useDept', label: '资产使用单位' },
        { prop: 'user', label: '使用人' },
        { prop: 'useStatus', label: '使用情况' },
        { prop: 'region', label: '地理区域' },
        { prop: 'location', label: '所在地点' },
      ],
      layout: { column: 4, border: true },
    },
    {
      title: '技术信息',
      columns: [
        { prop: 'techParam', label: '技术参数' },
        { prop: 'paramUnit', label: '参数单位' },
        { prop: 'designCapacity', label: '设计能力' },
        { prop: 'capacityUnit', label: '能力单位' },
        { prop: 'techStatus', label: '技术状态' },
        { prop: 'economicLife', label: '经济适用年限' },
      ],
      layout: { column: 4, border: true },
    },
    {
      title: '核算信息',
      columns: [
        { prop: 'costCenter', label: '成本中心' },
        { prop: 'plateModule', label: '所属板块' },
        { prop: 'assetCategory', label: '产权归属' },
        { prop: 'capitalSource', label: '资金来源' },
        { prop: 'capitalChannel', label: '资金渠道' },
        { prop: 'economicUse', label: '经济用途' },
        { prop: 'functionRange', label: '功能范围' },
        { prop: 'projectCode', label: '项目编号' },
        { prop: 'subjectCategory', label: '科目分类' },
        { prop: 'depreciationSubject', label: '原值科目' },
        { prop: 'depreciationCostCenter', label: '折旧成本中心' },
        { prop: 'impairmentSubject', label: '减值科目' },
        { prop: 'depreciationExpenseSubject', label: '折旧费用科目' },
        { prop: 'depreciationCostSubject', label: '折旧科目' },
        { prop: 'impairmentLossSubject', label: '减值损失科目' },
        { prop: 'disposalLossSubject', label: '处置损失科目' },
        { prop: 'disposalSubject', label: '处置科目' },
        { prop: 'entryStatus', label: '入账状态' },
        { prop: 'entryDate', label: '入账日期' },
        { prop: 'foreignCurrencyCode', label: '外币编号' },
      ],
      layout: { column: 4, border: true },
    },
  ],
});

// ==================== 示例 10: 分组 + 自定义渲染 ====================
const attachmentData = ref({
  name: '合同文档',
  type: '采购合同',
  attachments: [
    { id: 1, type: '电子合同', name: '宣传文案.txt', status: '已确认' },
    { id: 2, type: '印章合同', name: '设计稿件.zip', status: '待审核' },
    { id: 3, type: 'EOA签批', name: '我是默认状态的附件.pdf', status: '已完成' },
  ],
});

const [GroupedWithCustomRender] = useDetailRender({
  formType: 'element',
  data: attachmentData.value,
  groups: [
    {
      title: '文档信息',
      columns: [
        { prop: 'name', label: '文档名称' },
        { prop: 'type', label: '文档类型' },
      ],
      layout: { column: 2, border: true },
    },
    {
      title: '附件信息',
      columns: [],
      render: data => (
        <table class="attachment-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>附件类型</th>
              <th>附件内容</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            {(data.attachments as any[]).map((item, index) => (
              <tr key={item.id}>
                <td>{String(index + 1).padStart(2, '0')}</td>
                <td>{item.type}</td>
                <td>{item.name}</td>
                <td>
                  <ElTag size="small" type={item.status === '已完成' ? 'success' : 'info'}>
                    {item.status}
                  </ElTag>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      ),
    },
  ],
});
</script>

<template>
  <div class="playground">
    <h1>useDetailRender Playground</h1>

    <!-- 示例 1: 基础用法 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 1: 基础用法</span>
          <span class="code-toggle" :class="{ active: codeVisible.example1 }" @click="toggleCode('example1')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <BasicDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example1" class="source-code">{{ sourceCode.example1 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 2: 不同布局样式 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 2: 不同布局样式</span>
          <span class="code-toggle" :class="{ active: codeVisible.example2 }" @click="toggleCode('example2')">
            <CodeIcon />
          </span>
        </div>
      </template>

      <h4>2.1 垂直布局 (direction: vertical)</h4>
      <VerticalDetail />

      <ElDivider />

      <h4>2.2 无边框 + 2列</h4>
      <NoBorderDetail />

      <ElDivider />

      <h4>2.3 单列布局 + 大尺寸</h4>
      <SingleColumnDetail />

      <ElDivider />

      <h4>2.4 小尺寸</h4>
      <SmallDetail />

      <ElCollapseTransition>
        <pre v-show="codeVisible.example2" class="source-code">{{ sourceCode.example2 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 3: 自定义渲染 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 3: 自定义渲染 (render / formatter / emptyText)</span>
          <span class="code-toggle" :class="{ active: codeVisible.example3 }" @click="toggleCode('example3')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <CustomRenderDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example3" class="source-code">{{ sourceCode.example3 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 4: 复用 Schema -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 4: 复用 FormSchema 自动生成</span>
          <span class="code-toggle" :class="{ active: codeVisible.example4 }" @click="toggleCode('example4')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <p class="tip">
        从表单的 LowCodeFormSchemaItem[] 自动提取 label，hidden 的字段会被过滤
      </p>
      <SchemaDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example4" class="source-code">{{ sourceCode.example4 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 5: 自定义组件 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 5: 自定义 Layout 和 Item 组件</span>
          <span class="code-toggle" :class="{ active: codeVisible.example5 }" @click="toggleCode('example5')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <p class="tip">
        通过 layout.component 和 item.component 完全自定义渲染
      </p>
      <CustomComponentDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example5" class="source-code">{{ sourceCode.example5 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 6: 动态数据更新 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 6: 动态数据更新</span>
          <div class="card-header-actions">
            <ElButton type="primary" size="small" @click="updateDynamicData">
              更新数据 (setData + refresh)
            </ElButton>
            <span class="code-toggle" :class="{ active: codeVisible.example6 }" @click="toggleCode('example6')">
              <CodeIcon />
            </span>
          </div>
        </div>
      </template>
      <DynamicDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example6" class="source-code">{{ sourceCode.example6 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 7: 多条数据循环 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 7: 多条数据循环 (v-for + :data)</span>
          <span class="code-toggle" :class="{ active: codeVisible.example7 }" @click="toggleCode('example7')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <div class="list-container">
        <div v-for="item in userList" :key="item.id" class="list-item">
          <ListItemDetail :data="item" />
        </div>
      </div>
      <ElCollapseTransition>
        <pre v-show="codeVisible.example7" class="source-code">{{ sourceCode.example7 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 8: Mobile 模式 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 8: Mobile 模式 (Vant 风格)</span>
          <span class="code-toggle" :class="{ active: codeVisible.example8 }" @click="toggleCode('example8')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <div class="mobile-preview">
        <MobileDetail />
      </div>
      <ElCollapseTransition>
        <pre v-show="codeVisible.example8" class="source-code">{{ sourceCode.example8 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 9: 分组模式 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 9: 分组模式 (groups)</span>
          <span class="code-toggle" :class="{ active: codeVisible.example9 }" @click="toggleCode('example9')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <p class="tip">
        使用 groups 配置实现分组展示，每个分组可以有独立的 layout 配置
      </p>
      <GroupedDetail />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example9" class="source-code">{{ sourceCode.example9 }}</pre>
      </ElCollapseTransition>
    </ElCard>

    <ElDivider />

    <!-- 示例 10: 分组 + 自定义渲染 -->
    <ElCard class="section">
      <template #header>
        <div class="card-header">
          <span>示例 10: 分组 + 自定义渲染 (render)</span>
          <span class="code-toggle" :class="{ active: codeVisible.example10 }" @click="toggleCode('example10')">
            <CodeIcon />
          </span>
        </div>
      </template>
      <p class="tip">
        分组可以通过 render 函数完全自定义渲染，适用于表格等特殊布局
      </p>
      <GroupedWithCustomRender />
      <ElCollapseTransition>
        <pre v-show="codeVisible.example10" class="source-code">{{ sourceCode.example10 }}</pre>
      </ElCollapseTransition>
    </ElCard>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  padding: 20px;
}

.playground {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 24px;
  color: #303133;
}

h4 {
  margin: 16px 0 12px;
  color: #606266;
  font-weight: 500;
}

.section {
  margin-bottom: 20px;
}

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

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tip {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #ecf5ff;
  border-radius: 4px;
  color: #409eff;
  font-size: 13px;
}

.mobile-preview {
  max-width: 375px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.list-item {
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}

.attachment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.attachment-table th,
.attachment-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.attachment-table th {
  background-color: #fafafa;
  font-weight: 500;
  color: #606266;
}

.attachment-table tbody tr:hover {
  background-color: #f5f7fa;
}

.code-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  color: #909399;
  transition: all 0.2s;
}

.code-toggle:hover {
  color: #409eff;
  background-color: #ecf5ff;
}

.code-toggle.active {
  color: #409eff;
  background-color: #ecf5ff;
}

.source-code {
  margin-top: 16px;
  padding: 16px;
  background-color: #1e1e1e;
  border-radius: 8px;
  color: #d4d4d4;
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
</style>
