<template>
  <div class="aps-req-page">
    <el-row :gutter="20" class="aps-req-row">
      <!-- 左侧：产需单列表 -->
      <el-col :span="8" class="aps-req-left" v-loading="reqLoading">
        <!-- 筛选区 -->
        <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
            <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
              <el-input v-model="queryParams.scheduleNo" placeholder="排产单号" clearable @keyup.enter.native="handleSearch"
                style="width: 130px;" size="small" />
              <el-input v-model="queryParams.customerName" placeholder="客户名" clearable
                @keyup.enter.native="handleSearch" style="width: 130px;" size="small" />
              <el-date-picker v-model="queryParams.prodDate" type="date" placeholder="生产日期" value-format="yyyy-MM-dd"
                style="width: 130px;" size="small" clearable @change="handleSearch" />
              <el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
              <el-button class="aps-btn-red" icon="el-icon-plus" size="mini" @click="handleAdd"></el-button>
            </div>
          </div>
        </div>

        <div class="panel-header">
          <span>产需单列表</span>
          <span style="font-weight:normal;color:var(--text-muted);font-size:11px;">共 {{ total }} 条</span>
        </div>

        <div class="list-container">
          <div v-for="item in reqList" :key="item.scheduleId" class="list-item"
            :class="{ active: currentReq && currentReq.scheduleId === item.scheduleId }" @click="handleReqClick(item)">
            <div class="item-title">
              {{ item.scheduleNo }}
              <span class="badge" :class="'badge-' + statusBadgeType(item.scheduleStatus)">{{
                statusMap[item.scheduleStatus] || '未知' }}</span>
            </div>
            <div class="item-sub">
              生产日期：{{ item.prodDate || '-' }}　客户：{{ item.customerName || '-' }}　业务员：{{ item.businessUser || '-' }}
            </div>
            <div class="item-actions">
              <button class="link-btn" @click.stop="handleDelete(item)">删除</button>
            </div>
          </div>
          <div v-if="reqList.length === 0 && !reqLoading" style="padding: 40px; text-align: center; color: #909399;">
            暂无产需单数据
          </div>
        </div>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList"
          style="padding: 10px; margin-bottom: 10px !important;" />
      </el-col>

      <!-- 右侧：详情区 -->
      <el-col :span="16" class="aps-req-right">
        <el-empty v-if="!currentReq" description="选择产需单查看更多信息" />

        <div v-else class="detail-panel">
          <div class="detail-card">
            <div class="detail-card-header">
              <span>产需单信息</span>
              <button class="header-btn" @click="handleEdit(currentReq)">编辑</button>
            </div>
            <div class="detail-card-body">
              <table class="req-info-table">
                <tbody>
                  <tr>
                    <td class="req-td-label">排产单号</td>
                    <td class="req-td-value">{{ currentReq.scheduleNo }}</td>
                    <td class="req-td-label">生产日期</td>
                    <td class="req-td-value">{{ currentReq.prodDate }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">排产状态</td>
                    <td class="req-td-value"><span class="aps-status-tag"
                        :class="'status-' + (currentReq.scheduleStatus || 0)">{{ statusMap[currentReq.scheduleStatus] ||
                        '未知' }}</span></td>
                    <td class="req-td-label">业务员</td>
                    <td class="req-td-value">{{ currentReq.businessUser }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">联系电话</td>
                    <td class="req-td-value">{{ currentReq.businessPhone }}</td>
                    <td class="req-td-label">订货单位</td>
                    <td class="req-td-value">{{ currentReq.customerName }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">交货期(天)</td>
                    <td class="req-td-value">{{ currentReq.deliveryCycle }}</td>
                    <td class="req-td-label">产品用途</td>
                    <td class="req-td-value">{{ currentReq.usePurpose }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">品名</td>
                    <td class="req-td-value" colspan="3">{{ currentReq.productType }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">厚度公差</td>
                    <td class="req-td-value">{{ currentReq.thicknessTolerance }}</td>
                    <td class="req-td-label">宽度公差</td>
                    <td class="req-td-value">{{ currentReq.widthTolerance }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">表面质量</td>
                    <td class="req-td-value">{{ currentReq.surfaceQuality }}</td>
                    <td class="req-td-label">表面处理</td>
                    <td class="req-td-value">{{ currentReq.surfaceTreatment }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">内径尺寸</td>
                    <td class="req-td-value">{{ currentReq.innerDiameter }}</td>
                    <td class="req-td-label">外径要求</td>
                    <td class="req-td-value">{{ currentReq.outerDiameter }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">包装要求</td>
                    <td class="req-td-value">{{ currentReq.packReq }}</td>
                    <td class="req-td-label">切边要求</td>
                    <td class="req-td-value">{{ currentReq.cutEdgeReq }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">单件重量</td>
                    <td class="req-td-value">{{ currentReq.singleCoilWeight }}</td>
                    <td class="req-td-label">交货重量偏差</td>
                    <td class="req-td-value">{{ currentReq.weightDeviation }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">其他技术要求</td>
                    <td class="req-td-value" colspan="3">{{ currentReq.otherTechReq }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">付款情况说明</td>
                    <td class="req-td-value" colspan="3">{{ currentReq.paymentDesc }}</td>
                  </tr>
                  <tr>
                    <td class="req-td-label">备注</td>
                    <td class="req-td-value" colspan="3">{{ currentReq.remark }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-card-header">
              <span>已绑定的销售订单（{{ boundOrderList.length }} 条）</span>
              <button class="header-btn" @click="openBindDialog">+ 添加订单</button>
            </div>
            <div class="detail-card-body" v-loading="boundLoading">
              <div v-if="(currentReq.orderList || []).length === 0"
                style="padding: 16px; text-align: center; color: #909399;">暂无绑定订单</div>
              <div v-else class="bound-order-cards">
                <div v-for="order in currentReq.orderList" :key="order.orderId" class="bound-order-card">
                  <div class="bound-order-card-header">
                    <span>{{ order.orderCode || ('订单 #' + order.orderId) }}</span>
                    <button class="link-btn" @click="handleUnbindByOrderId(order.orderId)">解绑</button>
                  </div>
                  <div class="bound-order-card-body">
                    <div style="font-size:12px; color:#7f8c8d; margin-bottom:3px;">
                      客户：<span style="color:#2c3e50;">{{ order.companyName || '-' }}</span>
                    </div>
                    <div style="font-size:12px; color:#7f8c8d; margin-bottom:3px;">
                      销售员：<span style="color:#2c3e50;">{{ order.salesman || '-' }}</span>
                    </div>
                    <div style="font-size:12px; color:#7f8c8d;">
                      交货日期：<span style="color:#2c3e50;">{{ order.deliveryDate || '-' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-card-header">
              <span>排产明细（{{ requirementDetailList.length }} 条，合计 {{ detailTotalWeight }} T）</span>
            </div>
            <div class="detail-card-body" style="padding:0;">
              <el-table :data="requirementDetailList" border size="small" v-loading="detailLoading" class="aps-table">
                <el-table-column label="规格" prop="spec" min-width="120" />
                <el-table-column label="材质" prop="material" width="90" align="center" />
                <el-table-column label="排产吨数" prop="scheduleWeight" width="100" align="right" />
                <el-table-column label="备注" prop="remark" min-width="120" />
              </el-table>
              <el-empty v-if="requirementDetailList.length === 0 && !detailLoading" description="暂无排产明细" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="700px" append-to-body
      :close-on-click-modal="false">
      <el-form ref="reqForm" :model="reqForm" :rules="reqRules" label-width="110px" size="small">
        <!-- 第一行：必填项 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排产单号" prop="scheduleNo">
              <el-input v-model="reqForm.scheduleNo" placeholder="自动生成或手动填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="prodDate">
              <el-date-picker v-model="reqForm.prodDate" type="date" value-format="yyyy-MM-dd" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 基本信息 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订货单位" prop="customerName">
              <el-input v-model="reqForm.customerName" />
            </el-form-item>
            <el-form-item label="业务员" prop="businessUser">
              <el-input v-model="reqForm.businessUser" />
            </el-form-item>
            <el-form-item label="联系电话" prop="businessPhone">
              <el-input v-model="reqForm.businessPhone" />
            </el-form-item>
            <el-form-item label="品名" prop="productType">
              <el-input v-model="reqForm.productType" />
            </el-form-item>
            <el-form-item label="交货期(天)" prop="deliveryCycle">
              <el-input-number v-model="reqForm.deliveryCycle" :min="0" :max="999" style="width:100%" />
            </el-form-item>
            <el-form-item label="产品用途" prop="usePurpose">
              <el-input v-model="reqForm.usePurpose" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厚度公差" prop="thicknessTolerance">
              <el-input v-model="reqForm.thicknessTolerance" />
            </el-form-item>
            <el-form-item label="宽度公差" prop="widthTolerance">
              <el-input v-model="reqForm.widthTolerance" />
            </el-form-item>
            <el-form-item label="表面质量" prop="surfaceQuality">
              <el-input v-model="reqForm.surfaceQuality" />
            </el-form-item>
            <el-form-item label="表面处理" prop="surfaceTreatment">
              <el-input v-model="reqForm.surfaceTreatment" />
            </el-form-item>
            <el-form-item label="内径尺寸" prop="innerDiameter">
              <el-input v-model="reqForm.innerDiameter" />
            </el-form-item>
            <el-form-item label="外径要求" prop="outerDiameter">
              <el-input v-model="reqForm.outerDiameter" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 包装及其他 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="包装要求" prop="packReq">
              <el-input v-model="reqForm.packReq" />
            </el-form-item>
            <el-form-item label="切边要求" prop="cutEdgeReq">
              <el-input v-model="reqForm.cutEdgeReq" />
            </el-form-item>
            <el-form-item label="单件重量" prop="singleCoilWeight">
              <el-input v-model="reqForm.singleCoilWeight" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货重量偏差" prop="weightDeviation">
              <el-input v-model="reqForm.weightDeviation" />
            </el-form-item>
            <el-form-item label="其他技术要求" prop="otherTechReq">
              <el-input v-model="reqForm.otherTechReq" type="textarea" :rows="2" />
            </el-form-item>
            <el-form-item label="付款情况说明" prop="paymentDesc">
              <el-input v-model="reqForm.paymentDesc" type="textarea" :rows="2" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="reqForm.remark" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" type="danger" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 绑定订单对话框 -->
    <el-dialog title="添加绑定订单" :visible.sync="bindDialogVisible" width="860px" append-to-body
      :close-on-click-modal="false" class="aps-bind-dialog">
      <div style="display: flex; gap: 16px; height: 420px;">
        <!-- 左侧：订单列表 -->
        <div style="width: 45%; display: flex; flex-direction: column;">
          <div style="display: flex; gap: 6px; margin-bottom: 10px;">
            <el-input v-model="bindQuery.keyword" placeholder="搜索订单编号/客户名" size="small" clearable style="flex:1;"
              @change="searchBindOrders" />
            <el-button size="small" class="aps-btn-red" icon="el-icon-search" @click="searchBindOrders">搜索</el-button>
          </div>
          <div style="flex:1; overflow-y: auto; border: 1px solid #e4e7ed; border-radius: 4px;"
            v-loading="bindSearchLoading" element-loading-text="搜索中...">
            <div v-for="item in candidateOrderList" :key="item.orderId" class="bind-order-item"
              :class="{ selected: isBindSelected(item), previewing: bindPreviewOrder && bindPreviewOrder.orderId === item.orderId }"
              @click="handleBindRowClick(item)">
              <el-checkbox :value="isBindSelected(item)" @change="toggleBindOrder(item)" @click.stop
                style="margin-right: 8px;" />
              <div style="flex:1; min-width:0;">
                <div style="font-weight:500; font-size:13px; color:#2c3e50;">{{ item.orderCode }}</div>
                <div style="font-size:11px; color:#7f8c8d; margin-top:2px;">{{ item.companyName }} · {{ item.salesman }}
                </div>
              </div>
            </div>
            <div v-if="candidateOrderList.length === 0" style="padding:30px; text-align:center; color:#909399;">暂无订单
            </div>
          </div>
        </div>

        <!-- 右侧：产品内容预览 -->
        <div style="width: 55%; display: flex; flex-direction: column;">
          <div
            style="font-size:13px; font-weight:600; color:#2c3e50; margin-bottom:8px; padding-left:8px; border-left:3px solid #ff4d4f;">
            {{ bindPreviewOrder ? bindPreviewOrder.orderCode + ' - 产品明细' : '点击订单行预览产品明细' }}
          </div>
          <div style="flex:1; overflow-y: auto; border: 1px solid #e4e7ed; border-radius: 4px; padding: 10px;"
            v-if="bindPreviewOrder">
            <el-table :data="bindPreviewProducts" border size="small" style="width:100%;">
              <el-table-column label="规格" prop="spec" min-width="100" />
              <el-table-column label="材质" prop="material" width="80" />
              <el-table-column label="数量(吨)" prop="quantity" width="80" align="right" />
              <!-- <el-table-column label="含税单价" prop="taxPrice" width="80" align="right" /> -->
              <el-table-column label="备注" prop="remark" min-width="80" />
            </el-table>
            <div style="margin-top:8px; font-size:12px; color:#7f8c8d; display:flex; gap:16px;">
              <span>产品名称：{{ bindPreviewProductName }}</span>
              <span>总数量：{{ bindPreviewTotalQty }} 吨</span>
              <span>含税总额：{{ bindPreviewTotalAmount }}</span>
            </div>
          </div>
          <div v-else
            style="flex:1; display:flex; align-items:center; justify-content:center; color:#bfbfbf; font-size:13px;">
            请点击左侧订单行查看产品明细
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="margin-top:12px;">
        <span style="font-size:12px; color:#7f8c8d; margin-right:auto;">已选 {{ selectedBindOrders.length }} 个订单</span>
        <el-button :loading="bindBtnLoading" type="danger" @click="confirmBind">确 定 绑 定</el-button>
        <el-button @click="bindDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRequirement,
  getRequirement,
  addRequirement,
  updateRequirement,
  delRequirement,
  addRel,
  delRel,
  addRequirementDetail
} from '@/api/aps/requirement'
import { listCrmOrder } from '@/api/aps/order'
import { parseProductContent } from '@/utils/productContent'

export default {
  name: 'ApsRequirement',
  data() {
    return {
      // 左侧列表
      reqLoading: false,
      reqList: [],
      total: 0,
      currentReq: null,
      queryParams: {
        scheduleNo: '',
        prodDate: '',
        customerName: '',
        pageNum: 1,
        pageSize: 10
      },
      statusMap: { 0: '草稿', 1: '待审核', 2: '已下达', 3: '已退回' },
      statusBadgeMap: { 0: 'gray', 1: 'blue', 2: 'green', 3: 'red' },

      // 绑定订单
      boundOrderList: [],
      bindDialogVisible: false,
      bindQuery: { keyword: '', pageNum: 1, pageSize: 50 },
      candidateOrderList: [],
      selectedBindOrders: [],
      bindBtnLoading: false,
      bindSearchLoading: false,
      bindPreviewOrder: null,
      bindPreviewProducts: [],
      bindPreviewProductName: '',
      bindPreviewTotalQty: 0,
      bindPreviewTotalAmount: 0,

      // 排产明细
      detailLoading: false,
      requirementDetailList: [],

      // 新增/编辑对话框
      dialogVisible: false,
      dialogTitle: '新增产需单',
      btnLoading: false,
      reqForm: this.getEmptyForm(),
      reqRules: {
        scheduleNo: [{ required: true, message: '排产单号不能为空', trigger: 'blur' }],
        prodDate: [{ required: true, message: '生产日期不能为空', trigger: 'change' }]
      }
    }
  },
  computed: {
    detailTotalWeight() {
      return this.requirementDetailList.reduce((sum, item) => {
        const n = Number(item.scheduleWeight)
        return isNaN(n) ? sum : sum + n
      }, 0)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getEmptyForm() {
      return {
        scheduleId: undefined,
        scheduleNo: '',
        prodDate: '',
        customerName: '',
        businessUser: '',
        businessPhone: '',
        deliveryCycle: undefined,
        usePurpose: '',
        productType: '',
        thicknessTolerance: '',
        widthTolerance: '',
        surfaceQuality: '',
        surfaceTreatment: '',
        innerDiameter: '',
        outerDiameter: '',
        packReq: '',
        cutEdgeReq: '',
        singleCoilWeight: '',
        weightDeviation: '',
        otherTechReq: '',
        paymentDesc: '',
        remark: ''
      }
    },

    handleSearch() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    statusBadgeType(status) {
      return this.statusBadgeMap[status] || 'gray'
    },

    getList() {
      this.reqLoading = true
      listRequirement(this.queryParams).then(res => {
        this.reqList = res.rows || []
        this.total = res.total || 0
      }).catch(() => {
        this.reqList = []
        this.total = 0
      }).finally(() => {
        this.reqLoading = false
      })
    },

    handleReqClick(item) {
      this.currentReq = item
      this.detailLoading = true
      getRequirement(item.scheduleId).then(res => {
        if (res.data) {
          this.currentReq = res.data
          this.requirementDetailList = res.data.detailList || []
        }
      }).catch(() => {
        this.requirementDetailList = []
      }).finally(() => {
        this.detailLoading = false
      })
    },

    // ====== 新增/编辑 ======
    resetForm() {
      this.reqForm = this.getEmptyForm()
    },

    handleAdd() {
      this.resetForm()
      this.dialogTitle = '新增产需单'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.reqForm && this.$refs.reqForm.clearValidate()
      })
    },

    handleEdit(item) {
      getRequirement(item.scheduleId).then(res => {
        this.reqForm = { ...this.getEmptyForm(), ...res.data }
        this.dialogTitle = '编辑产需单'
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.reqForm && this.$refs.reqForm.clearValidate()
        })
      })
    },

    submitForm() {
      this.$refs.reqForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        const action = this.reqForm.scheduleId ? updateRequirement : addRequirement
        action(this.reqForm).then(() => {
          this.$modal.msgSuccess(this.reqForm.scheduleId ? '修改成功' : '新增成功')
          this.dialogVisible = false
          this.getList()
        }).catch(() => {
          this.$modal.msgError('操作失败')
        }).finally(() => {
          this.btnLoading = false
        })
      })
    },

    handleDelete(item) {
      this.$confirm(`确认删除产需单「${item.scheduleNo}」吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRequirement(item.scheduleId).then(() => {
          this.$modal.msgSuccess('删除成功')
          if (this.currentReq && this.currentReq.scheduleId === item.scheduleId) {
            this.currentReq = null
          }
          this.getList()
        })
      }).catch(() => { })
    },

    openBindDialog() {
      this.bindDialogVisible = true
      this.selectedBindOrders = []
      this.bindPreviewOrder = null
      this.bindPreviewProducts = []
      this.bindPreviewProductName = ''
      this.bindPreviewTotalQty = 0
      this.bindPreviewTotalAmount = 0
      this.searchBindOrders()
    },

    searchBindOrders() {
      this.bindSearchLoading = true
      listCrmOrder(this.bindQuery).then(res => {
        this.candidateOrderList = res.rows || []
      }).catch(() => {
        this.candidateOrderList = []
      }).finally(() => {
        this.bindSearchLoading = false
      })
    },

    isBindSelected(order) {
      return this.selectedBindOrders.some(o => o.orderId === order.orderId)
    },

    toggleBindOrder(order) {
      const idx = this.selectedBindOrders.findIndex(o => o.orderId === order.orderId)
      if (idx >= 0) {
        this.selectedBindOrders.splice(idx, 1)
      } else {
        this.selectedBindOrders.push(order)
      }
    },

    handleBindRowClick(order) {
      this.bindPreviewOrder = order
      if (order.productContent) {
        const parsed = parseProductContent(order.productContent)
        this.bindPreviewProducts = parsed.products || []
        this.bindPreviewProductName = parsed.productName || ''
        this.bindPreviewTotalQty = parsed.totalQuantity || 0
        this.bindPreviewTotalAmount = parsed.totalTaxTotal || 0
      } else {
        this.bindPreviewProducts = []
        this.bindPreviewProductName = ''
        this.bindPreviewTotalQty = 0
        this.bindPreviewTotalAmount = 0
      }
    },

    confirmBind() {
      if (this.selectedBindOrders.length === 0) {
        this.$message.warning('请选择要绑定的订单')
        return
      }
      this.bindBtnLoading = true
      const scheduleId = this.currentReq.scheduleId
      const allPromises = []

      this.selectedBindOrders.forEach(order => {
        // 1. 创建订单关联
        allPromises.push(
          addRel({
            orderId: order.orderId,
            scheduleId: scheduleId,
            relWeight: null,
            remark: ''
          })
        )

        // 2. 解析 productContent，每行产品创建一条排产明细
        if (order.productContent) {
          const parsed = parseProductContent(order.productContent)
          const products = parsed.products || []
          const productType = parsed.productName || ''
          products.forEach(prod => {
            allPromises.push(
              addRequirementDetail({
                scheduleId: scheduleId,
                orderDetailId: order.orderId,
                spec: prod.spec || '',
                material: prod.material || '',
                scheduleWeight: prod.quantity || 0,
                productType: productType,
                remark: prod.remark || ''
              })
            )
          })
        }
      })

      Promise.all(allPromises).then(() => {
        this.$modal.msgSuccess('绑定成功，排产明细已生成')
        this.bindDialogVisible = false
        this.handleReqClick(this.currentReq)
      }).catch(() => {
        this.$modal.msgError('绑定或创建明细失败')
      }).finally(() => {
        this.bindBtnLoading = false
      })
    },

    handleUnbindByOrderId(orderId) {
      const rel = this.boundOrderList.find(r => r.orderId === orderId)
      if (!rel) {
        this.$message.warning('未找到关联记录')
        return
      }
      this.$confirm('确认解绑该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRel(rel.relId).then(() => {
          this.$modal.msgSuccess('解绑成功')
          this.handleReqClick(this.currentReq)
        })
      }).catch(() => { })
    },
  }
}
</script>

<style scoped lang="scss">
@import './scss/aps-theme.scss';

.aps-req-page {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  background: $aps-silver-1;
}

.aps-req-row {
  height: 100%;
}

// ====== 左侧（参照 HTML 产需单列表） ======
.aps-req-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid $aps-silver-3;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}

.panel-header {
  background: $aps-silver-mid;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: $aps-text;
  border-bottom: 1px solid $aps-border;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.list-item {
  padding: 10px 12px;
  border-bottom: 1px solid $aps-silver-1;
  cursor: pointer;
  transition: background 0.15s;
}

.list-item:hover {
  background: $aps-silver-1;
}

.list-item.active {
  background: $aps-red-1;
  border-left: 3px solid $aps-red-2;
}

.list-item .item-title {
  font-weight: 500;
  color: $aps-text;
  font-size: 13px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.list-item .item-sub {
  font-size: 12px;
  color: $aps-text-muted;
  margin-bottom: 4px;
}

.list-item .item-actions {
  display: flex;
  gap: 8px;
}

// ====== 徽标 ======
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.badge-red {
  background: #fdecea;
  color: $aps-red-2;
  border: 1px solid #f5b7b1;
}

.badge-green {
  background: #eafaf1;
  color: #27ae60;
  border: 1px solid #a9dfbf;
}

.badge-blue {
  background: #eaf4fb;
  color: #2980b9;
  border: 1px solid #aed6f1;
}

.badge-gray {
  background: $aps-silver-1;
  color: $aps-text-muted;
  border: 1px solid $aps-border;
}

// ====== 右侧（平铺） ======
.aps-req-right {
  height: 100%;
  background: #fff;
  border: 1px solid $aps-silver-3;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.detail-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: $aps-bg;
  min-height: 0;
}

// ====== 右侧详情卡片 ======
.detail-card {
  background: $aps-white;
  border: 1px solid $aps-border;
  border-radius: $aps-radius;
  box-shadow: $aps-shadow-sm;
  overflow: hidden;
}

.detail-card-header {
  background: linear-gradient(to right, $aps-red-2, $aps-red-3);
  color: white;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-card-header .header-btn {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.detail-card-header .header-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.7);
}

.detail-card-body {
  padding: 0;
}

.req-info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid $aps-border;
  font-size: 13px;

  td {
    border: 1px solid $aps-border;
    padding: 6px 10px;
    vertical-align: middle;
  }

  .req-td-label {
    background: $aps-silver-1;
    color: $aps-text-muted;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    width: 100px;
    text-align: right;
  }

  .req-td-value {
    color: $aps-text;
    background: #fff;
    word-break: break-all;

    &:empty::after {
      content: '-';
      color: $aps-silver-3;
    }
  }
}

.aps-status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;

  &.status-0 {
    background: $aps-silver-2;
    color: $aps-silver-4;
  }

  &.status-1 {
    background: #e6f7ff;
    color: #1890ff;
  }

  &.status-2 {
    background: #f6ffed;
    color: #52c41a;
  }

  &.status-3 {
    background: $aps-red-1;
    color: $aps-red-2;
  }
}

.aps-table {
  width: 100%;

  ::v-deep th {
    background: $aps-silver-1 !important;
    color: $aps-silver-5 !important;
    font-weight: 600 !important;
  }
}

.link-btn {
  color: $aps-red-2;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.link-btn:hover {
  text-decoration: underline;
}

// ====== Element 按钮覆盖 ======
::v-deep .el-button--danger {
  background: $aps-red-2;
  border-color: $aps-red-2;
}

::v-deep .el-button--danger:hover {
  background: $aps-red-3;
  border-color: $aps-red-3;
}

// ====== 按钮 ======
.aps-btn-red {
  @include aps-btn-red;
}

.aps-btn-silver {
  @include aps-btn-silver;
}

// ====== 绑定订单卡片 ======
.bound-order-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bound-order-card {
  border: 1px solid $aps-border;
  border-radius: $aps-radius;
  background: $aps-white;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.bound-order-card .bound-order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: $aps-silver-1;
  border-bottom: 1px solid $aps-border;
  font-size: 13px;
  font-weight: 600;
  color: $aps-text;
  border-radius: $aps-radius $aps-radius 0 0;
}

.bound-order-card .bound-order-card-body {
  padding: 10px 12px;
}

// ====== 绑定弹窗 ======
.bind-order-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #ecf0f1;
  cursor: pointer;
  transition: background 0.15s;
}

.bind-order-item:hover {
  background: #f5f5f5;
}

.bind-order-item.selected {
  background: #fdecea;
}

.bind-order-item.previewing {
  background: #fdecea;
  border-left: 3px solid $aps-red-2;
}

.aps-bind-dialog ::v-deep .el-dialog__body {
  padding: 16px 20px 0 20px;
}
</style>
