<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="950px"
    append-to-body
    @close="handleClose"
    :close-on-click-modal="false"  
    :close-on-press-escape="false" 
  >
    <el-form ref="detailForm" :model="form" label-width="100px" :rules="rules">
      <!-- 通用信息：保留货物ID、计划总数量（全局字段） -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="货物ID" prop="materialId">
            <el-input
              v-model="form.materialId"
              placeholder="请选择或输入货物ID"
              readonly
              @click.native="openMaterialSelector = true"
              style="cursor: pointer"
            >
              <template slot="suffix">
                <el-button
                  icon="el-icon-search"
                  size="mini"
                  @click.native="openMaterialSelector = true"
                ></el-button>
              </template>
            </el-input>
            <!-- 物料选择器弹窗 -->
            <el-dialog
              title="选择物料"
              :visible.sync="openMaterialSelector"
              width="90%"
              append-to-body
              :close-on-click-modal="false" 
              :close-on-press-escape="false" 
              :modal="true"                  
              :modal-append-to-body="true"   
            >
              <div style="height: 70vh; overflow: auto; padding: 0 10px;">
                <MaterialSelector
                  ref="materialsSeletor"
                  @selection-change="handleMaterialSelectionChange"
                  :selected-material-codes="form.materialUuids ? [form.materialUuids] : []"
                  :multiple="true"
                />
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click.native="openMaterialSelector = false">取消</el-button>
                <el-button type="primary" @click.native="confirmMaterialSelect">确认选择</el-button>
              </div>
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划总数量" prop="totalPlannedQuantity">
            <el-input
              v-model.number="form.totalPlannedQuantity"
              placeholder="请输入计划总数量"
              type="number"
              min="1"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 库存信息列表 -->
      <el-row v-if="form.materialId && form.materialId.trim()" style="margin: 10px 0;">
        <el-col :span="24">
          <div style="margin-bottom: 8px; font-weight: 600; color: #1989fa;">
            库存信息列表
          </div>
          <el-table
            ref="inventoryTable"
            :data="inventoryList"
            border
            size="small"
            max-height="400"
            highlight-current-row
            stripe
            empty-text="暂无库存数据"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="库存ID" width="100" />
            <el-table-column prop="materialId" label="货物ID" width="100" />
            <el-table-column prop="batchId" label="批次ID" width="100" />
            <el-table-column prop="orderId" label="订单ID" width="120" />
            <el-table-column prop="warehouseId" label="仓库ID" width="100" />
            <el-table-column prop="locationId" label="库位ID" width="100" />
            <el-table-column
              prop="inventoryType"
              label="库存类型"
              width="100"
            >
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.inventoryType === 1 ? 'primary' : 'success'">
                  {{ scope.row.inventoryType === 1 ? '正品' : '次品' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="可用数量" width="100">
              <template slot-scope="scope">
                {{ (scope.row.quantity || 0) - (scope.row.lockedQuantity || 0) }}
              </template>
            </el-table-column>
            <el-table-column label="选择数量" width="120">
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.selectedQty"
                  type="number"
                  size="mini"
                  min="1"
                  :max="(scope.row.quantity || 0) - (scope.row.lockedQuantity || 0)"
                  @input="handleRowQtyInput(scope.row)"
                  placeholder="输入数量"
                />
              </template>
            </el-table-column>
            <el-table-column label="计划件数" width="120">
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.plannedPackages"
                  type="number"
                  size="mini"
                  min="0"
                  @input="handleRowPackagesInput(scope.row)"
                  placeholder="输入件数"
                />
              </template>
            </el-table-column>
          </el-table>

          <!-- 选中行的扩展字段填写区域 -->
          <div 
            v-if="currentSelectedRow" 
            style="margin-top: 10px; padding: 10px; border: 1px solid #e6e6e6; border-radius: 4px;"
          >
            <div style="margin-bottom: 8px; font-weight: 600; color: #1989fa;">
              库存【ID: {{ currentSelectedRow.id }}】明细信息
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="约数" prop="divisor">
                  <el-input
                    v-model.number="currentSelectedRow.divisor"
                    placeholder="请输入约数"
                    type="number"
                    min="0"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="标签颜色" prop="labelColor">
                  <el-select v-model="currentSelectedRow.labelColor" placeholder="请选择标签颜色">
                    <el-option label="红色" value="1"></el-option>
                    <el-option label="蓝色" value="2"></el-option>
                    <el-option label="绿色" value="3"></el-option>
                    <el-option label="黄色" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单价" prop="unitPrice">
                  <el-input
                    v-model.number="currentSelectedRow.unitPrice"
                    placeholder="请输入单价"
                    type="number"
                    min="0"
                    step="0.01"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="12">
                <el-form-item label="收货时间" prop="receivedAt">
                  <el-date-picker
                    v-model="currentSelectedRow.receivedAt"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择收货时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收货人" prop="receivedBy">
                  <el-input
                    v-model="currentSelectedRow.receivedBy"
                    placeholder="请输入收货人"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="24">
                <el-form-item label="凭证号" prop="voucherNumber">
                  <el-input
                    v-model="currentSelectedRow.voucherNumber"
                    placeholder="请输入凭证号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="currentSelectedRow.remark"
                    placeholder="请输入备注"
                    type="textarea"
                    rows="2"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 已生成的明细预览 -->
      <el-row v-if="details.length > 0" style="margin: 10px 0;">
        <el-col :span="24">
          <div style="margin-bottom: 8px; font-weight: 600; color: #1989fa;">
            已生成明细项
          </div>
          <el-table
            :data="details"
            border
            size="small"
            max-height="200"
          >
            <el-table-column prop="batchId" label="批次ID" />
            <el-table-column prop="warehouseId" label="仓库ID" />
            <el-table-column prop="locationId" label="库位ID" />
            <el-table-column prop="plannedQuantity" label="计划数量" />
            <el-table-column prop="actualQuantity" label="实际数量" />
            <el-table-column prop="plannedPackages" label="计划件数" />
            <el-table-column prop="actualPackages" label="实际件数" />
            <el-table-column prop="divisor" label="约数" />
            <el-table-column prop="unitPrice" label="单价" />
            <el-table-column prop="labelColor" label="标签颜色">
              <template slot-scope="scope">
                {{ getLabelColorText(scope.row.labelColor) }}
              </template>
            </el-table-column>
            <el-table-column prop="receivedAt" label="收货时间" />
            <el-table-column prop="receivedBy" label="收货人" />
            <el-table-column prop="voucherNumber" label="凭证号" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click.native="removeDetail(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="handleClose">取消</el-button>
      <el-button type="primary" @click.native="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listInventoryByMaterialId } from "@/api/inventory/inventory"
import MaterialSelector from '../../../components/materialsSeletor.vue'

// 防抖函数（适配Vue2 this上下文）
function debounce(fn, delay = 500) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

export default {
  name: 'OutboundOrderFormWithItems',
  components: {
    MaterialSelector
  },
  props: {
    title: {
      type: String,
      default: '新增明细项'
    },
    open: {
      type: Boolean,
      default: false
    },
    initForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 仅保留全局字段：货物ID、计划总数量
      form: {
        materialUuids: '',
        materialId: '',
        totalPlannedQuantity: null,
        itemStatus: '1' // 对应数据库状态：1-待收货
      },
      details: [],
      inventoryList: [],
      loadingInstance: null,
      rules: {
        materialId: [{ 
          required: true, 
          message: '请选择货物ID', 
          trigger: ['change', 'blur']
        }]
        // totalPlannedQuantity: [{ 
        //   required: true, 
        //   message: '请输入计划总数量', 
        //   trigger: 'blur', 
        //   type: 'number' 
        // }, {
        //   validator: (rule, value, callback) => {
        //     if (value && value < 1) {
        //       callback(new Error('计划总数量不能小于1'))
        //     } else {
        //       callback()
        //     }
        //   },
        //   trigger: 'blur'
        // }]
      },
      openMaterialSelector: false,
      selectedMaterialId: '',
      selectedMaterialInfo: null,
      currentSelectedRow: null // 存储当前点击的库存行
    }
  },
  created() {
    this.debounceMaterialIdChange = debounce(this.handleMaterialIdChange.bind(this), 500)
  },
  watch: {
    open: {
      handler(newVal) {
        if (newVal) {
          this.form = { ...this.$options.data().form, ...this.initForm }
          this.selectedMaterialId = this.form.materialId || ''
          this.selectedMaterialInfo = null
          this.currentSelectedRow = null // 重置选中行
          if (this.form.materialId && this.form.materialId.trim()) {
            this.handleMaterialIdChange()
          }
        } else {
          this.$nextTick(() => {
            this.closeLoading()
            if (this.$refs.detailForm) {
              this.$refs.detailForm.resetFields()
            }
          })
        }
      },
      immediate: true
    },
    initForm: {
      handler(val) {
        if (this.open) {
          this.form = { ...this.$options.data().form, ...val }
          this.selectedMaterialId = this.form.materialId || ''
          this.selectedMaterialInfo = null
          this.currentSelectedRow = null // 重置选中行
          if (this.form.materialId && this.form.materialId.trim()) {
            this.handleMaterialIdChange()
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 标签颜色值转文本
    getLabelColorText(value) {
      const colorMap = {
        '1': '红色',
        '2': '蓝色',
        '3': '绿色',
        '4': '黄色'
      }
      return colorMap[value] || '-'
    },
    closeLoading() {
      if (this.loadingInstance) {
        this.loadingInstance.close()
        this.loadingInstance = null
      }
    },
    async handleMaterialIdChange() {
      const materialId = this.form.materialId?.trim() || ''
      if (!materialId) {
        this.inventoryList = []
        this.closeLoading()
        return
      }
      try {
        this.loadingInstance = this.$loading({
          text: '查询中...',
          target: this.$el,
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const res = await listInventoryByMaterialId(materialId)
        if (res.code === 200) {
          // 为每个库存行初始化扩展字段
          this.inventoryList = (res.rows || []).map(item => ({ 
            ...item, 
            selectedQty: null,
            plannedPackages: null,
            divisor: null, // 约数
            labelColor: '', // 标签颜色
            unitPrice: null, // 单价
            receivedAt: '', // 收货时间
            receivedBy: '', // 收货人
            voucherNumber: '', // 凭证号
            remark: '', // 备注
            quantity: item.quantity || 0,
            lockedQuantity: item.lockedQuantity || 0
          }))
          if (this.inventoryList.length === 0) {
            this.$message.warning('未查询到该物料的库存信息')
          }
        } else {
          this.inventoryList = []
          this.$message.error(res.msg || '查询库存失败')
        }
      } catch (error) {
        this.$message.error('查询库存失败：' + (error.message || '网络异常'))
        this.inventoryList = []
      } finally {
        this.closeLoading()
      }
    },
    // 点击库存行触发 - 显示扩展字段填写区域
    handleRowClick(row) {
      this.currentSelectedRow = row
      // 自动选中当前行
      this.$refs.inventoryTable.toggleRowSelection(row, true)
    },
    handleRowQtyInput(row) {
      if (isNaN(row.selectedQty) || row.selectedQty === '') {
        row.selectedQty = null
        return
      }
      const availableQty = (row.quantity || 0) - (row.lockedQuantity || 0)
      if (row.selectedQty > availableQty) {
        this.$message.warning(`选择数量不能超过可用数量${availableQty}`)
        row.selectedQty = availableQty
      } else if (row.selectedQty < 1) {
        this.$message.warning('选择数量不能小于1')
        row.selectedQty = 1
      }
    },
    handleRowPackagesInput(row) {
      if (isNaN(row.plannedPackages) || row.plannedPackages === '') {
        row.plannedPackages = null
        return
      }
      if (row.plannedPackages < 0) {
        this.$message.warning('计划件数不能小于0')
        row.plannedPackages = 0
      }
    },
    handleSelectionChange(rows) {
      // 过滤已取消选择的行
      this.details = this.details.filter(detail =>
        rows.some(row => row.id === detail.inventoryId)
      )
      // 处理选中行，携带行级扩展字段
      rows.forEach(row => {
        // 选择数量为空则跳过
        if (row.selectedQty === null || row.selectedQty === '') return
        
        const availableQty = (row.quantity || 0) - (row.lockedQuantity || 0)
        if (row.selectedQty > availableQty || row.selectedQty < 1) {
          this.$message.warning(`行${row.id}的选择数量不合法，请重新输入`)
          row.selectedQty = Math.min(Math.max(row.selectedQty, 1), availableQty)
        }

        // 校验行级必填字段（可根据实际需求调整）
        if (!row.divisor && row.divisor !== 0) {
          this.$message.warning(`库存ID:${row.id} 请填写约数`)
          return
        }
        if (!row.labelColor) {
          this.$message.warning(`库存ID:${row.id} 请选择标签颜色`)
          return
        }
        if (!row.unitPrice && row.unitPrice !== 0) {
          this.$message.warning(`库存ID:${row.id} 请填写单价`)
          return
        }
        if (!row.receivedAt) {
          this.$message.warning(`库存ID:${row.id} 请选择收货时间`)
          return
        }
        if (!row.receivedBy) {
          this.$message.warning(`库存ID:${row.id} 请填写收货人`)
          return
        }

        const existingIndex = this.details.findIndex(d => d.inventoryId === row.id)
        const newDetail = {
          inventoryId: row.id,
          materialId: this.form.materialId,
          batchId: row.batchId || '',
          warehouseId: row.warehouseId || '',
          locationId: row.locationId || '',
          plannedQuantity: row.selectedQty,
          actualQuantity: row.selectedQty,
          plannedPackages: row.plannedPackages || 0,
          actualPackages: row.plannedPackages || 0, // 实际件数默认等于计划件数
          divisor: row.divisor, // 行级约数
          labelColor: row.labelColor, // 行级标签颜色
          unitPrice: row.unitPrice, // 行级单价
          itemStatus: this.form.itemStatus || '1',
          receivedAt: row.receivedAt, // 行级收货时间
          receivedBy: row.receivedBy, // 行级收货人
          voucherNumber: row.voucherNumber || '', // 行级凭证号
          remark: row.remark || '' // 行级备注
        }
        if (existingIndex > -1) {
          this.details.splice(existingIndex, 1, newDetail)
        } else {
          this.details.push(newDetail)
        }
      })
    },
    removeDetail(row) {
      this.details = this.details.filter(d => d.inventoryId !== row.inventoryId)
      if (this.$refs.inventoryTable && row.id) {
        const inventoryRow = this.inventoryList.find(item => item.id === row.inventoryId)
        if (inventoryRow) {
          this.$refs.inventoryTable.toggleRowSelection(inventoryRow, false)
          // 清空该行的填写内容
          inventoryRow.selectedQty = null
          inventoryRow.plannedPackages = null
          inventoryRow.divisor = null
          inventoryRow.labelColor = ''
          inventoryRow.unitPrice = null
          inventoryRow.receivedAt = ''
          inventoryRow.receivedBy = ''
          inventoryRow.voucherNumber = ''
          inventoryRow.remark = ''
          // 如果删除的是当前选中行，重置currentSelectedRow
          if (this.currentSelectedRow && this.currentSelectedRow.id === row.inventoryId) {
            this.currentSelectedRow = null
          }
        }
      }
    },
    handleSubmit() {
      if (!this.form.materialId?.trim()) {
        this.$message.error('请先选择物料ID')
        return
      }
      
      this.$refs.detailForm.validate(async (valid) => {
        if (!valid) {
          this.$message.error('表单校验失败，请检查必填项')
          return
        }
        if (this.details.length === 0) {
          this.$message.error('请选择库存并填写数量生成明细')
          return
        }
        
        // 计算实际总数量
        const totalActual = this.details.reduce((sum, d) => sum + (d.actualQuantity || 0), 0)
        if (this.form.totalPlannedQuantity && this.form.totalPlannedQuantity !== totalActual) {
          try {
            await this.$confirm(
              `实际总数量(${totalActual})与计划总数量(${this.form.totalPlannedQuantity})不一致，是否继续提交？`,
              '提示',
              {
                confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
          } catch (e) {
            return
          }
        }
        this.$emit('submit', this.details)
        this.$emit('update:open', false)
      })
    },
    handleClose() {
      this.closeLoading()
      this.$nextTick(() => {
        this.form = this.$options.data().form
        this.details = []
        this.inventoryList = []
        this.selectedMaterialId = ''
        this.selectedMaterialInfo = null
        this.openMaterialSelector = false
        this.currentSelectedRow = null // 重置选中行
        if (this.$refs.detailForm) {
          this.$refs.detailForm.resetFields()
        }
      })
      this.$emit('update:open', false)
    },
    handleMaterialSelectionChange() {
      const selectedData = this.$refs.materialsSeletor?.getSelectedMaterials?.() || this.$refs.materialsSeletor?.selectedList || []
      if (selectedData && selectedData.length > 0) {
        this.selectedMaterialInfo = selectedData[0]
        this.selectedMaterialId = this.selectedMaterialInfo || ''
      } else {
        this.selectedMaterialInfo = null
        this.selectedMaterialId = ''
      }
    },
    confirmMaterialSelect() {
      this.handleMaterialSelectionChange()
      if (!this.selectedMaterialId) {
        this.$message.warning('请选择物料后再确认')
        return
      }
      
      this.$set(this.form, 'materialId', this.selectedMaterialId)
      this.$set(this.form, 'materialUuids', this.selectedMaterialInfo.materialCode || this.selectedMaterialId)
      
      this.openMaterialSelector = false
      this.handleMaterialIdChange()
      this.$nextTick(() => {
        if (this.$refs.detailForm) {
          this.$refs.detailForm.validateField('materialId')
        }
      })
    }
  },
  beforeDestroy() {
    this.closeLoading()
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}

/deep/ .el-table {
  --el-table-header-text-color: #303133;
  --el-table-row-hover-bg-color: #f8f9fa;
}

/deep/ .el-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

/deep/ .el-table .el-tag {
  margin: 0;
}

/deep/ .el-table .el-input {
  width: 100px;
}

/deep/ .material-selector-container {
  height: 100%;
  min-height: 500px;
}

/* 修复模态框遮罩层点击穿透问题 */
/deep/ .el-dialog__wrapper {
  .el-modal__mask {
    pointer-events: auto !important;
  }
  .el-dialog {
    pointer-events: auto !important;
  }
}
</style>