<template>
  <div class="page-container">
    <el-card shadow="never" :class="['gen-page-card', { 'm-gen-card': isMobile }]">
      <template #header>
        <span class="card-title">任务生成</span>
      </template>

      <el-row :gutter="isMobile ? 0 : 20" class="gen-layout">
        <el-col :xs="24" :sm="24" :md="8" :lg="7" class="gen-nav-col">
          <nav class="gen-type-nav" aria-label="任务类型">
            <button
              v-for="opt in taskTypeNavItems"
              :key="opt.key"
              type="button"
              :class="['gen-type-nav__item', { 'is-active': panelKey === opt.key }]"
              @click="selectPanel(opt.key)"
            >
              {{ opt.label }}
            </button>
          </nav>
        </el-col>
        <el-col :xs="24" :sm="24" :md="16" :lg="17" class="gen-panel-col">
          <div class="gen-panel-surface">
            <header class="gen-panel-head">
              <h2 class="gen-panel-head__title">{{ currentTaskLabel }}</h2>
            </header>
            <div class="gen-panel-body">
          <!-- 入库 -->
          <div v-show="isPanel('inbound')" class="gen-form-wrap">
          <el-form :model="inboundForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan">
                <el-form-item label="仓库编码" required>
                  <el-input v-model="inboundForm.warehouse" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="容器编码" required>
                  <el-input v-model="inboundForm.container" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="目标类型">
                  <el-select v-model="inboundForm.targetType" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="目标编码">
                  <el-input v-model="inboundForm.targetCode" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="站点编号">
                  <el-input v-model="inboundForm.stationCode" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="业务追踪号">
                  <el-input v-model="inboundForm.businessNo" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="SKU">
                  <el-input v-model="inboundForm.sku" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="优先级">
                  <el-input-number v-model="inboundForm.priority" :min="0" :controls="false" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="货架方向">
                  <el-input v-model="inboundForm.shelfDirection" placeholder="AB面" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleInbound" :style="isMobile ? 'width:100%' : ''">提交入库</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 出库(等待) -->
          <div v-show="isPanel('outboundWait')" class="gen-form-wrap">
          <el-form :model="outboundWaitForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="outboundWaitForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="outboundWaitForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="outboundWaitForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标点位"><el-input v-model="outboundWaitForm.targetPoint" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="outboundWaitForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="outboundWaitForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="货架方向"><el-input v-model="outboundWaitForm.shelfDirection" placeholder="AB面" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="outboundWaitForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleOutboundBatch('wait')" :style="isMobile ? 'width:100%' : ''">提交出库(等待)</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 拣货出库(新模版) -->
          <div v-show="isPanel('outboundWaitNew')" class="gen-form-wrap">
          <el-form :model="outboundWaitNewForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="outboundWaitNewForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="outboundWaitNewForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="outboundWaitNewForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标点位"><el-input v-model="outboundWaitNewForm.targetPoint" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="outboundWaitNewForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="outboundWaitNewForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="货架方向"><el-input v-model="outboundWaitNewForm.shelfDirection" placeholder="AB面" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="outboundWaitNewForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleOutboundBatch('waitNew')" :style="isMobile ? 'width:100%' : ''">提交拣货出库(新模版)</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 出库(不等待) -->
          <div v-show="isPanel('outboundNoWait')" class="gen-form-wrap">
          <el-form :model="outboundNoWaitForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="outboundNoWaitForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="outboundNoWaitForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="outboundNoWaitForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标点位"><el-input v-model="outboundNoWaitForm.targetPoint" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="outboundNoWaitForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="outboundNoWaitForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="outboundNoWaitForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleOutboundBatch('noWait')" :style="isMobile ? 'width:100%' : ''">提交出库(不等待)</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 直出模式(新模版) -->
          <div v-show="isPanel('outboundNoWaitNew')" class="gen-form-wrap">
          <el-form :model="outboundNoWaitNewForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="outboundNoWaitNewForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="outboundNoWaitNewForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="outboundNoWaitNewForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标点位"><el-input v-model="outboundNoWaitNewForm.targetPoint" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="outboundNoWaitNewForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="outboundNoWaitNewForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="outboundNoWaitNewForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleOutboundBatch('noWaitNew')" :style="isMobile ? 'width:100%' : ''">提交直出模式(新模版)</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 移库 -->
          <div v-show="isPanel('move')" class="gen-form-wrap">
          <el-form :model="moveForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="moveForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="moveForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="moveForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="指定楼层"><el-input-number v-model="moveForm.targetLevel" :min="1" :max="6" :controls="false" clearable placeholder="选填" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="moveForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="moveForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="moveForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleMoveBatch" :style="isMobile ? 'width:100%' : ''">提交移库</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 批量移库(新模版) -->
          <div v-show="isPanel('moveNew')" class="gen-form-wrap">
          <el-form :model="moveNewForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="moveNewForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="moveNewForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="moveNewForm.targetCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="指定楼层"><el-input-number v-model="moveNewForm.targetLevel" :min="1" :max="6" :controls="false" clearable placeholder="选填" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="moveNewForm.businessNo" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="moveNewForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
              <el-col :span="24">
                <el-form-item label="容器编码" required>
                  <el-input v-model="moveNewForm.containerBatch" type="textarea" :rows="6" placeholder="支持批量输入，每行一个或使用逗号、空格分隔" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleMoveBatchNew" :style="isMobile ? 'width:100%' : ''">提交批量移库(新模版)</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 释放信号 -->
          <div v-show="isPanel('release')" class="gen-form-wrap">
          <el-form :model="releaseForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="任务链编号" required><el-input v-model="releaseForm.taskChainCode" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="releaseForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="容器编码"><el-input v-model="releaseForm.container" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="releaseForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="releaseForm.targetCode" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleRelease" :style="isMobile ? 'width:100%' : ''">发送释放信号</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 绑定站点 -->
          <div v-show="isPanel('bindStation')" class="gen-form-wrap">
          <el-form :model="bindForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="bindForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="bindForm.container" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="站点编码" required><el-input v-model="bindForm.station" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleBindStation" :style="isMobile ? 'width:100%' : ''">绑定站点</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 解绑站点 -->
          <div v-show="isPanel('releaseStation')" class="gen-form-wrap">
          <el-form :model="releaseStationForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="releaseStationForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="releaseStationForm.container" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="站点编码" required><el-input v-model="releaseStationForm.station" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="warning" :loading="loading" @click="handleReleaseStation" :style="isMobile ? 'width:100%' : ''">解绑站点</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 取消任务（按仓库+容器，后台任务生成接口） -->
          <div v-show="isPanel('cancel')" class="gen-form-wrap">
          <el-form :model="cancelForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="cancelForm.warehouse" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="cancelForm.container" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="取消原因"><el-input v-model="cancelForm.reason" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="cancelForm.businessNo" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="danger" :loading="loading" @click="handleCancel" :style="isMobile ? 'width:100%' : ''">取消任务</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 业务取消（按业务跟踪号） -->
          <div v-show="isPanel('businessCancel')" class="gen-form-wrap">
          <el-form :model="businessCancelForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="业务跟踪号" required><el-input v-model="businessCancelForm.businessNo" placeholder="与任务链业务追踪号一致" /></el-form-item></el-col>
              <el-col :span="colSpan"><el-form-item label="取消原因"><el-input v-model="businessCancelForm.reason" type="textarea" :rows="2" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="danger" :loading="loading" @click="handleBusinessCancel" :style="isMobile ? 'width:100%' : ''">业务取消任务</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 入库异常处理 -->
          <div v-show="isPanel('inboundException')" class="gen-form-wrap">
          <el-form :model="inboundExceptionForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="托盘码" required><el-input v-model="inboundExceptionForm.palletCode" /></el-form-item></el-col>
              <el-col :span="colSpan">
                <el-form-item label="出库站点" required>
                  <el-select v-model="inboundExceptionForm.outboundStation" placeholder="请选择" style="width: 100%">
                    <el-option v-for="s in outboundStationOptions" :key="s" :label="s" :value="s" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="colSpan">
                <el-form-item label="提升机" required>
                  <el-select v-model="inboundExceptionForm.elevatorId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="e in elevatorOptions" :key="e.id" :label="e.label" :value="e.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="inboundExceptionForm.warehouse" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleInboundException" :style="isMobile ? 'width:100%' : ''">出库</el-button>
              <el-button type="warning" :loading="loading" @click="handleInboundExceptionUnbind" :style="isMobile ? 'width:100%' : ''">解绑</el-button>
            </el-form-item>
          </el-form>
        </div>

          <!-- 任务加急 -->
          <div v-show="isPanel('expedite')" class="gen-form-wrap">
          <el-form :model="expediteForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
            <el-row :gutter="gutter">
              <el-col :span="colSpan"><el-form-item label="业务跟踪号" required><el-input v-model="expediteForm.businessNo" placeholder="与任务链业务追踪号一致" /></el-form-item></el-col>
            </el-row>
            <el-form-item>
              <el-button :loading="loading" @click="handleExpedite(60)" :style="isMobile ? 'width:100%' : ''">正常</el-button>
              <el-button type="warning" :loading="loading" @click="handleExpedite(500)" :style="isMobile ? 'width:100%' : ''">加急</el-button>
              <el-button type="danger" :loading="loading" @click="handleExpedite(1000)" :style="isMobile ? 'width:100%' : ''">非常紧急</el-button>
            </el-form-item>
          </el-form>
        </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果展示 -->
    <el-card v-if="resultVisible" shadow="hover" class="result-card">
      <template #header>
        <div class="result-header">
          <span>执行结果</span>
          <el-button text type="info" size="small" @click="resultVisible = false">关闭</el-button>
        </div>
      </template>
      <el-alert :title="resultTitle" :type="resultType" :closable="false" show-icon>
        <pre v-if="resultDetail" class="result-detail">{{ resultDetail }}</pre>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'TaskGenerateView' })
