<template>
  <div class="timing-page acid-page">
    <el-card class="page-card" shadow="never">
      <div slot="header" class="card-header">
        <span>酸轧实绩页</span>
        <el-tag type="success" size="mini">Plan + Seg + Quality</el-tag>
      </div>

      <el-form :inline="true" :model="queryForm" size="mini" class="query-form">
        <el-form-item label="计划号">
          <el-input v-model="queryForm.coilId" placeholder="输入 coilId" clearable style="width: 220px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="16">
        <el-col :span="8">
          <el-card shadow="never" class="sub-card">
            <div slot="header" class="sub-header">计划列表</div>
            <el-table
              :data="planRows"
              height="560"
              size="mini"
              highlight-current-row
              @row-click="handlePlanRowClick"
            >
              <el-table-column prop="COILID" label="COILID" min-width="140" />
              <el-table-column prop="HOT_COILID" label="热卷号" min-width="140" />
              <el-table-column prop="STATUS" label="状态" width="90" />
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="16">
          <el-card shadow="never" class="sub-card">
            <div slot="header" class="sub-header">计划详情</div>
            <el-empty v-if="!selectedPlan" description="请选择一条计划" />
            <el-descriptions v-else :column="3" border size="mini">
              <el-descriptions-item label="COILID">{{ selectedPlan.COILID }}</el-descriptions-item>
              <el-descriptions-item label="HOT_COILID">{{ selectedPlan.HOT_COILID }}</el-descriptions-item>
              <el-descriptions-item label="STATUS">{{ selectedPlan.STATUS }}</el-descriptions-item>
              <el-descriptions-item label="ENTRY_THICK">{{ selectedPlan.ENTRY_THICK }}</el-descriptions-item>
              <el-descriptions-item label="ENTRY_WIDTH">{{ selectedPlan.ENTRY_WIDTH }}</el-descriptions-item>
              <el-descriptions-item label="ENTRY_WEIGHT">{{ selectedPlan.ENTRY_WEIGHT }}</el-descriptions-item>
              <el-descriptions-item label="EXIT_THICK">{{ selectedPlan.EXIT_THICK }}</el-descriptions-item>
              <el-descriptions-item label="EXIT_WIDTH">{{ selectedPlan.EXIT_WIDTH }}</el-descriptions-item>
              <el-descriptions-item label="EXIT_LENGTH">{{ selectedPlan.EXIT_LENGTH }}</el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card shadow="never" class="sub-card" style="margin-top: 16px;">
            <div slot="header" class="sub-header">SEG 实绩</div>
            <el-alert
              v-if="!segView"
              title="请选择计划后自动加载对应 SEG"
              type="info"
              :closable="false"
              show-icon
            />
            <template v-else>
              <el-row :gutter="16">
                <el-col :span="8">
                  <el-card shadow="never">
                    <div slot="header">SEGNO</div>
                    <div class="seg-list">
                      <el-tag
                        v-for="item in segView.segNo"
                        :key="item"
                        size="mini"
                        class="seg-tag"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="16">
                  <el-card shadow="never">
                    <div slot="header">属性数组</div>
                    <el-table :data="seriesTable" size="mini" height="240" border>
                      <el-table-column prop="key" label="属性" width="180" />
                      <el-table-column prop="values" label="数组值" min-width="300">
                        <template slot-scope="scope">
                          <el-tag v-for="(item, index) in scope.row.values" :key="index" size="mini" style="margin-right: 4px; margin-bottom: 4px;">
                            {{ item }}
                          </el-tag>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import createTimingFetch from '@/api/l2/timing'

export default {
  name: 'TimingAcidPage',
  props: {
    baseURL: { type: String, required: true }
  },
  data() {
    return {
      fetchApi: null,
      loading: false,
      queryForm: { coilId: '' },
      planRows: [],
      selectedPlan: null,
      segView: null,
      seriesTable: []
    }
  },
  created() {
    this.fetchApi = createTimingFetch(this.baseURL)
    this.loadPlanList()
  },
  methods: {
    async loadPlanList() {
      this.loading = true
      try {
        const res = await this.fetchApi.getPlanList()
        const rows = res?.data?.rows || res?.rows || []
        this.planRows = rows
      } finally {
        this.loading = false
      }
    },
    async handleSearch() {
      if (!this.queryForm.coilId) {
        return this.loadPlanList()
      }
      this.loading = true
      try {
        const res = await this.fetchApi.getPlanDetail(this.queryForm.coilId)
        const row = res?.data?.firstRow || res?.firstRow || null
        this.selectedPlan = row
        if (row && row.ENCOILID) {
          await this.loadSeg(row.ENCOILID)
        }
      } finally {
        this.loading = false
      }
    },
    async handlePlanRowClick(row) {
      this.selectedPlan = row
      if (row?.COILID) {
        const detail = await this.fetchApi.getPlanDetail(row.COILID)
        const plan = detail?.data?.firstRow || detail?.firstRow || row
        this.selectedPlan = plan
        const encoilId = plan.ENCOILID || plan.ENCOILID || plan.COILID
        if (encoilId) await this.loadSeg(encoilId)
      }
    },
    async loadSeg(encoilId) {
      const res = await this.fetchApi.getSegByEncoilId(encoilId)
      const view = res?.data || res
      this.segView = view
      this.seriesTable = Object.entries(view?.series || {}).map(([key, values]) => ({ key, values }))
    },
    handleReset() {
      this.queryForm.coilId = ''
      this.selectedPlan = null
      this.segView = null
      this.seriesTable = []
      this.loadPlanList()
    }
  }
}
</script>

<style scoped>
.timing-page { padding: 16px; }
.page-card { border-radius: 12px; }
.card-header, .sub-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.sub-card { border-radius: 10px; }
.query-form { margin-bottom: 12px; }
.seg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-tag { margin-right: 0; }
</style>
