<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:table-list" />
        </span>
        <span>产线任务看板</span>
      </div>
      <div class="legend-inline">
        <span class="tag">实时刷新 · 滚动展示</span>
        <span class="dot" style="background: var(--green);"></span> 已完成
        <span class="dot" style="background: var(--warn);"></span> 进度偏低
      </div>
    </div>
    <div class="card-body">
      <div class="table-shell">
        <table class="task-table">
          <thead>
            <tr>
              <th>产线名称</th>
              <th>计划单</th>
              <th>产品名称</th>
              <th>计划数量</th>
              <th>完工数量</th>
              <th>合格率</th>
            </tr>
          </thead>
          <tbody ref="tbodyRef">
            <tr v-for="(r, index) in tasks" :key="index">
              <td>{{ r.feedingPipelineName }}</td>
              <td :style="{ color: colors.cyan }">{{ r.code }}</td>
              <td :title="r.productName">{{ r.productName }}</td>
              <td>{{ r.planNumber }}</td>
              <td>{{ r.wangongNumber }}</td>
              <td>
                <div style="display:flex; flex-direction:column; gap:4px; align-items:center;">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: getRate(r) + '%', background: getRateColor(r) }"></div>
                  </div>
                  <span :style="{ color: getRateColor(r), fontWeight: 700 }">{{ r.passRate }}%</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { PlanApi, PlanVO } from '@/api/mes/plan'

const route = useRoute()
const orgId = route.query.orgId

const colors = {
  blue: '#1e90ff',
  cyan: '#22d3ee',
  green: '#22c55e',
  purple: '#8b5cf6',
  warn: '#f59e0b',
  danger: '#ef4444'
}

const tasks = ref<PlanVO[]>([])

const getRate = (r: any) => Math.round((r.done / r.plan) * 100)

const getRateColor = (r: any) => {
  const rate = getRate(r)
  if (rate < 50) return colors.danger
  else if (rate < 90) return colors.warn
  return colors.green
}

const tbodyRef = ref<HTMLElement | null>(null)
let scrollTimer: number | undefined

const setBodyHeight = () => {
  if (!tbodyRef.value) return
  // Wait for render
  setTimeout(() => {
    if (!tbodyRef.value) return
    const sample = tbodyRef.value.querySelector('tr') as HTMLElement | null
    const rh = sample ? sample.getBoundingClientRect().height : 40
    tbodyRef.value.style.height = `${Math.round(rh * 6)}px`
  }, 100)
}

const startScroll = () => {
  scrollTimer = window.setInterval(() => {
    if (!tbodyRef.value) return
    const first = tbodyRef.value.firstElementChild as HTMLElement | null
    if (!first) return
    first.style.transition = 'all 0.35s'
    first.style.transform = 'translateY(-48px)'
    first.style.opacity = '0'
    window.setTimeout(() => {
      if (!tbodyRef.value) return
      first.style.transition = 'none'
      first.style.transform = 'translateY(0)'
      first.style.opacity = '1'
      tbodyRef.value.appendChild(first)
    }, 360)
  }, 5000)
}

onMounted(async () => {
  setBodyHeight()
  startScroll()
  window.addEventListener('resize', setBodyHeight)
  tasks.value = await PlanApi.getProductPlans({ orgId })
  // console.log(tasks.value)
})

onUnmounted(() => {
  if (scrollTimer) clearInterval(scrollTimer)
  window.removeEventListener('resize', setBodyHeight)
})
</script>

<style scoped>
.card {
  position: relative;
  display: flex;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
  border: 1px solid rgb(30 64 175 / 85%);
  border-radius: 10px;
  box-shadow:
    0 18px 45px rgb(15 23 42 / 95%),
    0 0 0 1px rgb(15 23 42 / 100%),
    inset 0 0 0 1px rgb(56 189 248 / 5%);
  flex-direction: column;
}

.card::before,
.card::after {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border: 1px solid rgb(56 189 248 / 75%);
  border-radius: 2px;
  content: "";
  opacity: 0.6;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-top: none;
  border-left: none;
}

.card-header {
  display: flex;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgb(41 54 95 / 90%);
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.legend-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #94a3b8;
}

.tag {
  padding: 2px 6px;
  font-size: 10px;
  color: #94a3b8;
  border: 1px solid rgb(148 163 184 / 40%);
  border-radius: 999px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Scoped styles specific to this component but we expect common styles from parent */
.table-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.task-table {
  width: 100%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0 5px;
  table-layout: fixed;
}

.task-table thead {
  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 18%), transparent 70%);
}

.task-table thead th {
  padding: 6px 4px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  border-bottom: 1px solid rgb(51 65 85 / 90%);
}

.task-table tbody {
  display: block;
  width: 100%;
  overflow: hidden;
}

.task-table thead tr,
.task-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.task-table tbody td {
  padding: 6px 4px;
  color: var(--text);
  text-align: center;
  background: rgb(15 23 42 / 88%);
  border: 1px solid rgb(30 64 175 / 70%);
  border-radius: 4px;
}

.task-table tbody tr:nth-child(even) td {
  background: rgb(15 23 42 / 96%);
}

.task-table tbody tr:hover td {
  border-color: rgb(56 189 248 / 95%);
  box-shadow: 0 0 14px rgb(56 189 248 / 45%);
}

.progress-bar {
  height: 6px;
  overflow: hidden;
  background: rgb(15 23 42 / 100%);
  border: 1px solid rgb(148 163 184 / 45%);
  border-radius: 999px;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
</style>