import {
    generateBindStation,
    generateCancel,
    generateExpedite,
    generateInbound,
    generateInboundException,
    generateMoveBatch,
    generateMoveBatchNew,
    generateOutboundNoWait,
    generateOutboundNoWaitNew,
    generateOutboundWait,
    generateOutboundWaitNew,
    generateRelease,
    generateReleaseStation,
    type BindStationReq,
    type CancelReq,
    type InboundReq,
    type MoveReq,
    type OutboundReq,
    type ReleaseReq,
    type ReleaseStationReq,
} from '@/api/generate'
import { cancelTaskByBusinessNo } from '@/api/task'
import { useDevice } from '@/composables/useDevice'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, reactive, ref } from 'vue'

const { isMobile } = useDevice()
const colSpan = computed(() => (isMobile.value ? 24 : 12))
const gutter = computed(() => (isMobile.value ? 0 : 20))
const formLabelWidth = computed(() => (isMobile.value ? '' : '120px'))
const labelPos = computed<'top' | 'right'>(() => (isMobile.value ? 'top' : 'right'))

/** 当前任务类型（扁平列表，无分组） */
const taskTypeNavItems: { key: string; label: string }[] = [
  { key: 'inbound', label: '入库' },
  { key: 'outboundWait', label: '出库(等待)' },
  { key: 'outboundWaitNew', label: '拣货出库(新模版)' },
  { key: 'outboundNoWait', label: '出库(不等待)' },
  { key: 'outboundNoWaitNew', label: '直出模式(新模版)' },
  { key: 'move', label: '移库' },
  { key: 'moveNew', label: '批量移库(新模版)' },
  { key: 'release', label: '释放信号' },
  { key: 'bindStation', label: '绑定站点' },
  { key: 'releaseStation', label: '解绑站点' },
  { key: 'cancel', label: '取消任务(仓+容器)' },
  { key: 'businessCancel', label: '业务取消' },
  { key: 'inboundException', label: '入库异常处理' },
  { key: 'expedite', label: '任务加急' },
]

