<template>
  <div class="report-container">
    <div class="tabs-header">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="日" name="day" />
        <el-tab-pane label="月" name="month" />
        <el-tab-pane label="年" name="year" />
      </el-tabs>
      <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" />
    </div>

    <div class="summary-section">
      <h3 class="section-title">停机汇总</h3>
      <div class="summary-cards">
        <div class="summary-card">
          <div class="card-icon">⏱️</div>
          <div class="card-content">
            <span class="card-label">停机时间</span>
            <span class="card-value highlight">{{ summaryData.stopTime }}</span>
          </div>
        </div>
        <div class="summary-card">
          <div class="card-icon">🔄</div>
          <div class="card-content">
            <span class="card-label">停机次数</span>
            <span class="card-value">{{ summaryData.stopCount }}</span>
          </div>
        </div>
        <div class="summary-card">
          <div class="card-icon">📊</div>
          <div class="card-content">
            <span class="card-label">作业率</span>
            <span class="card-value highlight">{{ summaryData.rate }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="charts-section">
      <div class="chart-panel">
        <h3 class="section-title">班组停机分布</h3>
        <div ref="teamChartRef" class="chart-content"></div>
        <div class="chart-legend">
          <span class="legend-item"><span class="legend-dot active"></span> 停机</span>
          <span class="legend-item"><span class="legend-dot inactive"></span> 正常</span>
        </div>
      </div>
      <div class="chart-panel">
        <h3 class="section-title">停机类型分布</h3>
        <div ref="typeChartRef" class="chart-content"></div>
        <div class="chart-legend">
          <span class="legend-item"><span class="legend-dot type1"></span> 来料缺陷</span>
          <span class="legend-item"><span class="legend-dot type2"></span> 机械故障</span>
          <span class="legend-item"><span class="legend-dot type3"></span> 换辊</span>
        </div>
      </div>
    </div>

    <div class="table-section">
      <h3 class="section-title">停机详情</h3>
      <el-table :data="stopData" border :height="300">
        <el-table-column prop="timeRange" label="时间范围" width="200" />
        <el-table-column prop="duration" label="持续时间" width="120" />
        <el-table-column prop="team" label="机组" width="100" />
        <el-table-column prop="remark" label="备注" width="300" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const activeTab = ref('day')
const selectedDate = ref('2026-05-14')

const summaryData = ref({
  stopTime: '60 min',
  stopCount: '4次',
  rate: '95.83%'
})

const stopData = ref([
  { timeRange: '2026-05-14 13:22 - 2026-05-14 13:34', duration: '12min', team: 'MLL', remark: '带尾夹送断带' },
  { timeRange: '2026-05-14 12:47 - 2026-05-14 12:54', duration: '7min', team: 'MLL', remark: '处理表面缺陷' },
  { timeRange: '2026-05-14 10:27 - 2026-05-14 12:54', duration: '33min', team: 'MLL', remark: '开卷机故障' },
  { timeRange: '2026-05-14 10:27 - 2026-05-14 11:00', duration: '33min', team: 'MLL', remark: '换1-4机架辊,修4机架弯辊阀' },
  { timeRange: '2026-05-14 04:03 - 2026-05-14 04:11', duration: '8min', team: 'MLL', remark: '换辊' }
])

const teamChartRef = ref(null)
const typeChartRef = ref(null)

const initCharts = () => {
  if (teamChartRef.value) {
    const chart = echarts.init(teamChartRef.value)
    chart.setOption({
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '班组停机',
          type: 'pie',
          radius: ['50%', '75%'],
          center: ['50%', '50%'],
          data: [
            { value: 1, name: '停机', itemStyle: { color: '#409eff' } },
            { value: 0, name: '正常', itemStyle: { color: '#e4e7ed' } }
          ],
          label: { show: false },
          emphasis: {
            label: { show: true, fontSize: 24, fontWeight: 'bold' }
          }
        }
      ]
    })
  }

  if (typeChartRef.value) {
    const chart = echarts.init(typeChartRef.value)
    chart.setOption({
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '停机类型',
          type: 'pie',
          radius: ['50%', '75%'],
          center: ['50%', '50%'],
          data: [
            { value: 45, name: '来料缺陷', itemStyle: { color: '#409eff' } },
            { value: 35, name: '机械故障', itemStyle: { color: '#67c23a' } },
            { value: 20, name: '换辊', itemStyle: { color: '#e6a23c' } }
          ],
          label: { show: false },
          emphasis: {
            label: { show: true, fontSize: 18, fontWeight: 'bold' }
          }
        }
      ]
    })
  }
}

onMounted(() => {
  nextTick(() => {
    initCharts()
    window.addEventListener('resize', initCharts)
  })
})
</script>

<style lang="scss" scoped>
.report-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tabs-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  
  :deep(.el-tabs) {
    flex: 1;
    
    .el-tabs__header {
      margin: 0;
      border-bottom: 1px solid #e4e7ed;
    }
    
    .el-tabs__item {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    
    .el-tabs__item.is-active {
      color: #409eff;
    }
    
    .el-tabs__active-bar {
      background: #409eff;
    }
  }
}

.summary-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid #409eff;
}

.summary-cards {
  display: flex;
  gap: 16px;
}

.summary-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  
  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  
  .card-content {
    flex: 1;
    
    .card-label {
      display: block;
      font-size: 14px;
      color: #909399;
      margin-bottom: 4px;
    }
    
    .card-value {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
      
      &.highlight {
        color: #409eff;
      }
    }
  }
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.chart-panel {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
}

.chart-content {
  height: 200px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  
  &.active { background: #409eff; }
  &.inactive { background: #e4e7ed; }
  &.type1 { background: #409eff; }
  &.type2 { background: #67c23a; }
  &.type3 { background: #e6a23c; }
}

.table-section {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  
  :deep(.el-table) {
    --el-table-header-text-color: #606266;
    --el-table-row-hover-bg-color: #f5f7fa;
  }
}
</style>
