<template>
  <div class="pdo-container">
    <!-- 查询表单区域 -->
    <div class="pdo-header">
      <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px" size="small">
        <el-form-item label="钢卷号" prop="coilid">
          <el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"
            clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
            clearable></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          <el-button type="success" @click="handleAdd" icon="el-icon-plus">补录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 卡片网格布局 -->
    <div v-loading="tableLoading" class="card-grid-container">
      <el-row :gutter="10">
        <el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
          class="card-col">
          <el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
            :class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
            <div slot="header" class="card-header">
              <div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
              <div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
            </div>
            <div class="card-body">
              <div class="param-groups-row">
                <!-- 基本信息 -->
                <div class="param-group">
                  <div class="group-title">基本信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">状态:</span>
                      <span class="param-value">{{ item.status || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">钢种:</span>
                      <span class="param-value">{{ item.steelGrade || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">产品类型:</span>
                      <span class="param-value">{{ item.prodCode || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">客户:</span>
                      <span class="param-value">{{ item.customer || '-' }}</span>
                    </div>
                  </div>
                </div>

                <!-- 来料信息 -->
                <div class="param-group">
                  <div class="group-title">来料信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">厚度:</span>
                      <span class="param-value">{{ item.entryThick || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">宽度:</span>
                      <span class="param-value">{{ item.entryWidth || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">长度:</span>
                      <span class="param-value">{{ item.entryLength || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">重量:</span>
                      <span class="param-value">{{ item.entryWeight || '-' }}</span>
                    </div>
                  </div>
                </div>

                <!-- 成品信息 -->
                <div class="param-group">
                  <div class="group-title">成品信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">厚度:</span>
                      <span class="param-value">{{ item.exitThickness || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">宽度:</span>
                      <span class="param-value">{{ item.exitWidth || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">长度:</span>
                      <span class="param-value">{{ item.exitLength || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">重量:</span>
                      <span class="param-value">{{ item.exitNetWeight || '-' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handlePrint(item)">打印</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">操作</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
                @click.stop="handleDelete(item)">删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>

    <!-- 统计汇总和图表区域 -->
    <div class="statistics-container">
      <div class="statistics-header">
        <div class="selected-info" v-if="currentRow && currentRow.entryMatId">
          <i class="el-icon-check"></i>
          <span class="selected-label">已选中:</span>
          <span class="selected-value">成品卷 {{ currentRow.exitMatId }}</span>
          <span class="selected-detail" v-if="currentRow.entryMatId">(来料卷: {{ currentRow.entryMatId }})</span>
        </div>
        <div class="selected-info empty" v-else>
          <i class="el-icon-info"></i>
          <span>请选择上方卡片查看详情</span>
        </div>
      </div>
      <el-row :gutter="15" class="statistics-content">
        <el-col :span="4" class="summary-col">
          <div class="summary-wrapper">
            <div class="summary-header">统计汇总</div>
            <pdo-summary :table-data="tableData" />
          </div>
        </el-col>
        <el-col :span="20" class="chart-col">
          <div class="chart-wrapper">
            <line-chart :enCoilID="currentRow.entryMatId" :url="activeUrl" />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
      <!-- 补录（新增）：仅显示数据修正组件，无tab -->
      <div v-if="isAdd">
        <pdo-data-correction :detail="formData" :save-callback="handleSave"
          :save-loading="saveLoading"></pdo-data-correction>
      </div>


      <pdo-data-correction :detail="formData" :save-callback="handleSave"
        :save-loading="saveLoading"></pdo-data-correction>

    </el-dialog>

    <el-dialog title="标签打印" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
      <div style="display: flex; justify-content: center; align-items: center;">
        <pdo-label-print :detail="formData"></pdo-label-print>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import createFetch from '@/api/l2/pdo'
import LineChart from './components/line.vue'
// 引入封装的两个组件
import PdoDataCorrection from './components/DataCorrection.vue'
import PdoLabelPrint from './components/LabelPrint.vue'
import PdoSummary from './components/PdoSummary.vue'

export default {
  name: 'PdoManagement',
  dicts: ['pdo_plan_origin'],
  components: {
    LineChart,
    PdoDataCorrection, // 注册数据修正组件
    PdoLabelPrint,      // 注册标签打印组件
    PdoSummary
  },
  props: {
    baseURL: {
      type: String,
      default: '140.143.206.120:18081'
    }
  },
  data() {
    return {
      activeUrl: '140.143.206.120:18081',
      queryForm: { coilid: '', startDate: '', endDate: '' },
      printOpen: false,
      tableData: [],
      tableLoading: false,
      btnLoading: false,
      dialogVisible: false,
      dialogTitle: '新增实绩',
      // 新增：区分「补录（新增）」和「编辑」的状态标识
      isAdd: false,
      // 传递给子组件的详情数据（父组件仅做数据中转，不直接修改）
      formData: {},
      saveLoading: false,
      currentRow: {},
      socketType: [
        { value: 'alarm', label: '报警' },
        { value: 'track_position', label: '跟踪位置' },
        { value: 'track_measure', label: '跟踪测量' },
        { value: 'track_signal', label: '跟踪信号' },
        { value: 'track_matmap', label: '跟踪料号' },
        { value: 'calc_setup_result', label: '计算结果' }
      ]
    }
  },
  watch: {
    baseURL: {
      handler(newVal) {
        this.activeUrl = newVal
        this.pdoApi = createFetch(this.activeUrl)
        this.getPdoList()
      },
      immediate: true
    }
  },
  methods: {
    // 获取列表数据（保持不变）
    getPdoList() {
      this.tableLoading = true
      this.pdoApi.getPdoList(this.queryForm).then(res => {
        this.tableData = res.data.map(item => ({ ...item, deleteLoading: false }))
      }).catch(err => {
        console.error(err)
        this.$message.error('获取数据失败')
      }).finally(() => {
        this.tableLoading = false
        this.btnLoading = false
      })
    },
    // 查询（保持不变）
    handleQuery() {
      this.btnLoading = true;
      this.getPdoList()
    },
    // 重置（保持不变）
    handleReset() {
      this.$refs.queryForm.resetFields();
      this.getPdoList()
    },
    // 行点击（保持不变）
    handleRowClick(row) {
      this.currentRow = row;
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return '-';
      return this.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
    },
    // 补录（新增）：设置isAdd=true，初始化空表单
    handleAdd() {
      this.isAdd = true; // 标记为「补录」
      this.dialogTitle = '新增实绩';
      // 初始化空表单数据（传递给子组件）
      this.formData = {
        subId: 0,
        startPosition: 0,
        endPosition: 0,
        planId: 0,
        entryThick: 0,
        entryWidth: 0,
        entryLength: 0,
        entryWeight: 0,
        weightTop: 0,
        weightBottom: 0,
        exitLength: 0,
        exitNetWeight: 0,
        theoryWeight: 0,
        actualWeight: 0,
        exitOuterDiameter: 0,
        exitThickness: 0,
        exitWidth: 0,
        lastFlag: false,
        separateFlag: false
      };
      this.dialogVisible = true
    },
    // 编辑：设置isAdd=false，赋值行数据
    handleEdit(row) {
      this.isAdd = false; // 标记为「编辑」
      this.dialogTitle = '编辑实绩';
      // 深拷贝行数据（避免直接修改表格数据）
      this.formData = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true
    },
    handlePrint(row) {
      // 深拷贝行数据（避免直接修改表格数据）
      this.formData = JSON.parse(JSON.stringify(row));
      this.printOpen = true
    },
    // 删除（保持不变）
    handleDelete(row) {
      this.$confirm(`确定删除成品卷 ${row.exitMatId}?`, '确认删除', { type: 'danger' }).then(() => {
        row.deleteLoading = true
        this.pdoApi.deletePdo(row.exitMatId, row.planId).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.getPdoList()
          } else this.$message.error(res.msg || '删除失败')
        }).finally(() => row.deleteLoading = false)
      })
    },
    // 保存回调（子组件触发，处理实际API调用）
    handleSave(formData) {
      this.saveLoading = true
      // 根据是否有id判断是新增还是编辑
      const request = formData.id ? this.pdoApi.updatePdo(formData) : this.pdoApi.addPdo(formData)
      request.then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功');
          this.dialogVisible = false;
          this.getPdoList() // 刷新列表
        } else this.$message.error(res.msg || '保存失败')
      }).finally(() => {
        this.saveLoading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.pdo-container {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f5f5f5;
  overflow: hidden;
}

.pdo-header {
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 15px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.card-grid-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 15px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
}

.card-col {
  margin-bottom: 10px;
}

.parameter-card {
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;

  &.card-selected {
    border-color: #999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: #fafafa;
  }

  ::v-deep .el-card__header {
    padding: 6px 8px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
  }

  &:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

.card-header {
  .card-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
    line-height: 1.4;
  }

  .card-subtitle {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
  }
}

.card-body {
  .param-groups-row {
    display: flex;
    gap: 8px;

    .param-group {
      flex: 1;
      min-width: 0;

      .group-title {
        font-size: 11px;
        font-weight: 600;
        color: #555;
        padding: 3px 0;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 4px;
        background: #f5f5f5;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: -4px;
        margin-right: -4px;
        text-align: center;
      }

      .param-list {
        .param-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 3px 0;
          border-bottom: 1px dotted #e8e8e8;

          &:last-child {
            border-bottom: none;
          }

          .param-label {
            color: #777;
            font-size: 11px;
            flex-shrink: 0;
            margin-right: 8px;
          }

          .param-value {
            color: #333;
            font-weight: 500;
            font-size: 11px;
            text-align: right;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #e0e0e0;
  margin-top: 6px;

  .el-button {
    font-size: 11px;
    padding: 2px 6px;
  }
}

.empty-data {
  text-align: center;
  padding: 40px 0;
}

.statistics-container {
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 280px;
}

.statistics-header {
  padding: 8px 15px;
  background: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;

  .selected-info {
    display: flex;
    align-items: center;
    font-size: 13px;

    &.empty {
      color: #999;

      i {
        color: #bbb;
        margin-right: 6px;
      }
    }

    i {
      color: #67c23a;
      margin-right: 6px;
      font-size: 14px;
    }

    .selected-label {
      color: #666;
      margin-right: 6px;
      font-weight: 500;
    }

    .selected-value {
      color: #333;
      font-weight: 600;
      margin-right: 8px;
    }

    .selected-detail {
      color: #888;
      font-size: 12px;
    }
  }
}

.statistics-content {
  flex: 1;
  min-height: 0;
  padding: 12px 15px;
}

.summary-col {
  height: 100%;
}

.summary-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8e8e8;
  padding-right: 15px;
  overflow: hidden;
}

.summary-header {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}

.chart-col {
  height: 100%;
}

.chart-wrapper {
  height: 100%;
  padding-left: 15px;
}
</style>
