<template>
  <div class="design-system-demo">
    <!-- 页面头部 -->
    <div class="demo-header card">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold text-primary m-0">设计系统演示</h1>
          <p class="text-secondary mt-2 mb-0">展示新的设计令牌系统和 Element UI 主题覆盖效果</p>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-sm text-tertiary">主题切换：</span>
          <XtThemeToggle mode="segmented" :show-text="true" />
        </div>
      </div>
    </div>

    <!-- 颜色系统 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">颜色系统</h2>
        <p class="card__header-subtitle">主色调和语义化颜色展示</p>
      </div>
      <div class="card__content">
        <div class="color-grid">
          <!-- 主色系 -->
          <div class="color-group">
            <h4 class="font-medium mb-3">主色系</h4>
            <div class="color-swatches">
              <div class="color-swatch" v-for="shade in primaryShades" :key="shade.name">
                <div class="color-preview" :style="{ backgroundColor: `var(--color-primary-${shade.value})` }"></div>
                <div class="color-info">
                  <span class="color-name">{{ shade.name }}</span>
                  <code class="color-var">--color-primary-{{ shade.value }}</code>
                </div>
              </div>
            </div>
          </div>

          <!-- 语义化颜色 -->
          <div class="color-group">
            <h4 class="font-medium mb-3">语义化颜色</h4>
            <div class="semantic-colors">
              <div class="semantic-color" v-for="color in semanticColors" :key="color.name">
                <div class="color-preview" :style="{ backgroundColor: `var(--color-${color.value})` }"></div>
                <span class="color-label">{{ color.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮组件 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">按钮组件</h2>
        <p class="card__header-subtitle">不同类型和状态的按钮展示</p>
      </div>
      <div class="card__content">
        <div class="button-demo-grid">
          <!-- 按钮类型 -->
          <div class="button-group">
            <h4 class="font-medium mb-3">按钮类型</h4>
            <div class="flex flex-wrap gap-3">
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button>默认按钮</el-button>
              <el-button type="text">文本按钮</el-button>
            </div>
          </div>

          <!-- 按钮尺寸 -->
          <div class="button-group">
            <h4 class="font-medium mb-3">按钮尺寸</h4>
            <div class="flex flex-wrap items-center gap-3">
              <el-button type="primary" size="large">大型按钮</el-button>
              <el-button type="primary">默认按钮</el-button>
              <el-button type="primary" size="small">小型按钮</el-button>
              <el-button type="primary" size="mini">迷你按钮</el-button>
            </div>
          </div>

          <!-- 按钮状态 -->
          <div class="button-group">
            <h4 class="font-medium mb-3">按钮状态</h4>
            <div class="flex flex-wrap gap-3">
              <el-button type="primary">正常状态</el-button>
              <el-button type="primary" loading>加载状态</el-button>
              <el-button type="primary" disabled>禁用状态</el-button>
              <el-button type="primary" icon="el-icon-search">带图标</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单组件 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">表单组件</h2>
        <p class="card__header-subtitle">输入框、选择器等表单元素展示</p>
      </div>
      <div class="card__content">
        <el-form :model="demoForm" label-width="120px" class="demo-form">
          <div class="form-grid">
            <div class="form-column">
              <el-form-item label="普通输入框">
                <el-input v-model="demoForm.input" placeholder="请输入内容" />
              </el-form-item>
              
              <el-form-item label="密码输入框">
                <el-input v-model="demoForm.password" type="password" placeholder="请输入密码" show-password />
              </el-form-item>
              
              <el-form-item label="文本域">
                <el-input v-model="demoForm.textarea" type="textarea" :rows="3" placeholder="请输入多行文本" />
              </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="选择器">
                <el-select v-model="demoForm.select" placeholder="请选择">
                  <el-option label="选项一" value="option1" />
                  <el-option label="选项二" value="option2" />
                  <el-option label="选项三" value="option3" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="开关">
                <el-switch v-model="demoForm.switch" />
              </el-form-item>
              
              <el-form-item label="滑块">
                <el-slider v-model="demoForm.slider" :max="100" />
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 数据展示 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">数据展示</h2>
        <p class="card__header-subtitle">表格、标签、进度条等数据展示组件</p>
      </div>
      <div class="card__content">
        <!-- 表格 -->
        <div class="table-demo mb-6">
          <h4 class="font-medium mb-3">数据表格</h4>
          <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="position" label="职位" width="150" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '在线' ? 'success' : 'info'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="joinDate" label="入职日期" />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 标签和进度条 -->
        <div class="misc-demo">
          <div class="demo-row">
            <h4 class="font-medium mb-3">标签</h4>
            <div class="flex flex-wrap gap-2">
              <el-tag>默认标签</el-tag>
              <el-tag type="success">成功标签</el-tag>
              <el-tag type="warning">警告标签</el-tag>
              <el-tag type="danger">危险标签</el-tag>
              <el-tag type="info">信息标签</el-tag>
            </div>
          </div>

          <div class="demo-row">
            <h4 class="font-medium mb-3">进度条</h4>
            <div class="progress-demo">
              <el-progress :percentage="75" />
              <el-progress :percentage="60" status="success" />
              <el-progress :percentage="40" status="warning" />
              <el-progress :percentage="25" status="exception" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工具类展示 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">工具类展示</h2>
        <p class="card__header-subtitle">常用的 CSS 工具类效果展示</p>
      </div>
      <div class="card__content">
        <div class="utility-demo-grid">
          <!-- 间距工具类 -->
          <div class="utility-group">
            <h4 class="font-medium mb-3">间距工具类</h4>
            <div class="spacing-demo">
              <div class="spacing-item p-2 bg-primary text-white rounded">p-2</div>
              <div class="spacing-item p-4 bg-success text-white rounded">p-4</div>
              <div class="spacing-item p-6 bg-warning text-white rounded">p-6</div>
            </div>
          </div>

          <!-- 阴影工具类 -->
          <div class="utility-group">
            <h4 class="font-medium mb-3">阴影工具类</h4>
            <div class="shadow-demo">
              <div class="shadow-item shadow-sm p-4 bg-card rounded">shadow-sm</div>
              <div class="shadow-item shadow-md p-4 bg-card rounded">shadow-md</div>
              <div class="shadow-item shadow-lg p-4 bg-card rounded">shadow-lg</div>
              <div class="shadow-item shadow-xl p-4 bg-card rounded">shadow-xl</div>
            </div>
          </div>

          <!-- 文本工具类 -->
          <div class="utility-group">
            <h4 class="font-medium mb-3">文本工具类</h4>
            <div class="text-demo">
              <p class="text-primary">主要文本色</p>
              <p class="text-secondary">次要文本色</p>
              <p class="text-tertiary">第三文本色</p>
              <p class="text-success">成功文本色</p>
              <p class="text-warning">警告文本色</p>
              <p class="text-danger">危险文本色</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主题切换器展示 -->
    <div class="demo-section card">
      <div class="card__header">
        <h2 class="card__header-title">主题切换器</h2>
        <p class="card__header-subtitle">不同样式的主题切换组件</p>
      </div>
      <div class="card__content">
        <div class="theme-toggle-demo">
          <div class="toggle-group">
            <h4 class="font-medium mb-3">按钮模式</h4>
            <XtThemeToggle mode="button" :show-text="true" />
          </div>

          <div class="toggle-group">
            <h4 class="font-medium mb-3">选择器模式</h4>
            <XtThemeToggle mode="select" />
          </div>

          <div class="toggle-group">
            <h4 class="font-medium mb-3">分段控制器模式</h4>
            <XtThemeToggle mode="segmented" :show-text="true" />
          </div>

          <div class="toggle-group">
            <h4 class="font-medium mb-3">开关模式</h4>
            <XtThemeToggle mode="switch" :show-label="true" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XtThemeToggle from '@/components/XtThemeToggle'

export default {
  name: 'DesignSystemDemo',
  components: {
    XtThemeToggle
  },
  
  data() {
    return {
      demoForm: {
        input: '',
        password: '',
        textarea: '',
        select: '',
        switch: false,
        slider: 50
      },
      
      primaryShades: [
        { name: '50', value: '50' },
        { name: '100', value: '100' },
        { name: '200', value: '200' },
        { name: '300', value: '300' },
        { name: '400', value: '400' },
        { name: '500', value: '500' },
        { name: '600', value: '600' },
        { name: '700', value: '700' },
        { name: '800', value: '800' },
        { name: '900', value: '900' }
      ],
      
      semanticColors: [
        { name: '成功', value: 'success' },
        { name: '警告', value: 'warning' },
        { name: '危险', value: 'danger' },
        { name: '信息', value: 'primary' }
      ],
      
      tableData: [
        {
          name: '张三',
          position: '前端工程师',
          department: '技术部',
          status: '在线',
          joinDate: '2023-01-15'
        },
        {
          name: '李四',
          position: '后端工程师',
          department: '技术部',
          status: '离线',
          joinDate: '2023-02-20'
        },
        {
          name: '王五',
          position: 'UI设计师',
          department: '设计部',
          status: '在线',
          joinDate: '2023-03-10'
        },
        {
          name: '赵六',
          position: '产品经理',
          department: '产品部',
          status: '在线',
          joinDate: '2023-01-08'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.design-system-demo {
  padding: var(--spacing-6);
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-bg-secondary);
  min-height: 100vh;
}

.demo-header {
  margin-bottom: var(--spacing-6);
}

.demo-section {
  margin-bottom: var(--spacing-6);
}

// 颜色系统演示
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.color-group {
  .color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-3);
  }
  
  .color-swatch {
    text-align: center;
    
    .color-preview {
      height: 60px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-secondary);
      margin-bottom: var(--spacing-2);
    }
    
    .color-info {
      .color-name {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
        margin-bottom: var(--spacing-1);
      }
      
      .color-var {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        background: var(--color-bg-tertiary);
        padding: 2px 4px;
        border-radius: var(--radius-sm);
      }
    }
  }
}

.semantic-colors {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  
  .semantic-color {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    
    .color-preview {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-border-secondary);
    }
    
    .color-label {
      font-size: var(--font-size-sm);
      color: var(--color-text-primary);
    }
  }
}

// 按钮演示
.button-demo-grid {
  display: grid;
  gap: var(--spacing-6);
}

.button-group {
  padding: var(--spacing-4);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
}

// 表单演示
.demo-form {
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
}

// 表格演示
.table-demo {
  ::v-deep .el-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

// 杂项演示
.misc-demo {
  .demo-row {
    margin-bottom: var(--spacing-6);
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .progress-demo {
    display: grid;
    gap: var(--spacing-4);
    max-width: 400px;
  }
}

// 工具类演示
.utility-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
}

.utility-group {
  .spacing-demo {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    
    .spacing-item {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }
  }
  
  .shadow-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    
    .shadow-item {
      text-align: center;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
    }
  }
  
  .text-demo {
    p {
      margin-bottom: var(--spacing-2);
      font-weight: var(--font-weight-medium);
    }
  }
}

// 主题切换器演示
.theme-toggle-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-6);
  
  .toggle-group {
    padding: var(--spacing-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    text-align: center;
  }
}
</style>
