<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title=""
    width="calc(100vw - 40px)"
    :style="{ maxWidth: '1400px' }"
    top="3vh"
    destroy-on-close
    class="count-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <span class="title-text">中速纸杯机24号机 计数明细</span>
        <span class="query-label">查询方式：</span>
        <div class="header-center">
          <el-radio-group v-model="queryMode" size="small">
            <el-radio-button value="day">日查询</el-radio-button>
            <el-radio-button value="week">周查询</el-radio-button>
            <el-radio-button value="month">月查询</el-radio-button>
          </el-radio-group>
          <el-date-picker v-model="dateRange" type="daterange" size="small" range-separator="-"
            start-placeholder="2026-04-21" end-placeholder="2026-04-28" style="width: 240px; margin-left: 8px;" />
        </div>
        <div class="header-right">
        </div>
      </div>
    </template>

    <div class="count-body">
      <!-- 折线图 -->
      <div class="chart-section">
        <svg viewBox="0 0 900 250" xmlns="http://www.w3.org/2000/svg">
          <!-- Y轴 -->
          <g font-size="11" fill="#999" text-anchor="end">
            <text x="35" y="215">0</text>
            <text x="35" y="175">0.2</text>
            <text x="35" y="135">0.4</text>
            <text x="35" y="95">0.6</text>
            <text x="35" y="55">0.8</text>
            <text x="35" y="18">1</text>
          </g>
          <!-- 网格横线 -->
          <g stroke="#f0f0f0" stroke-width="1">
            <line x1="45" y1="213" x2="880" y2="213"/>
            <line x1="45" y1="173" x2="880" y2="173"/>
            <line x1="45" y1="133" x2="880" y2="133"/>
            <line x1="45" y1="93" x2="880" y2="93"/>
            <line x1="45" y1="53" x2="880" y2="53"/>
            <line x1="45" y1="16" x2="880" y2="16"/>
          </g>
          <!-- X轴日期 -->
          <g font-size="11" fill="#666" text-anchor="middle">
            <text x="105" y="235">2026-04-21</text>
            <text x="225" y="235">2026-04-22</text>
            <text x="345" y="235">2026-04-23</text>
            <text x="465" y="235">2026-04-24</text>
            <text x="585" y="235">2026-04-25</text>
            <text x="705" y="235">2026-04-26</text>
            <text x="825" y="235">2026-04-27</text>
          </g>
          <!-- 数据点（全部为0） -->
          <g fill="#409eff">
            <circle cx="105" cy="213" r="3"/><text x="105" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="225" cy="213" r="3"/><text x="225" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="345" cy="213" r="3"/><text x="345" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="465" cy="213" r="3"/><text x="465" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="585" cy="213" r="3"/><text x="585" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="705" cy="213" r="3"/><text x="705" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
            <circle cx="825" cy="213" r="3"/><text x="825" y="205" text-anchor="middle" font-size="11" fill="#409eff">0</text>
          </g>
          <!-- 连接线 -->
          <polyline points="105,213 225,213 345,213 465,213 585,213 705,213 825,213"
            fill="none" stroke="#409eff" stroke-width="2"/>
          <!-- 坐标轴线 -->
          <line x1="45" y1="213" x2="880" y2="213" stroke="#ccc" stroke-width="1"/>
        </svg>
      </div>

      <!-- 表格 -->
      <div class="table-section">
        <el-table :data="[]" size="small" stripe border style="width: 100%; font-size: 12px;" empty-text="暂无数据">
          <el-table-column prop="date" label="日期" width="140" align="center" />
          <el-table-column prop="totalCount" label="总个数" align="center" />
          <el-table-column prop="lightOnDuration" label="亮灯时长" align="center" />
          <el-table-column prop="avgDuration" label="平均时长" align="center" />
          <el-table-column prop="maxDuration" label="理论时长" align="center" />
          <el-table-column prop="efficiency" label="生产效率" align="center" />
          <el-table-column prop="detail" label="详情" align="center" />
          <el-table-column prop="remark" label="备注" align="center" />
        </el-table>
        <div class="empty-hint">暂无数据</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

defineProps({ visible: Boolean, device: Object })
defineEmits(['update:visible'])
const queryMode = ref('day')
const dateRange = ref(null)
</script>

<style scoped>
.count-dialog :deep(.el-dialog) {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.count-dialog :deep(.el-dialog__header) {
  padding: 10px 20px;
  border-bottom: 1px solid #e8e8e8;
  margin: 0;
  flex-shrink: 0;
}
.count-dialog :deep(.el-dialog__body) {
  overflow-y: auto;
  flex: 1;
}
.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.title-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}
.query-label {
  font-size: 13px;
  color: #666;
}
.header-center {
  display: flex;
  align-items: center;
  flex: 1;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-body {
  padding: 0;
}
.chart-section {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.chart-section svg {
  width: 100%;
  height: auto;
  display: block;
}

.table-section {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}
.empty-hint {
  text-align: center;
  padding: 30px;
  color: #999;
  font-size: 13px;
}
</style>