<template>
  <div>
    <div class="card">
      <div class="card-body" style="padding:10px 14px;">
        <div class="flex-row" style="flex-wrap:wrap;gap:12px;">
          <div class="flex-row">
            <span class="kv-label">计划/卷号</span>
            <input v-model="query.plan_no" class="kv-input" style="width:150px;" @keyup.enter="fetchData" />
          </div>
          <div class="flex-row">
            <span class="kv-label">操作</span>
            <select v-model="query.action" class="kv-input" style="width:120px;">
              <option value="">全部</option>
              <option v-for="a in actions" :key="a" :value="a">{{ a }}</option>
            </select>
          </div>
          <div class="flex-row">
            <span class="kv-label">操作人</span>
            <input v-model="query.operator" class="kv-input" style="width:120px;" @keyup.enter="fetchData" />
          </div>
          <div class="flex-row">
            <span class="kv-label">日期</span>
            <input v-model="query.start_date" type="date" class="kv-input" style="width:130px;" />
            <span class="kv-label">~</span>
            <input v-model="query.end_date" type="date" class="kv-input" style="width:130px;" />
          </div>
          <div class="flex-row">
            <button class="btn btn-primary" @click="fetchData">查询</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        计划日志
        <span class="ch-badge">共 {{ total }} 条</span>
      </div>
      <div class="table-scroll" v-loading="loading">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width:150px;">时间</th>
              <th>计划号</th>
              <th>冷卷号</th>
              <th style="width:90px;">操作</th>
              <th style="width:160px;">状态变化</th>
              <th>位置</th>
              <th style="width:100px;">操作人</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in tableData" :key="row.id">
              <td class="td-muted">{{ fmtTime(row.created_at) }}</td>
              <td class="td-num">{{ row.plan_no || '—' }}</td>
              <td class="td-num">{{ row.coil_no || '—' }}</td>
              <td><span :class="['badge', actionBadge(row.action)]">{{ row.action || '—' }}</span></td>
              <td>
                <span v-if="row.from_status || row.to_status">
                  <span class="td-muted">{{ statusLabel(row.from_status) }}</span>
                  →
                  <b style="color:var(--sms-teal);">{{ statusLabel(row.to_status) }}</b>
                </span>
                <span v-else class="td-muted">—</span>
              </td>
              <td>{{ row.position || '—' }}</td>
              <td>{{ row.operator || '—' }}</td>
              <td class="td-muted">{{ row.detail || '—' }}</td>
            </tr>
            <tr v-if="!tableData.length && !loading">
              <td colspan="8" class="td-muted" style="text-align:center;padding:24px;">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlanLogs } from '@/api'

const STATUS_LABEL = { ready: '准备好', online: '在线', producing: '生产中', produced: '生产完成' }
const ACTION_BADGE = { '新增': 'badge-gray', '移动': 'badge-blue', '投入生产': 'badge-yellow', '生产完成': 'badge-green', '删除': 'badge-red' }

export default {
  name: 'LogManagement',
  data() {
    return {
      loading: false,
      tableData: [], total: 0,
      actions: ['新增', '移动', '投入生产', '生产完成', '删除'],
      query: { page: 1, page_size: 100, plan_no: '', action: '', operator: '', start_date: '', end_date: '' },
      timer: null,
    }
  },
  created() {
    this.fetchData()
    this.timer = setInterval(this.fetchData, 8000)
  },
  beforeDestroy() { clearInterval(this.timer) },
  methods: {
    async fetchData() {
      this.loading = true
      const p = { page: this.query.page, page_size: this.query.page_size }
      if (this.query.plan_no) p.plan_no = this.query.plan_no
      if (this.query.action) p.action = this.query.action
      if (this.query.operator) p.operator = this.query.operator
      if (this.query.start_date) p.start_date = this.query.start_date + 'T00:00:00'
      if (this.query.end_date) p.end_date = this.query.end_date + 'T23:59:59'
      try {
        const res = await getPlanLogs(p)
        this.tableData = res.data.items || []
        this.total = res.data.total
      } finally { this.loading = false }
    },
    fmtTime(t) { return t ? t.slice(0, 19).replace('T', ' ') : '—' },
    statusLabel(s) { return STATUS_LABEL[s] || s || '' },
    actionBadge(a) { return ACTION_BADGE[a] || 'badge-gray' },
  },
}
</script>
