<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon" style="background:#409EFF">
              <i class="el-icon-s-data"></i>
            </div>
            <div class="card-info">
              <span class="label">今日产量</span>
              <span class="value">1,234 件</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon" style="background:#67C23A">
              <i class="el-icon-s-check"></i>
            </div>
            <div class="card-info">
              <span class="label">良品率</span>
              <span class="value">98.5%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon" style="background:#E6A23C">
              <i class="el-icon-s-tools"></i>
            </div>
            <div class="card-info">
              <span class="label">设备利用率</span>
              <span class="value">85%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon" style="background:#F56C6C">
              <i class="el-icon-s-flag"></i>
            </div>
            <div class="card-info">
              <span class="label">异常数量</span>
              <span class="value">3 件</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card>
          <div slot="header" class="chart-title">生产趋势分析</div>
          <v-chart :options="lineChart" class="chart" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="chart-title">生产进度</div>
          <el-progress
            type="circle"
            :percentage="75"
            :stroke-width="10"
            status="success"
            class="progress-circle"/>
          <div class="progress-text">当前工单进度</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部设备状态 -->
    <el-row :gutter="20" class="status-row">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="chart-title">设备运行状态</div>
          <div class="equipment-status">
            <div
              v-for="(item, index) in equipmentList"
              :key="index"
              class="status-item">
              <i class="el-icon-s-platform" :style="{color: item.statusColor}"></i>
              <span>{{ item.name }}</span>
              <el-tag :type="item.statusType">{{ item.statusText }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
       polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      },
      equipmentList: [
        { name: 'CNC-001', statusText: '运行中', statusType: 'success', statusColor: '#67C23A' },
        { name: '注塑机-002', statusText: '待机', statusType: 'warning', statusColor: '#E6A23C' },
        { name: '组装线-003', statusText: '故障', statusType: 'danger', statusColor: '#F56C6C' },
        { name: '包装机-004', statusText: '维护', statusType: 'info', statusColor: '#909399' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .stat-card {
    margin-bottom: 20px;

    .card-content {
      display: flex;
      align-items: center;

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 24px;
          color: white;
        }
      }

      .card-info {
        margin-left: 15px;

        .label {
          display: block;
          color: #999;
          font-size: 14px;
        }

        .value {
          display: block;
          font-size: 24px;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }
  }

  .chart-row {
    margin-top: 20px;

    .chart {
      height: 400px;
    }

    .progress-circle {
      display: block;
      margin: 20px auto;
    }

    .progress-text {
      text-align: center;
      color: #666;
      font-size: 16px;
    }
  }

  .status-row {
    margin-top: 20px;

    .equipment-status {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;

      .status-item {
        display: flex;
        align-items: center;
        padding: 10px;
        background: #f8f8f8;
        border-radius: 4px;

        i {
          font-size: 24px;
          margin-right: 10px;
        }

        span {
          flex: 1;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
