<template>
  <div class="app-container acid-op-page">
    <el-row :gutter="16">

      <!-- 左侧：操作表单 + 历史记录 -->
      <el-col :span="15">

        <div class="op-card">
          <div class="op-header">
            <span class="op-title">双机架工序录入</span>
            <el-tag size="mini" type="info" style="margin-left:8px">actionType = 504</el-tag>
          </div>

          <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small">
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="入场钢卷号" prop="enterCoilNo">
                  <el-input v-model="form.enterCoilNo" placeholder="回车自动查询"
                    clearable @keyup.enter.native="onEnterCoilInput" @blur="onEnterCoilInput" @clear="clearCoilInfo" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出口钢卷号" prop="currentCoilNo">
                  <el-input v-model="form.currentCoilNo" placeholder="请输入出口钢卷号" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider content-position="left" style="margin:8px 0 12px">出口实绩</el-divider>

            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="出口厚度(mm)" prop="exitThickness">
                  <el-input-number v-model="form.exitThickness" :precision="3" :min="0"
                    :controls="false" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出口宽度(mm)" prop="exitWidth">
                  <el-input-number v-model="form.exitWidth" :precision="1" :min="0"
                    :controls="false" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出口长度(m)">
                  <el-input-number v-model="form.exitLength" :precision="1" :min="0"
                    :controls="false" style="width:100%" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="入口重量(t)">
                  <el-input-number v-model="form.entryWeight" :precision="3" :min="0"
                    :controls="false" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出口重量(t)">
                  <el-input-number v-model="form.exitWeight" :precision="3" :min="0"
                    :controls="false" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工艺编码">
                  <el-input v-model="form.processCode" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="班组">
                  <el-select v-model="form.team" placeholder="请选择" style="width:100%" clearable>
                    <el-option label="甲班" value="甲" />
                    <el-option label="乙班" value="乙" />
                    <el-option label="丙班" value="丙" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="备注">
                  <el-input v-model="form.remark" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <div style="text-align:right;padding-top:4px">
              <el-button @click="resetForm">重置</el-button>
              <el-button type="primary" :loading="submitting" @click="submitForm">
                新增录入（同步创建计划）
              </el-button>
            </div>
          </el-form>
        </div>

        <!-- 历史 -->
        <div class="op-card" style="margin-top:12px">
          <div class="op-header">
            <span class="op-title">最近录入记录</span>
            <el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadHistory">刷新</el-button>
          </div>
          <el-table v-loading="historyLoading" :data="historyList" size="mini" border style="width:100%">
            <el-table-column prop="enterCoilNo"   label="入场钢卷号" min-width="120" show-overflow-tooltip />
            <el-table-column prop="currentCoilNo" label="出口钢卷号" min-width="120" show-overflow-tooltip />
            <el-table-column prop="exitThickness"  label="出口厚(mm)" width="90" align="right" />
            <el-table-column prop="exitWidth"      label="出口宽(mm)" width="90" align="right" />
            <el-table-column prop="exitLength"     label="长度(m)"    width="80" align="right" />
            <el-table-column prop="entryWeight"    label="入口重(t)"  width="80" align="right" />
            <el-table-column prop="team"           label="班组"       width="60" align="center" />
            <el-table-column prop="createTime"     label="录入时间"   width="150" />
          </el-table>
          <pagination v-show="historyTotal > 0" :total="historyTotal"
            :page.sync="historyQuery.pageNum" :limit.sync="historyQuery.pageSize"
            @pagination="loadHistory" style="margin-top:6px" />
        </div>
      </el-col>

      <!-- 右侧：WMS 钢卷信息 -->
      <el-col :span="9">
        <div class="op-card">
          <div class="op-header"><span class="op-title">WMS 钢卷信息</span></div>
          <template v-if="coilInfo">
            <el-descriptions :column="1" size="mini" border style="margin-top:8px">
              <el-descriptions-item label="入场钢卷号">{{ coilInfo.enterCoilNo }}</el-descriptions-item>
              <el-descriptions-item label="当前钢卷号">{{ coilInfo.currentCoilNo }}</el-descriptions-item>
              <el-descriptions-item label="实际厚度">{{ coilInfo.actualThickness }} mm</el-descriptions-item>
              <el-descriptions-item label="实际宽度">{{ coilInfo.actualWidth }} mm</el-descriptions-item>
              <el-descriptions-item label="净重">{{ coilInfo.netWeight }} t</el-descriptions-item>
              <el-descriptions-item label="长度">{{ coilInfo.length }} m</el-descriptions-item>
              <el-descriptions-item label="质量状态">{{ coilInfo.qualityStatus }}</el-descriptions-item>
              <el-descriptions-item label="物料类型">{{ coilInfo.materialType }}</el-descriptions-item>
            </el-descriptions>
            <el-button size="mini" type="primary" style="margin-top:8px" @click="applyCoilFill">
              写入表单
            </el-button>
          </template>
          <div v-else style="text-align:center;color:#aaa;padding:40px 0">
            输入入场钢卷号后自动查询
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { addCoilWarehouseOperationLog, listCoilWarehouseOperationLog } from '@/api/wms/coilWarehouseOperationLog'
import { queryCoilByNo, addDrPlan } from '@/api/wms/drMill'