const panelKey = ref('inbound')

const currentTaskLabel = computed(
  () => taskTypeNavItems.find((i) => i.key === panelKey.value)?.label ?? '任务生成',
)

function selectPanel(key: string) {
  panelKey.value = key
}

function isPanel(name: string) {
  return panelKey.value === name
}

const loading = ref(false)
const resultVisible = ref(false)
const resultTitle = ref('')
const resultType = ref<'success' | 'error'>('success')
const resultDetail = ref('')

const targetTypes = [
  { value: 'AREA', label: '库区' },
  { value: 'LOCATION', label: '库位' },
  { value: 'STATION', label: '站点' },
  { value: 'CONTAINER', label: '容器' },
]

const inboundForm = reactive<InboundReq>({ warehouse: '', container: '' })
const outboundWaitForm = reactive({
  warehouse: '', containerBatch: '',
  targetType: undefined as string | undefined, targetCode: '', targetPoint: '', businessNo: '', priority: undefined as number | undefined, shelfDirection: '',
})
const outboundNoWaitForm = reactive({
  warehouse: '', containerBatch: '',
  targetType: undefined as string | undefined, targetCode: '', targetPoint: '', businessNo: '', priority: undefined as number | undefined,
})
const outboundWaitNewForm = reactive({
  warehouse: 'WH01', containerBatch: '',
  targetType: 'STATION', targetCode: 'B4', targetPoint: '0217280SS0198585', businessNo: 'JH00001', priority: 50, shelfDirection: '',
})
const outboundNoWaitNewForm = reactive({
  warehouse: '', containerBatch: '',
  targetType: undefined as string | undefined, targetCode: '', targetPoint: '', businessNo: '', priority: undefined as number | undefined,
})
const moveForm = reactive({
  warehouse: '', containerBatch: '',
  targetType: undefined as string | undefined, targetCode: '', targetLevel: undefined as number | undefined, businessNo: '', priority: undefined as number | undefined,
})
const moveNewForm = reactive({
  warehouse: '', containerBatch: '',
  targetType: undefined as string | undefined, targetCode: '', targetLevel: undefined as number | undefined, businessNo: '', priority: undefined as number | undefined,
})

