<template>
  <div class="dashboard-panel" v-loading="loading">
    <!-- 项目统计 -->
    <div class="stat-section">
      <div class="section-title">项目统计</div>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project" :class="{'hover': hoveredCard === 'project-total'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-folder"></i>
              </div>
              <div class="card-label">合计项目</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.total || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project" :class="{'hover': hoveredCard === 'project-progress'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="card-label">进行中</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.inProgress || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project" :class="{'hover': hoveredCard === 'project-completed'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-check"></i>
              </div>
              <div class="card-label">已完成</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.completed || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project" :class="{'hover': hoveredCard === 'project-overdue'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="card-label">维护中</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.maintenance || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project warning" :class="{'hover': hoveredCard === 'project-overdue'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-warning"></i>
              </div>
              <div class="card-label">开发超期</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.developmentOverdue || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="4" :md="4" :lg="4">
          <div class="stat-card project warning" :class="{'hover': hoveredCard === 'project-overdue'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-warning"></i>
              </div>
              <div class="card-label">维护到期</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.project.maintenanceOverdue || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 任务统计 -->
    <div class="stat-section">
      <div class="section-title">任务统计</div>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card task" :class="{'hover': hoveredCard === 'task-total'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-tickets"></i>
              </div>
              <div class="card-label">总任务</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.task.total || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card task" :class="{'hover': hoveredCard === 'task-wait'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-timer"></i>
              </div>
              <div class="card-label">待完成</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.task.waitCompleted || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card task" :class="{'hover': hoveredCard === 'task-progress'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="card-label">进行中</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.task.inProgress || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card task" :class="{'hover': hoveredCard === 'task-confirm'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-document-checked"></i>
              </div>
              <div class="card-label">待确认</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.task.waitConfirm || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card task success" :class="{'hover': hoveredCard === 'task-completed'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-circle-check"></i>
              </div>
              <div class="card-label">已完成</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.task.completed || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 客户统计 -->
    <div class="stat-section">
      <div class="section-title">客户统计</div>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer" :class="{'hover': hoveredCard === 'customer-total'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-label">总客户</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.total || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer" :class="{'hover': hoveredCard === 'customer-today'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-date"></i>
              </div>
              <div class="card-label">今日新增</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.today || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer" :class="{'hover': hoveredCard === 'customer-potential'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="card-label">潜在客户</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.potential || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer" :class="{'hover': hoveredCard === 'customer-intention'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-star-on"></i>
              </div>
              <div class="card-label">意向客户</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.intention || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer success" :class="{'hover': hoveredCard === 'customer-transaction'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-shopping-cart-full"></i>
              </div>
              <div class="card-label">成交客户</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.transaction || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4" :lg="4">
          <div class="stat-card customer warning" :class="{'hover': hoveredCard === 'customer-invalid'}">
            <div class="card-header">
              <div class="card-icon">
                <i class="el-icon-close"></i>
              </div>
              <div class="card-label">失效客户</div>
            </div>
            <div class="card-value">
              <count-to :start-val="0" :end-val="data.customer.invalid || 0" :duration="2000" class="num"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import {getBrief} from "@/api/bst/dashboard";

export default {
  data() {
    return {
      loading: false,
      hoveredCard: '',
      data: {
        project: {},
        task: {},
        customer: {}
      }
    }
  },
  components: {
    CountTo
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true;
      getBrief().then(res => {
        this.data = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-panel {
  padding: 15px;
  
  .stat-section {
    margin-bottom: 20px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #1f2f3d;
      margin-bottom: 15px;
      padding-left: 8px;
      border-left: 3px solid #409EFF;
    }
    
    .stat-card {
      background: #fff;
      border-radius: 4px;
      padding: 10px;
      text-align: left;
      box-shadow: 0 1px 4px rgba(0,0,0,.1);
      transition: all .3s;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        opacity: 1;
        transition: opacity .3s;
      }

      &:hover::before {
        opacity: 1.2;
      }
      
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
        z-index: 1;

        .card-icon {
          margin-right: 6px;
          i {
            font-size: 16px;
          }
        }
        
        .card-label {
          font-size: 13px;
          color: #909399;
          flex: 1;
        }
      }
      
      .card-value {
        position: relative;
        z-index: 1;
        .num {
          font-size: 22px;
          font-weight: bold;
          color: #1f2f3d;
        }
      }
      
      &.project {
        border-top: 2px solid #8064ff;
        &::before {
          background: linear-gradient(135deg, rgba(128, 100, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%, rgba(128, 100, 255, 0.1) 100%);
        }
        .card-icon {
          color: #8064ff;
        }
      }
      
      &.task {
        border-top: 2px solid #ff9c6e;
        &::before {
          background: linear-gradient(135deg, rgba(255, 156, 110, 0.08) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 156, 110, 0.1) 100%);
        }
        .card-icon {
          color: #ff9c6e;
        }
      }
      
      &.customer {
        border-top: 2px solid #20c997;
        &::before {
          background: linear-gradient(135deg, rgba(32, 201, 151, 0.08) 0%, rgba(255, 255, 255, 0) 45%, rgba(32, 201, 151, 0.1) 100%);
        }
        .card-icon {
          color: #20c997;
        }
      }
      
      &.warning {
        border-top: 2px solid #ff4d4f;
        &::before {
          background: linear-gradient(135deg, rgba(255, 77, 79, 0.08) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 77, 79, 0.1) 100%);
        }
        .card-icon {
          color: #ff4d4f;
        }
      }
      
      &.success {
        border-top: 2px solid #52c41a;
        &::before {
          background: linear-gradient(135deg, rgba(82, 196, 26, 0.08) 0%, rgba(255, 255, 255, 0) 45%, rgba(82, 196, 26, 0.1) 100%);
        }
        .card-icon {
          color: #52c41a;
        }
      }
      
      &:hover, &.hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .dashboard-panel {
    padding: 10px;
    
    .stat-section {
      margin-bottom: 15px;
      
      .section-title {
        font-size: 14px;
        margin-bottom: 10px;
      }
      
      .stat-card {
        padding: 8px;
        
        .card-header {
          margin-bottom: 4px;
          
          .card-icon {
            i {
              font-size: 14px;
            }
          }
          
          .card-label {
            font-size: 12px;
          }
        }
        
        .card-value {
          .num {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
