<template>
  <div :class="'theme-' + theme">
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-blue" @click="handleSetLineChartData('students')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            学员总数
          </div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.students" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-purple" @click="handleSetLineChartData('organizations')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="education" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">机构</div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.organizations" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-orange" @click="handleSetLineChartData('projects')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="component" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">项目总数</div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.projects" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-green" @click="handleSetLineChartData('coupons')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            优惠券发放
          </div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.coupons" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-red" @click="handleSetLineChartData('projects')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="list" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">已发布项目&活动</div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.projects_active" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-yellow" @click="handleSetLineChartData('coupons')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="tab" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">轮播图</div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.banners_active" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel card-panel-pink" @click="handleSetLineChartData('coupons')">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="star" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">精彩视频</div>
          <div class="card-panel-num">
            <count-to :start-val="0" :end-val="panelData.showcases_active" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'

export default {
  components: {
    CountTo
  },
  computed: {
    ...mapGetters([
      'theme'
    ])
  },
  props: {
    panelData: {
      type: Object,
      required: true,
      default: () => {
        return {
          students: 0,
          organizations: 0,
          projects: 0,
          coupons: 0,
          projects_active: 0,
          banners_active: 0,
          showcases_active: 0
        }
      }
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    padding: 0 24px;
    
    .card-panel-icon-wrapper {
      float: none;
      margin: 0;
      padding: 12px;
      transition: all 0.38s ease-out;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
    }

    .card-panel-icon {
      float: left;
      font-size: 32px;
    }

    .card-panel-description {
      float: none;
      font-weight: bold;
      margin: 0;
      margin-left: 20px;
      flex: 1;
      text-align: left;

      .card-panel-text {
        line-height: 18px;
        font-size: 16px;
        margin-bottom: 8px;
      }

      .card-panel-num {
        font-size: 24px;
        font-weight: 600;
      }
    }
  }
}

/* Theme: Dark (Original Styles) */
.theme-dark {
  .card-panel {
    color: #fff;
    background-color: rgba(255, 250, 240, 0.1); /* 半透明米白色 */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);

    &:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
      background-color: rgba(255, 250, 240, 0.15);
      
      .card-panel-icon-wrapper {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.2);
      }
    }

    .card-panel-icon-wrapper {
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease-out;
    }

    .card-panel-icon {
      font-size: 32px;
      fill: currentColor !important;
    }

    .card-panel-text {
      color: rgba(255, 255, 255, 0.85);
    }
    .card-panel-num {
      color: #fff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Colors for icons in Dark Mode (since background is now uniform) */
    &.card-panel-blue {
      .card-panel-icon { color: #4facfe; }
      .card-panel-icon-wrapper { color: #4facfe; }
    }
    &.card-panel-purple {
      .card-panel-icon { color: #8fd3f4; } /* Lighter purple for dark mode visibility */
      .card-panel-icon-wrapper { color: #8fd3f4; }
    }
    &.card-panel-orange {
      .card-panel-icon { color: #ff9a9e; }
      .card-panel-icon-wrapper { color: #ff9a9e; }
    }
    &.card-panel-green {
      .card-panel-icon { color: #43e97b; }
      .card-panel-icon-wrapper { color: #43e97b; }
    }
    &.card-panel-red {
      .card-panel-icon { color: #fa709a; }
      .card-panel-icon-wrapper { color: #fa709a; }
    }
    &.card-panel-yellow {
      .card-panel-icon { color: #fbc2eb; }
      .card-panel-icon-wrapper { color: #fbc2eb; }
    }
    &.card-panel-pink {
      .card-panel-icon { color: #ff0844; }
      .card-panel-icon-wrapper { color: #ff0844; }
    }
  }
}

/* Theme: Light & Orange */
.theme-light, .theme-orange {
  .card-panel {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08); /* 更柔和的阴影 */
    border: 1px solid #e6ebf5; /* 增加边框 */
    color: #666;
    
    &:hover {
      box-shadow: 0 4px 12px 0 rgba(0,0,0,.1);
      border-color: #dcdfe6;
      .card-panel-icon-wrapper {
        color: #fff;
      }
    }
    
    .card-panel-icon-wrapper {
      background: #f0f2f5; /* 稍微深一点的背景 */
      transition: all 0.3s ease-out;
    }
    
    .card-panel-icon {
      font-size: 32px;
      fill: currentColor !important;
    }

    .card-panel-text {
      color: rgba(0, 0, 0, 0.65); /* 加深文字颜色 */
      font-weight: bold;
    }
    .card-panel-num {
      color: #333; /* 加深数字颜色 */
    }
    
    /* Specific Colors */
    &.card-panel-blue {
      .card-panel-icon { color: #36a3f7; }
      .card-panel-icon-wrapper { color: #e6f7ff; background: #e6f7ff; } /* 浅蓝背景 */
      &:hover .card-panel-icon-wrapper { background: #36a3f7; }
    }
    &.card-panel-purple {
      .card-panel-icon { color: #667eea; }
      .card-panel-icon-wrapper { color: #f2f6fc; background: #f2f6fc; }
      &:hover .card-panel-icon-wrapper { background: #667eea; }
    }
    &.card-panel-orange {
      .card-panel-icon { color: #f5576c; }
      .card-panel-icon-wrapper { color: #fef0f0; background: #fef0f0; }
      &:hover .card-panel-icon-wrapper { background: #f5576c; }
    }
    &.card-panel-green {
      .card-panel-icon { color: #38f9d7; }
      .card-panel-icon-wrapper { color: #f0f9eb; background: #f0f9eb; }
      &:hover .card-panel-icon-wrapper { background: #38f9d7; }
    }
    &.card-panel-red {
      .card-panel-icon { color: #fa709a; }
      .card-panel-icon-wrapper { color: #fef0f0; background: #fef0f0; }
      &:hover .card-panel-icon-wrapper { background: #fa709a; }
    }
    &.card-panel-yellow {
      .card-panel-icon { color: #fbc2eb; }
      .card-panel-icon-wrapper { color: #fdf6ec; background: #fdf6ec; }
      &:hover .card-panel-icon-wrapper { background: #fbc2eb; }
    }
    &.card-panel-pink {
      .card-panel-icon { color: #ff0844; }
      .card-panel-icon-wrapper { color: #fef0f0; background: #fef0f0; }
      &:hover .card-panel-icon-wrapper { background: #ff0844; }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: block;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
