<template>
  <div class="dashboard-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="hover">
        <div class="welcome-content">
          <div class="welcome-text">
            <h1 class="company-name">超脑智子测试版</h1>
            <p class="company-slogan">用人工智能科技为各行业提供解决方案</p>
            <p class="company-desc">集互联网零售、人工智能和信息咨询于一体的互联网公司</p>
          </div>
          <div class="welcome-icon">
            <i class="el-icon-s-platform"></i>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 核心业务卡片 -->
    <el-row :gutter="20" class="business-section">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="business-card retail" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
          <div class="card-content">
            <h3>互联网销售</h3>
            <p>严选品牌，甄选好物</p>
            <el-tag size="small" type="success">零售业务</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="business-card ai" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-cpu"></i>
          </div>
          <div class="card-content">
            <h3>人工智能</h3>
            <p>自研智能科技模型，赋能增效</p>
            <el-tag size="small" type="primary">核心技术</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="business-card consult" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-data-analysis"></i>
          </div>
          <div class="card-content">
            <h3>企业咨询</h3>
            <p>AI与大数据融合，提供专业解决方案</p>
            <el-tag size="small" type="warning">咨询服务</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 优势特色 -->
    <el-row :gutter="20" class="feature-section">
      <el-col :xs="24" :md="12">
        <el-card class="feature-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-medal"></i>
            <span>严选标准</span>
          </div>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>好商品 - 精选优质供应商</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>好品质 - 严格质量把控</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>好价格 - 极具竞争力价格</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>好服务 - 完善售后体系</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :md="12">
        <el-card class="feature-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-magic-stick"></i>
            <span>科技赋能</span>
          </div>
          <div class="tech-content">
            <div class="tech-highlight">
              <div class="tech-number">AI+</div>
              <div class="tech-desc">
                <p>智能科技+大数据赋能增效</p>
                <p class="sub-text">更高效，更懂你</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 入驻流程 -->
    <el-card class="process-card" shadow="never">
      <div slot="header">
        <i class="el-icon-s-operation"></i>
        <span>供应链选及招商流程</span>
      </div>
      <el-steps :active="4" align-center finish-status="success">
        <el-step title="商家入驻" description="商家注册入驻，资质和商品提报"></el-step>
        <el-step title="资质初审" description="审核资质及商品信息"></el-step>
        <el-step title="结果反馈" description="3个工作日内反馈结果"></el-step>
        <el-step title="洽谈推广" description="详细洽谈并安排推广"></el-step>
      </el-steps>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .welcome-section {
    margin-bottom: 20px;

    .welcome-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      border: none;

      ::v-deep .el-card__body {
        padding: 30px;
      }

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

        .welcome-text {
          .company-name {
            font-size: 36px;
            font-weight: bold;
            margin: 0 0 10px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
          }

          .company-slogan {
            font-size: 18px;
            margin: 0 0 10px 0;
            opacity: 0.95;
          }

          .company-desc {
            font-size: 14px;
            margin: 0;
            opacity: 0.8;
          }
        }

        .welcome-icon {
          font-size: 80px;
          opacity: 0.3;
        }
      }
    }
  }

  .business-section {
    margin-bottom: 20px;

    .business-card {
      height: 160px;
      display: flex;
      align-items: center;
      transition: all 0.3s;
      margin-bottom: 20px;

      &:hover {
        transform: translateY(-5px);
      }

      .card-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        margin-right: 20px;
        color: #fff;
      }

      .card-content {
        flex: 1;

        h3 {
          margin: 0 0 10px 0;
          font-size: 18px;
          color: #303133;
        }

        p {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #606266;
        }
      }

      &.retail .card-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      &.ai .card-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.consult .card-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
  }

  .feature-section {
    margin-bottom: 20px;

    .feature-card {
      height: 100%;

      .card-header {
        font-weight: bold;
        font-size: 16px;

        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }

      .feature-list {
        .feature-item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid #ebeef5;

          &:last-child {
            border-bottom: none;
          }

          i {
            color: #67C23A;
            margin-right: 10px;
            font-size: 16px;
          }

          span {
            color: #606266;
            font-size: 14px;
          }
        }
      }

      .tech-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100% - 60px);

        .tech-highlight {
          display: flex;
          align-items: center;
          gap: 20px;

          .tech-number {
            font-size: 48px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .tech-desc {
            p {
              margin: 0;
              font-size: 16px;
              color: #303133;
              font-weight: 500;

              &.sub-text {
                font-size: 14px;
                color: #909399;
                margin-top: 5px;
              }
            }
          }
        }
      }
    }
  }

  .process-card {
    ::v-deep .el-card__header {
      font-weight: bold;
      font-size: 16px;

      i {
        margin-right: 8px;
        color: #409EFF;
      }
    }

    ::v-deep .el-step__title {
      font-size: 14px;
    }

    ::v-deep .el-step__description {
      font-size: 12px;
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .dashboard-container {
    .welcome-section .welcome-card .welcome-content {
      flex-direction: column;
      text-align: center;

      .welcome-icon {
        display: none;
      }
    }

    .business-section .business-card {
      flex-direction: column;
      height: auto;
      text-align: center;
      padding: 20px;

      .card-icon {
        margin-right: 0;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