export default {
  name: 'DrNormal',
  data() {
    return {
      form: this.defaultForm(),
      rules: {
        enterCoilNo: [{ required: true, message: '入场钢卷号不能为空', trigger: 'blur' }],
      },
      submitting: false,
      coilInfo: null,
      historyLoading: false,
      historyList: [],
      historyTotal: 0,
      historyQuery: { pageNum: 1, pageSize: 10, actionType: 504 },
    }
  },
  created() { this.loadHistory() },
  methods: {
    defaultForm() {
      return {
        enterCoilNo: '', currentCoilNo: '',
        exitThickness: undefined, exitWidth: undefined, exitLength: undefined,
        entryWeight: undefined, exitWeight: undefined,
        processCode: '', team: undefined, remark: '',
        actionType: 504,
      }
    },
    onEnterCoilInput() {
      const v = (this.form.enterCoilNo || '').trim()
      if (!v) return
      queryCoilByNo(v).then(res => {
        this.coilInfo = res.data || null
      }).catch(() => { this.coilInfo = null })
    },
    clearCoilInfo() { this.coilInfo = null },
    applyCoilFill() {
      if (!this.coilInfo) return
      if (this.coilInfo.actualThickness) this.form.exitThickness = parseFloat(this.coilInfo.actualThickness)
      if (this.coilInfo.actualWidth)     this.form.exitWidth     = parseFloat(this.coilInfo.actualWidth)
      if (this.coilInfo.netWeight)       this.form.entryWeight   = parseFloat(this.coilInfo.netWeight)
      if (this.coilInfo.length)          this.form.exitLength    = parseFloat(this.coilInfo.length)
      this.$message.success('钢卷数据已写入表单')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.submitting = true
        addCoilWarehouseOperationLog({ ...this.form }).then(() => {
          // 同步创建双机架生产计划
          return addDrPlan({
            inMatNo:     this.form.enterCoilNo,
            enterCoilNo: this.form.enterCoilNo,
            currentCoilNo: this.form.currentCoilNo,
            inMatThick:  this.coilInfo ? this.coilInfo.actualThickness : undefined,
            inMatWidth:  this.coilInfo ? this.coilInfo.actualWidth     : undefined,
            inMatWeight: this.coilInfo ? this.coilInfo.netWeight       : undefined,
            inMatLength: this.coilInfo ? this.coilInfo.length          : undefined,
            outThick:    this.form.exitThickness,
            remark:      this.form.remark,
          })
        }).then(() => {
          this.$modal.msgSuccess('录入成功，已同步创建双机架计划')
          this.resetForm()
          this.loadHistory()
        }).catch(err => {
          this.$modal.msgError('操作失败: ' + (err.message || ''))
        }).finally(() => { this.submitting = false })
      })
    },
    resetForm() {
      this.form = this.defaultForm()
      this.coilInfo = null
      this.$nextTick(() => this.$refs.form && this.$refs.form.clearValidate())
    },
    loadHistory() {
      this.historyLoading = true
      listCoilWarehouseOperationLog(this.historyQuery).then(res => {
        this.historyList  = res.rows  || []
        this.historyTotal = res.total || 0
      }).finally(() => { this.historyLoading = false })
    },
  }
}
</script>

<style scoped>
.acid-op-page { background: #f5f7fa; }
.op-card { background: #fff; border: 1px solid #e4e7ed; border-radius: 4px; padding: 16px; }
.op-header { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #409eff; }
.op-title { font-size: 15px; font-weight: 600; color: #303133; }
</style>