const releaseForm = reactive<ReleaseReq>({ warehouse: '', container: '', taskChainCode: '' })
const bindForm = reactive<BindStationReq>({ warehouse: '', container: '', station: '' })
const releaseStationForm = reactive<ReleaseStationReq>({ warehouse: '', container: '', station: '' })
const cancelForm = reactive<CancelReq>({ warehouse: '', container: '' })
const businessCancelForm = reactive({ businessNo: '', reason: '' })

/** 入库异常处理：出库站点与提升机点位映射（与后台 ASRSConsts 保持一致） */
const outboundStationOptions = ['A3', 'A4']
const elevatorOptions = [
  { id: 1, label: '提升机1号', point: '0211520SS0225040' },
  { id: 2, label: '提升机2号', point: '0228800SS0225040' },
]
const inboundExceptionForm = reactive({
  palletCode: '',
  outboundStation: 'A3',
  elevatorId: 1 as number,
  warehouse: 'WH01',
})
const expediteForm = reactive({ businessNo: '' })

function showResult(title: string, type: 'success' | 'error', detail?: unknown) {
  resultTitle.value = title
  resultType.value = type
  resultDetail.value = detail != null ? JSON.stringify(detail, null, 2) : ''
  resultVisible.value = true
}

async function handleInbound() {
  if (!inboundForm.warehouse || !inboundForm.container) {
    return ElMessage.warning('请填写仓库编码和容器编码')
  }
  loading.value = true
  try {
    const res = await generateInbound({ ...inboundForm })
    showResult(`入库任务链已创建: ${res.data}`, 'success')
    ElMessage.success('入库任务链已创建')
  } catch (e) {
    showResult('入库失败', 'error', e)
  } finally {
    loading.value = false
  }
}

function parseContainerBatch(text: string): string[] {
  if (!text?.trim()) return []
  return text
    .split(/[\n,\s]+/)
    .map(s => s.trim())
    .filter(Boolean)
}

