<template>
  <div class="cost-page">
    <!-- 成本项切换 -->
    <div class="card">
      <div class="card-body" style="padding:8px 12px;">
        <div class="item-tabs">
          <span
            v-for="it in items"
            :key="it.item"
            :class="['item-tab', { active: it.item === curItem }]"
            @click="selectItem(it.item)"
          >{{ it.item_name }}</span>
        </div>
      </div>
    </div>

    <!-- 图表 + 记录表 -->
    <div class="cost-main">
      <div class="card chart-card">
        <div class="card-header">{{ curMeta.item_name }}耗量统计</div>
        <div class="card-body">
          <v-chart v-if="records.length" class="cost-chart" :option="chartOption" autoresize />
          <div v-else class="empty-tip">暂无数据，请调整时间范围或点击「新增」录入</div>
        </div>
      </div>

      <div class="card table-card">
        <div class="card-header">记录明细 <span class="ch-badge">{{ records.length }} 条</span></div>
        <div class="table-scroll" style="max-height:420px;">
          <table class="data-table compact">
            <thead>
              <tr>
                <th>A班量</th><th>B班量</th><th>吨耗量</th><th>记录时间</th><th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="r in recordsDesc" :key="r.id">
                <td class="td-num td-ok">{{ fmt(r.shift_a) }}</td>
                <td class="td-num td-warn">{{ fmt(r.shift_b) }}</td>
                <td class="td-num">{{ fmt(r.unit_cost) }}</td>
                <td class="td-muted">{{ fmtTime(r.record_date) }}</td>
                <td>
                  <span class="action-link" @click="openDialog(r)">编辑</span>
                  <span class="action-link del" @click="remove(r)">删除</span>
                </td>
              </tr>
              <tr v-if="!records.length">
                <td colspan="5" class="td-muted" style="text-align:center;padding:14px;">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </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.start_date" type="date" class="kv-input" style="width:150px;" />
          </div>
          <div class="flex-row">
            <span class="kv-label">结束时间</span>
            <input v-model="query.end_date" type="date" class="kv-input" style="width:150px;" />
          </div>
          <div class="flex-row" style="margin-left:auto;gap:8px;">
            <button class="btn btn-primary" @click="fetchData">查找</button>
            <button class="btn btn-outline" @click="openDialog()">＋ 新增</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑 -->
    <div v-if="dialogVisible" class="modal-mask" @click.self="dialogVisible=false">
      <div class="modal-box" style="width:420px;">
        <div class="modal-header">
          {{ editRow ? '编辑' : '新增' }}{{ curMeta.item_name }}记录
          <span class="modal-close" @click="dialogVisible=false">✕</span>
        </div>
        <div class="modal-body">
          <div class="form-field">
            <div class="kv-label">记录时间 *</div>
            <input v-model="form.record_date" type="datetime-local" class="kv-input" />
          </div>
          <div class="grid-2" style="gap:12px;margin-top:10px;">
            <div class="form-field">
              <div class="kv-label">A班量 ({{ curMeta.unit }})</div>
              <input v-model.number="form.shift_a" type="number" step="0.01" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">B班量 ({{ curMeta.unit }})</div>
              <input v-model.number="form.shift_b" type="number" step="0.01" class="kv-input" />
            </div>
          </div>
          <div class="form-field" style="margin-top:10px;">
            <div class="kv-label">吨耗量 ({{ curMeta.unit_cost_label }})</div>
            <input v-model.number="form.unit_cost" type="number" step="0.001" class="kv-input" />
          </div>
          <div class="form-field" style="margin-top:10px;">
            <div class="kv-label">备注</div>
            <input v-model="form.remark" class="kv-input" />
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="dialogVisible=false">取消</button>
          <button class="btn btn-primary" :disabled="saving" @click="save">{{ saving ? '保存中...' : '保存' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { getCostItems, getCostRecords, createCostRecord, updateCostRecord, deleteCostRecord } from '@/api'

use([CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])

export default {
  name: 'CostManagement',
  components: { VChart },
  data() {
    return {
      items: [], curItem: '',
      records: [],
      query: { start_date: '', end_date: '' },
      dialogVisible: false, editRow: null, saving: false,
      form: this.emptyForm(),
    }
  },
  computed: {
    curMeta() { return this.items.find(x => x.item === this.curItem) || { item_name: '', unit: '', unit_cost_label: '' } },
    recordsDesc() { return [...this.records].slice().reverse() },
    chartOption() {
      const dates = this.records.map(r => this.fmtDay(r.record_date))
      const meta = this.curMeta
      return {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['A班耗量', 'B班耗量', '吨耗量'], top: 4, textStyle: { color: '#606266' } },
        grid: { left: 50, right: 56, top: 40, bottom: 40 },
        xAxis: [{ type: 'category', data: dates, axisLabel: { color: '#909399' }, axisLine: { lineStyle: { color: '#dcdfe6' } } }],
        yAxis: [
          { type: 'value', name: `耗量 ${meta.unit}`, nameTextStyle: { color: '#909399' }, axisLabel: { color: '#909399' }, splitLine: { lineStyle: { color: '#ebeef5' } } },
          { type: 'value', name: `吨耗 ${meta.unit_cost_label}`, nameTextStyle: { color: '#909399' }, axisLabel: { color: '#909399' }, splitLine: { show: false } },
        ],
        series: [
          { name: 'A班耗量', type: 'bar', data: this.records.map(r => r.shift_a), itemStyle: { color: '#67C23A' }, barMaxWidth: 22 },
          { name: 'B班耗量', type: 'bar', data: this.records.map(r => r.shift_b), itemStyle: { color: '#E6A23C' }, barMaxWidth: 22 },
          { name: '吨耗量', type: 'line', yAxisIndex: 1, data: this.records.map(r => r.unit_cost), itemStyle: { color: '#C03639' }, lineStyle: { color: '#C03639', width: 2 }, symbol: 'circle', symbolSize: 7 },
        ],
      }
    },
  },
  async created() {
    await this.fetchItems()
    const today = new Date()
    const past = new Date(today.getTime() - 7 * 86400000)
    this.query.start_date = this.toDay(past)
    this.query.end_date = this.toDay(today)
    this.fetchData()
  },
  methods: {
    emptyForm() { return { record_date: '', shift_a: null, shift_b: null, unit_cost: null, remark: '' } },
    async fetchItems() {
      try {
        const res = await getCostItems()
        this.items = res.data || []
        if (this.items.length && !this.curItem) this.curItem = this.items[0].item
      } catch (e) { /* ignore */ }
    },
    selectItem(item) { this.curItem = item; this.fetchData() },
    async fetchData() {
      const params = { item: this.curItem }
      if (this.query.start_date) params.start_date = this.query.start_date + 'T00:00:00'
      if (this.query.end_date) params.end_date = this.query.end_date + 'T23:59:59'
      try {
        const res = await getCostRecords(params)
        this.records = res.data || []
      } catch (e) { /* ignore */ }
    },
    fmt(v, n = 2) { return v != null && v !== '' ? Number(v).toFixed(n) : '—' },
    fmtTime(t) { return t ? t.slice(0, 16).replace('T', ' ') : '—' },
    fmtDay(t) { return t ? t.slice(5, 10) : '' },
    toDay(d) { const p = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}` },
    nowDT() { const d = new Date(); const p = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}` },
    openDialog(row = null) {
      this.editRow = row
      if (row) {
        this.form = { record_date: (row.record_date || '').slice(0, 16), shift_a: row.shift_a, shift_b: row.shift_b, unit_cost: row.unit_cost, remark: row.remark || '' }
      } else {
        this.form = this.emptyForm(); this.form.record_date = this.nowDT()
      }
      this.dialogVisible = true
    },
    async save() {
      if (!this.form.record_date) { this.$message.error('记录时间不能为空'); return }
      this.saving = true
      try {
        const d = { ...this.form }
        if (d.record_date && d.record_date.length === 16) d.record_date += ':00'
        if (this.editRow) await updateCostRecord(this.editRow.id, d)
        else await createCostRecord({ ...d, item: this.curItem })
        this.$message.success('保存成功')
        this.dialogVisible = false; this.fetchData()
      } catch (e) {
        this.$message.error(e?.response?.data?.detail || '保存失败')
      } finally { this.saving = false }
    },
    async remove(row) {
      if (!confirm('确认删除该记录？')) return
      try { await deleteCostRecord(row.id); this.$message.success('已删除'); this.fetchData() }
      catch (e) { this.$message.error('删除失败') }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables';

.cost-page { display: flex; flex-direction: column; gap: 12px; }

.item-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.item-tab {
  padding: 5px 14px; font-size: 12px; border-radius: 4px; cursor: pointer;
  color: $text-secondary; border: 1px solid $border; background: $bg-card;
  &:hover { color: $sms-teal; border-color: $sms-teal; }
  &.active { color: #fff; background: $sms-teal; border-color: $sms-teal; }
}

.cost-main { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: stretch; }
.chart-card, .table-card { display: flex; flex-direction: column; }
.cost-chart { height: 420px; width: 100%; }
.empty-tip { text-align: center; padding: 60px 20px; color: $text-muted; font-size: 13px; }

.form-field { display: flex; flex-direction: column; gap: 5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; margin-right: 10px; &:hover { text-decoration: underline; } &.del { color: $accent-red; } }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-box { background: $bg-card; border: 1px solid $border; border-radius: 6px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: $bg-panel; border-bottom: 1px solid $border; font-size: 13px; font-weight: 600; color: $sms-highlight; .modal-close { cursor: pointer; color: $text-muted; &:hover { color: $text-primary; } } }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-footer { padding: 10px 16px; background: $bg-panel; border-top: 1px solid $border; display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1100px) { .cost-main { grid-template-columns: 1fr; } }
</style>