async function handleOutboundBatch(mode: 'wait' | 'noWait' | 'waitNew' | 'noWaitNew') {
  const formMap = { wait: outboundWaitForm, noWait: outboundNoWaitForm, waitNew: outboundWaitNewForm, noWaitNew: outboundNoWaitNewForm }
  const form = formMap[mode]
  if (!form.warehouse) {
    return ElMessage.warning('请填写仓库编码')
  }
  const containers = parseContainerBatch(form.containerBatch)
  if (containers.length === 0) {
    return ElMessage.warning('请填写至少一个容器编码')
  }
  const base = {
    warehouse: form.warehouse,
    targetType: form.targetType,
    targetCode: form.targetCode,
    targetPoint: form.targetPoint,
    businessNo: form.businessNo,
    priority: form.priority,
  }
  const shelfDirection = mode === 'wait' ? outboundWaitForm.shelfDirection : mode === 'waitNew' ? outboundWaitNewForm.shelfDirection : undefined
  const list: OutboundReq[] = containers.map(container =>
    shelfDirection !== undefined ? { ...base, container, shelfDirection } : { ...base, container },
  )
  loading.value = true
  try {
    const fnMap = { wait: generateOutboundWait, noWait: generateOutboundNoWait, waitNew: generateOutboundWaitNew, noWaitNew: generateOutboundNoWaitNew }
    const fn = fnMap[mode]
    const res = await fn(list)
    showResult('出库任务链已创建', 'success', res.data)
    ElMessage.success(`已创建 ${containers.length} 条出库任务链`)
  } catch (e) {
    showResult('出库失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleMoveBatch() {
  if (!moveForm.warehouse) {
    return ElMessage.warning('请填写仓库编码')
  }
  const containers = parseContainerBatch(moveForm.containerBatch)
  if (containers.length === 0) {
    return ElMessage.warning('请填写至少一个容器编码')
  }
  const list: MoveReq[] = containers.map(container => ({
    warehouse: moveForm.warehouse,
    container,
    targetType: moveForm.targetType,
    targetCode: moveForm.targetCode,
    targetLevel: moveForm.targetLevel,
    businessNo: moveForm.businessNo,
    priority: moveForm.priority,
  }))
  loading.value = true
  try {
    const res = await generateMoveBatch(list)
    showResult('移库任务链已创建', 'success', res.data)
    ElMessage.success(`已创建 ${containers.length} 条移库任务链`)
  } catch (e) {
    showResult('移库失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleMoveBatchNew() {
  if (!moveNewForm.warehouse) {
    return ElMessage.warning('请填写仓库编码')
  }
  const containers = parseContainerBatch(moveNewForm.containerBatch)
  if (containers.length === 0) {
    return ElMessage.warning('请填写至少一个容器编码')
  }
  const list: MoveReq[] = containers.map(container => ({
    warehouse: moveNewForm.warehouse,
    container,
    targetType: moveNewForm.targetType,
    targetCode: moveNewForm.targetCode,
    targetLevel: moveNewForm.targetLevel,
    businessNo: moveNewForm.businessNo,
    priority: moveNewForm.priority,
  }))
  loading.value = true
  try {
    const res = await generateMoveBatchNew(list)
    showResult('批量移库(新模版)任务链已创建', 'success', res.data)
    ElMessage.success(`已创建 ${containers.length} 条批量移库(新模版)任务链`)
  } catch (e) {
    showResult('批量移库(新模版)失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleRelease() {
  if (!releaseForm.taskChainCode || !releaseForm.warehouse) {
    return ElMessage.warning('请填写任务链编号和仓库编码')
  }
  loading.value = true
  try {
    await generateRelease({ ...releaseForm })
    showResult('释放信号已发送', 'success')
    ElMessage.success('释放信号已发送')
  } catch (e) {
    showResult('释放失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleBindStation() {
  if (!bindForm.warehouse || !bindForm.container || !bindForm.station) {
    return ElMessage.warning('请填写所有必填项')
  }
  loading.value = true
  try {
    await generateBindStation({ ...bindForm })
    showResult('站点绑定成功', 'success')
    ElMessage.success('站点绑定成功')
  } catch (e) {
    showResult('绑定失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleReleaseStation() {
  if (!releaseStationForm.warehouse || !releaseStationForm.container || !releaseStationForm.station) {
    return ElMessage.warning('请填写所有必填项')
  }
  loading.value = true
  try {
    await generateReleaseStation({ ...releaseStationForm })
    showResult('站点解绑成功', 'success')
    ElMessage.success('站点解绑成功')
  } catch (e) {
    showResult('解绑失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleCancel() {
  if (!cancelForm.warehouse || !cancelForm.container) {
    return ElMessage.warning('请填写仓库编码和容器编码')
  }
  loading.value = true
  try {
    const res = await generateCancel({ ...cancelForm })
    showResult('任务取消成功', 'success', res.data)
    ElMessage.success('任务取消成功')
  } catch (e) {
    showResult('取消失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleInboundException() {
  if (!inboundExceptionForm.palletCode) {
    return ElMessage.warning('请输入托盘码')
  }
  if (!inboundExceptionForm.outboundStation) {
    return ElMessage.warning('请选择出库站点')
  }
  const elevator = elevatorOptions.find(e => e.id === inboundExceptionForm.elevatorId)
  if (!elevator) {
    return ElMessage.warning('请选择提升机')
  }
  loading.value = true
  try {
    await generateInboundException({
      palletCode: inboundExceptionForm.palletCode,
      outboundStation: inboundExceptionForm.outboundStation,
      elevatorId: elevator.id,
      elevatorPoint: elevator.point,
    })
    showResult('入库异常出库已提交', 'success')
    ElMessage.success('入库异常出库已提交')
  } catch (e) {
    showResult('入库异常出库失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleInboundExceptionUnbind() {
  if (!inboundExceptionForm.warehouse || !inboundExceptionForm.palletCode || !inboundExceptionForm.outboundStation) {
    return ElMessage.warning('请填写仓库编码、托盘码和出库站点')
  }
  loading.value = true
  try {
    await generateReleaseStation({
      warehouse: inboundExceptionForm.warehouse,
      container: inboundExceptionForm.palletCode,
      station: inboundExceptionForm.outboundStation,
    })
    showResult('解绑成功', 'success')
    ElMessage.success('解绑成功')
  } catch (e) {
    showResult('解绑失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleExpedite(priority: number) {
  const businessNo = expediteForm.businessNo?.trim()
  if (!businessNo) {
    return ElMessage.warning('请填写业务跟踪号')
  }
  const label = priority >= 1000 ? '非常紧急' : priority >= 500 ? '加急' : '正常'
  try {
    await ElMessageBox.confirm(
      `确认将业务跟踪号「${businessNo}」的任务链设为${label}（优先级 ${priority}）？`,
      '任务加急确认',
      { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' },
    )
  } catch {
    return
  }
  loading.value = true
  try {
    await generateExpedite({ businessNo, priority })
    showResult(`任务已${label}（优先级 ${priority}）`, 'success')
    ElMessage.success(`任务已${label}`)
  } catch (e) {
    showResult('任务加急失败', 'error', e)
  } finally {
    loading.value = false
  }
}

async function handleBusinessCancel() {
  if (!businessCancelForm.businessNo?.trim()) {
    return ElMessage.warning('请填写业务跟踪号')
  }
  loading.value = true
  try {
    const res = await cancelTaskByBusinessNo(
      businessCancelForm.businessNo.trim(),
      businessCancelForm.reason?.trim() || undefined,
    )
    showResult('业务取消已提交', 'success', res.data)
    ElMessage.success('业务取消已提交')
  } catch (e) {
    showResult('业务取消失败', 'error', e)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gen-page-card {
  border-radius: 12px;
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.gen-page-card :deep(.el-card__header) {
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding: 16px 20px;
}

.gen-page-card :deep(.el-card__body) {
  padding: 20px 20px 24px;
}

.card-title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--el-text-color-primary);
}

.result-card {
  margin-top: 0;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.result-detail {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 13px;
  color: #606266;
}

.outbound-item {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 16px 16px 0;
  margin-bottom: 12px;
}

.outbound-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.outbound-item-title {
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.outbound-actions {
  display: flex;
  gap: 12px;
  padding: 8px 0 16px;
}

/* ===== 移动端 ===== */
.m-gen-card :deep(.el-card__body) {
  padding: 12px;
}

.m-gen-card :deep(.el-card__header) {
  padding: 12px;
}

.gen-layout {
  align-items: stretch;
}

.gen-nav-col {
  margin-bottom: 0;
}

.gen-panel-col {
  min-width: 0;
}

/* 扁平类型列表 */
.gen-type-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  background: linear-gradient(165deg, #f8f9fc 0%, #f2f4f8 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 桌面：左右列同高，侧栏与表单区纵向铺满 */
@media (min-width: 768px) {
  .gen-layout {
    min-height: min(72vh, 580px);
  }

  .gen-nav-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .gen-type-nav {
    flex: 1;
    min-height: 0;
  }

  .gen-panel-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .gen-panel-surface {
    flex: 1;
    min-height: 0;
  }
}

.gen-type-nav__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: none;
  border-radius: 9px;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  color: var(--el-text-color-regular);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.gen-type-nav__item:hover {
  color: var(--el-text-color-primary);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gen-type-nav__item.is-active {
  font-weight: 600;
  color: var(--el-color-primary);
  background: #fff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--el-color-primary-light-7);
}

.gen-type-nav__item:focus-visible {
  outline: 2px solid var(--el-color-primary-light-5);
  outline-offset: 2px;
}

/* 右侧表单区 */
.gen-panel-surface {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.gen-panel-head {
  flex-shrink: 0;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background: linear-gradient(180deg, var(--el-fill-color-blank) 0%, var(--el-bg-color) 100%);
}

.gen-panel-head__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--el-text-color-primary);
}

.gen-panel-body {
  flex: 1;
  padding: 16px 20px 22px;
  overflow: auto;
  background: var(--el-fill-color-lighter);
}

/* 单块表单：内层卡片 + 统一控件样式 */
.gen-form-wrap {
  min-height: 80px;
  padding: 22px 24px 24px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-extra-light);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gen-form-wrap :deep(.gen-form) {
  padding: 0;
  max-width: 960px;
}

.gen-form-wrap :deep(.el-form-item) {
  margin-bottom: 18px;
}

.gen-form-wrap :deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--el-text-color-regular);
  line-height: 1.4;
}

.gen-form-wrap :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: box-shadow 0.15s ease;
}

.gen-form-wrap :deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

.gen-form-wrap :deep(.el-textarea__inner) {
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

.gen-form-wrap :deep(.el-input-number .el-input__wrapper) {
  border-radius: 8px;
}

/* 提交区：与字段区分隔 */
.gen-form-wrap :deep(.el-form-item:last-child) {
  margin-bottom: 0;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px dashed var(--el-border-color-lighter);
}

.gen-form-wrap :deep(.el-form-item:last-child .el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gen-form-wrap :deep(.el-form-item:last-child .el-button) {
  min-width: 120px;
  border-radius: 8px;
  padding: 10px 20px;
}

@media (max-width: 767px) {
  .gen-nav-col {
    margin-bottom: 14px;
  }

  .gen-type-nav {
    /* 条目较多时需留出可视高度，避免「移库」以下选项被裁切误以为未上线 */
    max-height: min(58vh, 440px);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  .gen-type-nav__item {
    width: auto;
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    text-align: center;
    font-size: 13px;
    padding: 10px 8px;
  }

  .gen-panel-surface {
    min-height: 0;
  }

  .gen-panel-head {
    padding: 14px 16px 12px;
  }

  .gen-panel-body {
    padding: 12px 12px 16px;
  }

  .gen-form-wrap {
    padding: 16px 14px 18px;
    border-radius: 8px;
  }

  .gen-form-wrap :deep(.el-form-item) {
    margin-bottom: 16px;
  }

  .gen-form-wrap :deep(.el-form-item:last-child .el-button) {
    min-width: 0;
    width: 100%;
  }
}
</style>
