<template>
  <div class="semi-module">
    <div class="header-tools">
      <div class="left-tools">

        <el-select
            v-model="queryParams.company"
            placeholder="所属公司"
            class="filter-item-select"
            clearable
            filterable
            @change="fetchData"
            style="width: 160px;"
        >
          <el-option v-for="item in companyOptions" :key="item" :label="item" :value="item" />
        </el-select>

        <el-input
            v-model="queryParams.keyword"
            placeholder="请输入搜索关键字"
            class="filter-item-input"
            clearable
            @input="handleInputSearch"
            @clear="fetchData"
            style="width: 280px;"
        >
          <template #prepend>
            <el-select v-model="queryParams.searchField" style="width: 90px" @change="fetchData">
              <el-option label="全部" value="all" />
              <el-option label="名称" value="name" />
              <el-option label="规格" value="spec" />
              <el-option label="批号" value="batch_number" />
              <el-option label=" BOM" value="bom_code" />
            </el-select>
          </template>
        </el-input>

        <el-input
            v-model="queryParams.sku"
            placeholder="请输入SKU搜索..."
            class="filter-item-input"
            clearable
            @input="handleInputSearch"
            @clear="fetchData"
            @keyup.enter="fetchData"
            style="width: 160px;"
        >
          <template #prefix><el-icon><Search /></el-icon></template>
        </el-input>

        <el-select
            v-model="queryParams.category"
            placeholder="类别"
            class="filter-item-select"
            clearable
            filterable
            @change="fetchData"
            style="width: 160px;"
        >
          <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
        </el-select>

        <el-select
            v-model="queryParams.material_type"
            placeholder="类型"
            class="filter-item-select"
            clearable
            filterable
            @change="fetchData"
            style="width: 160px;"
        >
          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
        </el-select>

        <el-button type="primary" plain class="search-btn" @click="fetchData">搜索</el-button>
        <el-button class="reset-btn" @click="resetQuery">重置</el-button>

        <el-popover
            placement="bottom"
            width="600"
            trigger="click"
            v-model:visible="advancedFilterVisible"
        >
          <template #reference>
            <el-button type="primary" plain>高级筛选</el-button>
          </template>
          <div style="padding: 10px;">
            <div v-for="(cond, idx) in advancedConditions" :key="idx" style="display: flex; gap: 10px; margin-bottom: 10px; align-items: center;">
              <el-select v-model="cond.field" placeholder="字段" style="width: 150px;" :teleported="false">
                <el-option v-for="opt in fieldOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
              <el-select v-model="cond.operator" placeholder="操作符" style="width: 120px;" :teleported="false">
                <el-option v-for="opt in operatorOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
              <el-input v-model="cond.value" placeholder="值" style="flex: 1;" />
              <el-button type="danger" size="small" @click="removeCondition(idx)" :disabled="advancedConditions.length === 1">删除</el-button>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 10px;">
              <el-button type="primary" size="small" @click="addCondition">添加条件</el-button>
              <div>
                <el-button size="small" @click="resetAdvancedFilter">重置</el-button>
                <el-button type="primary" size="small" @click="applyAdvancedFilter">应用</el-button>
              </div>
            </div>
          </div>
        </el-popover>

        <el-select
            v-model="queryParams.statuses"
            multiple
            collapse-tags
            placeholder="状态筛选"
            style="width: 200px; margin-left: 10px;"
            @change="fetchData"
        >
          <el-option label="在库" value="在库" />
          <el-option label="借库" value="借库" />
          <el-option label="已出库" value="已出库" />
        </el-select>
      </div>

      <div class="right-tools">
        <el-button v-if="userStore.hasPermission('inbound_semi:operation')" type="primary" :icon="Plus" @click="handleCreate" class="add-btn">半成品入库</el-button>
        <el-button :icon="Refresh" circle @click="fetchData" class="circle-btn" />

        <el-popover placement="bottom-end" title="列配置" :width="500" trigger="click">
          <template #reference>
            <el-button :icon="Setting" circle class="circle-btn" />
          </template>
          <el-checkbox-group v-model="visibleColumnProps" class="column-selector">
            <div class="col-group-title">基础信息</div>
            <el-row :gutter="10">
              <el-col :span="12" v-for="c in baseColumns" :key="c.prop">
                <el-checkbox :label="c.prop">{{ c.label }}</el-checkbox>
              </el-col>
            </el-row>
            <div class="col-group-title" style="margin-top:10px">生产与库存</div>
            <el-row :gutter="10">
              <el-col :span="12" v-for="c in stockColumns" :key="c.prop">
                <el-checkbox :label="c.prop">{{ c.label }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-popover>
      </div>
    </div>

    <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
        class="modern-table"
        highlight-current-row
        header-cell-class-name="table-header-gray"
        @sort-change="handleSortChange"
    >
      <template v-for="col in allColumns" :key="col.prop">
        <el-table-column
            v-if="visibleColumnProps.includes(col.prop)"
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth || '140'"
            :sortable="col.sortable ? 'custom' : false"
            show-overflow-tooltip
        >
          <template #default="scope" v-if="col.prop === 'material_name'">
            <span class="clickable-text" @click="handleUpdate(scope.row)">
              {{ scope.row.material_name }}
            </span>
          </template>

          <template #default="scope" v-else-if="col.prop === 'company_name'">
            <span>{{ scope.row.company_name || '-' }}</span>
          </template>

          <template #default="scope" v-else-if="col.prop === 'sn_bn'">
            <div v-if="scope.row.serial_number" class="id-cell">
              <span class="prefix-tag sn">SN</span>
              <span class="id-text">{{ scope.row.serial_number }}</span>
            </div>
            <div v-else-if="scope.row.batch_number" class="id-cell">
              <span class="prefix-tag bn">BN</span>
              <span class="id-text">{{ scope.row.batch_number }}</span>
            </div>
            <span v-else class="text-placeholder">-</span>
          </template>

          <template #default="scope" v-else-if="col.prop === 'qty_stock'">
            <span class="stock-num">{{ scope.row.qty_stock }}</span>
          </template>

          <template #default="scope" v-else-if="col.prop === 'qty_available'">
            <span class="avail-num">{{ scope.row.qty_available }}</span>
          </template>

          <template #default="scope" v-else-if="col.prop === 'status'">
            <el-tag :type="getStatusType(scope.row.status)" effect="light" round>
              {{ scope.row.status }}
            </el-tag>
          </template>

          <template #default="scope" v-else-if="col.prop === 'quality_status'">
            <el-tag :type="getQualityType(scope.row.quality_status)" effect="dark" size="small">
              {{ scope.row.quality_status }}
            </el-tag>
          </template>

          <template #default="scope" v-else-if="['arrival_photo', 'quality_report_link'].includes(col.prop)">
            <div v-if="getImagesOnly(scope.row[col.prop]).length > 0" style="display: flex; align-items: center; justify-content: center;">
              <el-image
                  style="width: 40px; height: 40px; border-radius: 4px; border: 1px solid #dcdfe6; cursor: zoom-in;"
                  :src="getImageUrl(getImagesOnly(scope.row[col.prop])[0])"
                  :preview-src-list="getImagesOnly(scope.row[col.prop]).map(u => getImageUrl(u))"
                  preview-teleported
                  fit="cover"
                  lazy
              >
                <template #error>
                  <div class="image-slot"><el-icon><Picture /></el-icon></div>
                </template>
              </el-image>
              <span v-if="getImagesOnly(scope.row[col.prop]).length > 1" class="more-images-badge">+{{getImagesOnly(scope.row[col.prop]).length}}</span>
            </div>
            <div v-else-if="hasExternalLink(scope.row[col.prop])" style="text-align: center;">
              <el-tag size="small" type="info"><el-icon><Link /></el-icon> 链接</el-tag>
            </div>
            <span v-else class="text-placeholder">-</span>
          </template>

          <template #default="scope" v-else-if="['detail_link'].includes(col.prop)">
            <el-link v-if="scope.row[col.prop]" type="primary" :href="scope.row[col.prop]" target="_blank"
                     :underline="false">
              <el-icon><Link/></el-icon> 查看
            </el-link>
          </template>

          <template #default="scope" v-else-if="['raw_material_cost', 'unit_total_cost', 'total_price'].includes(col.prop)">
            <span class="money-text">{{ formatMoney(scope.row[col.prop]) }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column v-if="userStore.hasPermission('inbound_semi:operation')" label="操作" width="220" fixed="right" align="center">
        <template #default="{ row }">
          <el-button link type="warning" size="default" @click="handlePrint(row)">
            <el-icon><Printer/></el-icon> 打印
          </el-button>
          <el-button link type="primary" size="default" @click="handleUpdate(row)">编辑</el-button>
          <el-popconfirm title="确定删除该条记录吗？不可恢复。" @confirm="handleDelete(row)" width="220">
            <template #reference>
              <el-button link type="danger" size="default">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="pagination-bar"
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[100, 200, 500, 1000]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="fetchData"
        @current-change="fetchData"
    />

    <el-dialog
        v-model="visible"
        :title="dialogStatus === 'create' ? '新增半成品入库' : '编辑半成品信息'"
        width="min(1000px, 95vw)"
        top="5vh"
        destroy-on-close
        :close-on-click-modal="!isUploading"
        :close-on-press-escape="!isUploading"
        :show-close="!isUploading"
        class="stylish-dialog compact-layout"
    >
      <div class="dialog-scroll-container">
        <el-form :model="form" label-width="100px" ref="formRef" :rules="rules" size="default" class="stylish-form">

          <div class="form-card basic-card">
            <div class="card-title">
              <div style="display: flex; align-items: center;">
                <el-icon class="icon"><Box/></el-icon>
                <span>1. 基础信息</span>
              </div>
              <span class="sub-title" v-if="dialogStatus === 'create'"> (请先搜索选择半成品物料)</span>
            </div>

            <div class="card-content">
              <el-row :gutter="24" v-if="dialogStatus === 'create'" style="margin-bottom: 20px;">
                <el-col :span="12">
                  <el-form-item label="物料搜索" prop="base_id" class="highlight-label">
                    <el-select
                        v-model="form.base_id"
                        filterable
                        remote
                        reserve-keyword
                        clearable
                        placeholder="请输入名称或规格进行检索..."
                        :remote-method="handleSearchMaterial"
                        @visible-change="handleMaterialDropdownVisible"
                        :loading="searchLoading"
                        style="width: 100%"
                        @change="onMaterialSelected"
                        default-first-option
                        v-loadmore="loadMoreMaterials"
                        popper-class="long-dropdown"
                    >
                      <template #prefix><el-icon><Search /></el-icon></template>
                      <el-option
                          v-for="item in materialOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      >
                        <div class="option-item">
                          <div class="opt-main">
                            <span class="opt-name" :title="item.name">{{ item.name }}</span>
                          </div>
                          <div class="opt-meta">
                            <span class="opt-spec" :title="item.spec">{{ item.spec || '-' }}</span>
                          </div>
                          <div class="opt-tags">
                            <el-tag size="small" type="info" effect="light" class="company-tag">{{ item.company_name }}</el-tag>
                            <el-tag v-if="item.isHistory" size="small" type="info" effect="plain">历史</el-tag>
                            <el-tag v-else size="small" type="success" effect="plain">系统</el-tag>
                          </div>
                        </div>
                      </el-option>
                      <div v-if="loadingMore" style="text-align: center; color: #999; font-size: 12px; padding: 8px; background: #f9f9f9;">
                        <el-icon class="is-loading"><Refresh /></el-icon> 加载更多中...
                      </div>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" style="display: flex; align-items: center;">
                  <span class="search-tip">
                    <el-icon><InfoFilled/></el-icon> 支持名称、规格型号、公司名称模糊搜索
                  </span>
                </el-col>
              </el-row>

              <div class="read-only-grid">
                <el-row :gutter="24">
                  <el-col :span="8"><el-form-item label="所属公司" v-if="hasFormFieldPermission('company_name')"><el-input v-model="form.company_name" readonly class="is-text-view"/></el-form-item></el-col>
                  <el-col :span="8"><el-form-item label="名称" v-if="hasFormFieldPermission('material_name')"><el-input v-model="form.material_name" readonly class="is-text-view"/></el-form-item></el-col>
                  <el-col :span="8"><el-form-item label="规格型号" v-if="hasFormFieldPermission('spec_model')"><el-input v-model="form.spec_model" readonly class="is-text-view"/></el-form-item></el-col>
                  <el-col :span="8"><el-form-item label="单位" v-if="hasFormFieldPermission('unit')"><el-input v-model="form.unit" readonly class="is-text-view"/></el-form-item></el-col>
                  <el-col :span="8"><el-form-item label="类别" v-if="hasFormFieldPermission('category')"><el-input v-model="form.category" readonly class="is-text-view"/></el-form-item></el-col>
                  <el-col :span="8"><el-form-item label="类型" v-if="hasFormFieldPermission('material_type')"><el-input v-model="form.material_type" readonly class="is-text-view"/></el-form-item></el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="form-card inbound-card">
            <div class="card-title">
              <el-icon class="icon"><House/></el-icon>
              <span>2. 入库详情</span>
            </div>

            <div class="card-content">
              <el-row :gutter="24">
                <el-col :span="6"><el-form-item label="编码/SKU" prop="sku"><el-input v-model="form.sku" placeholder="系统自动生成" disabled/></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="入库日期" prop="in_date"><el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled/></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="库位" prop="warehouse_location">
                  <WarehouseSelector
                    v-model="form.warehouse_location"
                    :options="warehouseOptions"
                  />
                </el-form-item></el-col>
              </el-row>

              <div class="identity-panel">
                <el-row>
                  <el-col :span="24" style="margin-bottom: 8px;">
                    <el-radio-group v-model="entryMode" @change="handleEntryModeChange" :disabled="modeLocked" size="small" class="custom-radio-group">
                      <el-radio-button label="batch">按批号入库 (Batch)</el-radio-button>
                      <el-radio-button label="serial">按序列号入库 (SN)</el-radio-button>
                    </el-radio-group>
                    <span v-if="modeLocked" class="locked-msg"><el-icon><Lock/></el-icon> 根据历史记录已锁定</span>
                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="批号" prop="batch_number">
                      <el-input v-model="form.batch_number" :placeholder="entryMode === 'batch' ? '系统生成...' : '不可用'" :disabled="entryMode === 'serial'" clearable>
                        <template #prefix><span class="prefix-tag bn">BN</span></template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="serial_number">
                      <template #label>
                        <div class="flex items-center justify-between w-full">
                          <span>序列号</span>
                          <el-link type="primary" :underline="false" @click="openScanner" title="开启摄像头智能扫码" :disabled="entryMode === 'batch'">
                            <el-icon><Camera /></el-icon> 智能扫码
                          </el-link>
                        </div>
                      </template>
                      <el-input v-model="form.serial_number" :placeholder="entryMode === 'serial' ? '请扫描 SN...' : '不可用'" :disabled="entryMode === 'batch'" clearable>
                        <template #prefix><span class="prefix-tag sn">SN</span></template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-row :gutter="24" style="margin-top: 15px;">
                <el-col :span="6">
                  <el-form-item label="入库数量" prop="in_quantity">
                    <el-input-number v-model="form.in_quantity" :min="1" controls-position="right" style="width:100%" class="strong-input"/>
                  </el-form-item>
                </el-col>

                <el-col :span="6" v-if="dialogStatus === 'create'">
                  <el-form-item label="打印份数" prop="print_copies">
                    <el-input-number v-model="form.print_copies" :min="1" :max="999" controls-position="right" style="width:100%"/>
                  </el-form-item>
                </el-col>

                <template v-if="dialogStatus === 'update'">
                  <el-col :span="6"><el-form-item label="当前库存" prop="stock_quantity"><el-input-number v-model="form.stock_quantity" disabled style="width:100%" :controls="false"/></el-form-item></el-col>
                  <el-col :span="6"><el-form-item label="当前可用" prop="available_quantity"><el-input-number v-model="form.available_quantity" disabled style="width:100%" :controls="false"/></el-form-item></el-col>
                  <el-col :span="6">
                    <el-form-item label="库存状态" prop="status">
                      <el-select v-model="form.status" style="width:100%">
                        <el-option label="在库" value="在库"/>
                        <el-option label="借库" value="借库"/>
                        <el-option label="已出库" value="已出库"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>

                <el-col :span="6">
                  <el-form-item label="质量状态" prop="quality_status">
                    <el-select v-model="form.quality_status" style="width:100%">
                      <el-option label="待检" value="待检"><span style="color:#909399">⚪ 待检</span></el-option>
                      <el-option label="合格" value="合格"><span style="color:#67C23A">🟢 合格</span></el-option>
                      <el-option label="不合格" value="不合格"><span style="color:#F56C6C">🔴 不合格</span></el-option>
                      <el-option label="返修中" value="返修中"><span style="color:#E6A23C">🟠 返修中</span></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="24">
                  <el-form-item label="到货图片" prop="arrival_photo">
                    <div class="upload-container">
                      <el-upload v-model:file-list="arrivalFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'arrival_photo')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'arrival_photo')" :before-upload="beforeAvatarUpload">
                        <el-icon><Plus /></el-icon>
                      </el-upload>
                      <div class="camera-card" @click="triggerCamera('arrival_photo')"><el-icon><Camera /></el-icon><span class="text">拍照</span></div>
                    </div>
                    <el-input v-model="form.arrival_photo" placeholder="图片列表" style="display:none;" />
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="质量报告" prop="quality_report_link">
                    <div class="upload-container">
                      <el-upload v-model:file-list="reportFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'quality_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'quality_report_link')" :before-upload="beforeAvatarUpload">
                        <el-icon><Plus /></el-icon>
                      </el-upload>
                      <div class="camera-card" @click="triggerCamera('quality_report_link')"><el-icon><Camera /></el-icon><span class="text">拍照</span></div>
                    </div>
                    <el-input v-model="quality_report_url" placeholder="如有外部报告链接，请在此输入 (选填)" style="margin-top: 8px;" clearable><template #prefix><el-icon><Link /></el-icon></template></el-input>
                    <el-input v-model="form.quality_report_link" placeholder="列表" style="display:none;" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="form-card production-card">
            <div class="card-title">
              <div style="display: flex; align-items: center;">
                <el-icon class="icon"><Setting/></el-icon>
                <span>3. 生产与成本信息</span>
              </div>
            </div>
            <div class="card-content">
              <div class="divider-text">生产任务信息</div>
              <el-row :gutter="24">
                <el-col :span="8"><el-form-item label="工单号"><el-input v-model="form.work_order_code" placeholder="WO-xxx" clearable/></el-form-item></el-col>

                <el-col :span="8">
                  <el-form-item label="BOM编号">
                    <el-select
                        v-model="form.bom_code"
                        filterable
                        remote
                        clearable
                        placeholder="搜规格/编号"
                        :remote-method="handleSearchBom"
                        :loading="bomSearchLoading"
                        @change="handleBomSelect"
                        style="width: 100%"
                    >
                      <el-option
                          v-for="item in bomOptions"
                          :key="`${item.bom_no}_${item.version}`"
                          :label="item.bom_no"
                          :value="`${item.bom_no}###${item.version}`"
                      >
                        <span style="float: left; font-weight: bold;">{{ item.bom_no }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 10px;">
                          {{ item.version }} <span v-if="item.parent_spec">({{ item.parent_spec }})</span>
                        </span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8"><el-form-item label="BOM版本"><el-input v-model="form.bom_version" placeholder="自动填充" readonly/></el-form-item></el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="生产负责人">
                    <el-autocomplete v-model="form.production_manager" :fetch-suggestions="querySearchManager" placeholder="输入或选择负责人" style="width: 100%" clearable :trigger-on-focus="true" @select="handleManagerSelect">
                      <template #default="{ item }"><span>{{ item.value }}</span></template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="生产时间">
                    <el-date-picker v-model="form.production_time_range" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
                  </el-form-item>
                </el-col>
              </el-row>

              <div class="divider-text">成本核算</div>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="估算成本">
                    <el-input-number v-model="form.raw_material_cost" :precision="2" :controls="false" style="width:100%" placeholder="请输入"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="基于BOM成本">
                    <el-input-number v-model="form.unit_total_cost" :precision="2" :controls="false" style="width:100%" placeholder="请输入"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="总成本">
                    <el-input-number v-model="form.total_price" :precision="2" :controls="false" style="width:100%" placeholder="自动计算" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24" style="margin-top:10px">
                <el-col :span="24"><el-form-item label="详情链接"><el-input v-model="form.detail_link" placeholder="外部生产系统详情页 http://"/></el-form-item></el-col>
              </el-row>
            </div>
          </div>

        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false" size="large" :disabled="isUploading">取消</el-button>
          <el-button type="primary" :loading="submitting || isUploading" @click="submitForm" size="large" class="confirm-btn">
            {{ dialogStatus === 'create' ? '提交并打印' : '保存修改' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisibleImage" append-to-body width="50%"><img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" /></el-dialog>
    <el-dialog v-model="cameraDialogVisible" title="拍照上传" width="500px" append-to-body destroy-on-close :close-on-click-modal="false">
      <WebRtcCamera
          ref="cameraRef"
          @photo-submit="handleCameraConfirm"
          @cancel="cameraDialogVisible = false"
      />
    </el-dialog>
    <el-dialog v-model="printVisible" title="标签打印预览" width="400px" destroy-on-close append-to-body>
      <div style="text-align: center;">
        <div v-loading="printLoading" class="preview-box">
          <img v-if="previewUrl" :src="previewUrl" alt="Label Preview" style="width: 100%; border: 1px solid #ccc;"/>
          <div v-else class="empty-preview">正在生成预览...</div>
        </div>
        <div style="margin-top: 20px; font-size: 14px; color: #666;"><p>打印机 IP: 192.168.9.205</p><p>尺寸: 40mm x 30mm</p>
          <div style="margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px;">
            <span style="font-weight: bold; color: #303133;">打印份数:</span>
            <el-input-number v-model="printCopies" :min="1" :max="100" size="default" style="width: 120px;" />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer"><el-button @click="printVisible = false">取消</el-button><el-button type="primary" :loading="printing" @click="confirmPrint"><el-icon><Printer/></el-icon>确认打印</el-button></div>
      </template>
    </el-dialog>

    <!-- 智能扫码弹窗 -->
    <SmartScannerDialog v-model="scannerDialogVisible" @confirm="handleScannerConfirm" />
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, watch, computed} from 'vue'
import {Plus, Setting, Refresh, Search, Lock, Box, House, InfoFilled, Link, Printer, Camera, Picture} from '@element-plus/icons-vue'
import {ElMessage, ElLoading} from 'element-plus'
import dayjs from 'dayjs'
import {
  getSemiList,
  createSemiInbound,
  updateSemiInbound,
  deleteSemiInbound,
  searchMaterialBase,
  searchBom,
  getFilterOptions,
  getManagerHistory, // [新增]
  calculateBomCost
} from '@/api/inbound/semi'
import { uploadFile, deleteFile } from '@/api/inbound/buy'
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
import WarehouseSelector from '@/components/WarehouseSelector.vue'
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
import {getLabelPreview, executePrint} from '@/api/common/print'
import { getWarehouseTree } from '@/api/common/warehouse'
import { useUserStore } from '@/stores/user'

// ------------------------------------
// 防抖函数
// ------------------------------------
const debounce = (fn: Function, delay: number = 500) => {
  let timer: ReturnType<typeof setTimeout> | null = null
  return (...args: any[]) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}

// ------------------------------------
// 自定义指令：v-loadmore (适配 Teleport 到 Body 的下拉框)
// ------------------------------------
const vLoadmore = {
  mounted(el: any, binding: any) {
    const checkAndBind = () => {
      const dropDownWrap = document.querySelector('.long-dropdown .el-select-dropdown__wrap')
      if (dropDownWrap && !dropDownWrap.getAttribute('data-loadmore-bound')) {
        dropDownWrap.setAttribute('data-loadmore-bound', 'true')
        dropDownWrap.addEventListener('scroll', function (this: any) {
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 1
          if (condition) {
            binding.value()
          }
        })
      }
    }
    setTimeout(checkAndBind, 500)
    el.addEventListener('click', () => setTimeout(checkAndBind, 300))
  }
}

// ------------------------------------
// 状态与变量
// ------------------------------------
const userStore = useUserStore()
const loading = ref(false)
const submitting = ref(false)
const visible = ref(false)
const searchLoading = ref(false)
const loadingMore = ref(false)
const dialogStatus = ref<'create' | 'update'>('create')
const tableData = ref([])
const total = ref(0)
const formRef = ref()

// 上传锁定状态
const isUploading = ref(false)

const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
const categoryOptions = ref<string[]>([])
const typeOptions = ref<string[]>([])
const companyOptions = ref<string[]>([]) // [新增]
const advancedFilterVisible = ref(false)
const advancedConditions = ref([{ field: '', operator: '', value: '' }])
const fieldOptions = computed(() => {
  const allFields = [
    { value: 'id', label: 'ID', perm: 'inbound_semi:id' },
    { value: 'base_id', label: 'BaseID', perm: 'inbound_semi:base_id' },
    { value: 'company_name', label: '所属公司', perm: 'inbound_semi:company_name' },
    { value: 'material_name', label: '名称', perm: 'inbound_semi:material_name' },
    { value: 'spec_model', label: '规格型号', perm: 'inbound_semi:spec_model' },
    { value: 'category', label: '类别', perm: 'inbound_semi:category' },
    { value: 'material_type', label: '类型', perm: 'inbound_semi:material_type' },
    { value: 'unit', label: '单位', perm: 'inbound_semi:unit' },
    { value: 'sku', label: 'SKU', perm: 'inbound_semi:sku' },
    { value: 'inbound_date', label: '入库日期', perm: 'inbound_semi:inbound_date' },
    { value: 'barcode', label: '条码', perm: 'inbound_semi:barcode' },
    { value: 'batch_number', label: '批号', perm: 'inbound_semi:sn_bn' },
    { value: 'serial_number', label: '序列号', perm: 'inbound_semi:sn_bn' },
    { value: 'warehouse_location', label: '库位', perm: 'inbound_semi:warehouse_loc' },
    { value: 'qty_inbound', label: '入库数量', perm: 'inbound_semi:qty_inbound' },
    { value: 'qty_stock', label: '当前库存', perm: 'inbound_semi:qty_stock' },
    { value: 'qty_available', label: '当前可用', perm: 'inbound_semi:qty_available' },
    { value: 'status', label: '库存状态', perm: 'inbound_semi:status' },
    { value: 'quality_status', label: '质量状态', perm: 'inbound_semi:quality_status' },
    { value: 'bom_code', label: 'BOM编号', perm: 'inbound_semi:bom_code' },
    { value: 'bom_version', label: 'BOM版本', perm: 'inbound_semi:bom_version' },
    { value: 'work_order_code', label: '工单号', perm: 'inbound_semi:work_order_code' },
    { value: 'production_manager', label: '生产负责人', perm: 'inbound_semi:production_manager' },
    { value: 'production_start_time', label: '生产开始时间', perm: 'inbound_semi:production_start_time' },
    { value: 'production_end_time', label: '生产结束时间', perm: 'inbound_semi:production_end_time' },
    { value: 'raw_material_cost', label: '估算成本', perm: 'inbound_semi:raw_material_cost' },
    { value: 'unit_total_cost', label: '基于BOM成本', perm: 'inbound_semi:unit_total_cost' },
    { value: 'total_price', label: '总成本', perm: 'inbound_semi:total_price' }
  ]
  // 根据用户权限过滤
  return allFields.filter(item => userStore.hasPermission(item.perm))
})
const operatorOptions = ref([
  { label: '等于', value: '=' },
  { label: '不等于', value: '!=' },
  { label: '包含', value: 'like' },
  { label: '不包含', value: 'not_like' },
  { label: '大于', value: '>' },
  { label: '小于', value: '<' },
  { label: '大于等于', value: '>=' },
  { label: '小于等于', value: '<=' },
])
const materialOptions = ref<any[]>([])
const searchPage = ref(1)
const searchKeyword = ref('')
const hasNextPage = ref(true)
let searchTimer: any = null

// BOM 搜索相关
const bomSearchLoading = ref(false)
const bomOptions = ref<any[]>([])

// 打印相关变量
const printVisible = ref(false)
const printLoading = ref(false)
const printing = ref(false)
const previewUrl = ref('')
const printCopies = ref(1)
const currentPrintData = ref<any>({})

// 图片/拍照相关
const dialogImageUrl = ref('')
const dialogVisibleImage = ref(false)
const arrivalFileList = ref<any[]>([])
const reportFileList = ref<any[]>([])
const cameraDialogVisible = ref(false)
const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null)
const currentCameraField = ref<'arrival_photo' | 'quality_report_link'>('arrival_photo')
const quality_report_url = ref('')

// 智能扫码弹窗
const scannerDialogVisible = ref(false)

// 库位级联选择器数据
const warehouseOptions = ref<any[]>([])

const entryMode = ref('batch')
const modeLocked = ref(false)

// 列定义
const baseColumns = [
  {prop: 'company_name', label: '所属公司', sortable: true}, // [新增]
  {prop: 'material_name', label: '名称', sortable: true},
  {prop: 'category', label: '类别', sortable: true},
  {prop: 'material_type', label: '类型', sortable: true},
  {prop: 'spec_model', label: '规格型号', sortable: true},
  {prop: 'unit', label: '单位', sortable: true},
]

const stockColumns = [
  {prop: 'id', label: 'ID', minWidth: '60', sortable: true},
  {prop: 'base_id', label: 'BaseID', minWidth: '80', sortable: true},
  {prop: 'sku', label: 'SKU', minWidth: '120', sortable: true},
  {prop: 'inbound_date', label: '入库日期', minWidth: '120', sortable: true},
  {prop: 'barcode', label: '条码', minWidth: '120', sortable: true},
  {prop: 'sn_bn', label: '序列号/批号', minWidth: '160', sortable: false},
  {prop: 'status', label: '状态', minWidth: '100', sortable: true},
  {prop: 'quality_status', label: '质量状态', minWidth: '100', sortable: true},
  {prop: 'qty_inbound', label: '入库量', minWidth: '100', sortable: true},
  {prop: 'qty_stock', label: '库存数', minWidth: '100', sortable: true},
  {prop: 'qty_available', label: '可用数', minWidth: '100', sortable: true},
  {prop: 'warehouse_loc', label: '库位', minWidth: '120', sortable: true},
  {prop: 'bom_code', label: 'BOM编号', minWidth: '120', sortable: true},
  {prop: 'bom_version', label: 'BOM版本', minWidth: '90', sortable: true},
  {prop: 'work_order_code', label: '工单号', minWidth: '120', sortable: true},
  {prop: 'raw_material_cost', label: '原料成本', minWidth: '100', sortable: true},
  {prop: 'unit_total_cost', label: '单件成本', minWidth: '100', sortable: true},
  {prop: 'total_price', label: '总成本', minWidth: '100', sortable: true},
  {prop: 'production_manager', label: '生产负责人', minWidth: '100', sortable: true},
  {prop: 'production_start_time', label: '生产开始', minWidth: '160', sortable: true},
  {prop: 'production_end_time', label: '生产结束', minWidth: '160', sortable: true},
  {prop: 'arrival_photo', label: '到货图', minWidth: '100', sortable: false},
  {prop: 'quality_report_link', label: '质量报告', minWidth: '100', sortable: false},
  {prop: 'detail_link', label: '详情链接', minWidth: '100', sortable: false},
]
const allColumns = [...baseColumns, ...stockColumns]

// 列与权限Code的映射关系（数据库中的code）
const permissionMap: Record<string, string> = {
  id: 'inbound_semi:id',
  base_id: 'inbound_semi:base_id',
  company_name: 'inbound_semi:company_name',
  material_name: 'inbound_semi:material_name',
  category: 'inbound_semi:category',
  material_type: 'inbound_semi:material_type',
  spec_model: 'inbound_semi:spec_model',
  unit: 'inbound_semi:unit',
  sku: 'inbound_semi:sku',
  inbound_date: 'inbound_semi:inbound_date',
  barcode: 'inbound_semi:barcode',
  sn_bn: 'inbound_semi:sn_bn',
  status: 'inbound_semi:status',
  quality_status: 'inbound_semi:quality_status',
  qty_inbound: 'inbound_semi:qty_inbound',
  qty_stock: 'inbound_semi:qty_stock',
  qty_available: 'inbound_semi:qty_available',
  warehouse_loc: 'inbound_semi:warehouse_loc',
  bom_code: 'inbound_semi:bom_code',
  bom_version: 'inbound_semi:bom_version',
  work_order_code: 'inbound_semi:work_order_code',
  raw_material_cost: 'inbound_semi:raw_material_cost',
  unit_total_cost: 'inbound_semi:unit_total_cost',
  total_price: 'inbound_semi:total_price',
  production_manager: 'inbound_semi:production_manager',
  production_start_time: 'inbound_semi:production_start_time',
  production_end_time: 'inbound_semi:production_end_time',
  arrival_photo: 'inbound_semi:arrival_photo',
  quality_report_link: 'inbound_semi:quality_report_link',
  detail_link: 'inbound_semi:detail_link',
}

// 根据用户权限初始化列显示状态
// 初始化列显示状态（移除权限限制，添加 localStorage 支持）
const initColumnPermissions = () => {
  // 生成存储键：使用用户ID或用户名，如果没有则使用浏览器唯一标识
  const userId = userStore.user?.id || userStore.username || 'anonymous'
  const storageKey = `inbound_semi_columns_${userId}`
  
  // 尝试从 localStorage 读取保存的列配置
  const savedColumns = localStorage.getItem(storageKey)
  if (savedColumns) {
    try {
      const parsed = JSON.parse(savedColumns)
      // 验证保存的列是否有效（存在于 allColumns 中）
      const validColumns = parsed.filter((prop: string) => 
        allColumns.some(col => col.prop === prop)
      )
      if (validColumns.length > 0) {
        visibleColumnProps.value = validColumns
        return
      }
    } catch (e) {
      console.warn('Failed to parse saved columns:', e)
    }
  }
  
  // 如果没有保存的配置，使用默认列
  visibleColumnProps.value = defaultColumns
}

// 检查列权限（移除权限限制，始终返回 true）
const hasColumnPermission = (prop: string) => {
  return true
}

const defaultColumns = ['company_name', 'material_name', 'spec_model', 'unit', 'inbound_date', 'sn_bn', 'status', 'quality_status', 'bom_code', 'work_order_code', 'qty_stock', 'qty_available', 'unit_total_cost', 'arrival_photo', 'quality_report_link']
const visibleColumnProps = ref(defaultColumns)

// 监听列配置变化并保存到 localStorage
watch(visibleColumnProps, (newVal) => {
  const userId = userStore.user?.id || userStore.username || 'anonymous'
  const storageKey = `inbound_semi_columns_${userId}`
  try {
    localStorage.setItem(storageKey, JSON.stringify(newVal))
  } catch (e) {
    console.warn('Failed to save columns to localStorage:', e)
  }
}, { deep: true })

const form = reactive({
  id: undefined, base_id: undefined as number | undefined,
  company_name: '',
  material_name: '', spec_model: '', category: '', unit: '', material_type: '', sku: '', barcode: '', in_date: '', serial_number: '', batch_number: '', status: '在库', quality_status: '合格', in_quantity: 1, stock_quantity: 1, available_quantity: 1, print_copies: 1, warehouse_location: '', bom_code: '', bom_version: '', work_order_code: '',
  raw_material_cost: undefined as number | undefined,
  unit_total_cost: undefined as number | undefined,
  total_price: undefined as number | undefined,
  production_manager: '', production_time_range: [] as string[], arrival_photo: [] as string[], quality_report_link: [] as string[], detail_link: ''
})

// === 监听计算总成本 ===
const computeTotalPrice = () => {
  let unitCost = 0
  if (form.bom_code) {
    // 如果BOM编号有值，则单价采用基于BOM成本 (unit_total_cost)
    unitCost = Number(form.unit_total_cost || 0)
  } else {
    // 如果BOM编号为空，则单价采用估算成本 (raw_material_cost)
    unitCost = Number(form.raw_material_cost || 0)
  }
  const qty = Number(form.in_quantity || 1)
  form.total_price = Number((unitCost * qty).toFixed(2))
}

watch(
  () => [form.bom_code, form.unit_total_cost, form.raw_material_cost, form.in_quantity],
  () => computeTotalPrice(),
  { immediate: true, deep: false }
)

// ------------------------------------
// BOM Search Logic
// ------------------------------------
const handleSearchBom = async (query: string) => {
  bomSearchLoading.value = true
  try {
    const res: any = await searchBom(query)
    bomOptions.value = res.data || []
  } finally { bomSearchLoading.value = false }
}
const handleBomSelect = async (val: string) => {
  // val 格式为 bom_no###version
  if (!val) {
    form.bom_code = ''
    form.bom_version = ''
    return
  }
  const [code, version] = val.split('###')
  form.bom_code = code
  form.bom_version = version
  // 自动计算 BOM 成本并填入 raw_material_cost 和 unit_total_cost
  try {
    const res: any = await calculateBomCost({ bom_code: code, bom_version: version })
    if (res.code === 200 && typeof res.data === 'number') {
      form.raw_material_cost = res.data
      form.unit_total_cost = res.data
    }
  } catch (e) {
    // 计算失败不影响现有输入
    console.warn('BOM 成本计算失败', e)
  }
}

// ------------------------------------
// Autocomplete & Search Logic (后端 API 驱动，全局检索)
// ------------------------------------
const querySearchManager = async (query: string, cb: any) => {
  try {
    const res: any = await getManagerHistory({ keyword: query })
    if (res.code === 200) {
      const managers = (res.data || []).map((name: string) => ({ value: name }))
      cb(managers)
    } else { cb([]) }
  } catch (e) { cb([]) }
}
const handleManagerSelect = (item: any) => {
  form.production_manager = item.value
}

// ------------------------------------
// Material Search (Matches Buy.vue)
// ------------------------------------
const handleMaterialDropdownVisible = (visible: boolean) => { if (visible && materialOptions.value.length === 0) handleSearchMaterialDebounced('') }

const handleSearchMaterialDebounced = (query: string) => {
  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    handleSearchMaterial(query)
  }, 300)
}

const handleSearchMaterial = async (query: string) => {
  searchLoading.value = true
  searchKeyword.value = query
  searchPage.value = 1
  materialOptions.value = []

  try {
    const res: any = await searchMaterialBase(query, 1)
    const apiResults = (res.data?.items || []).map((i: any) => ({...i, isHistory: false}))
    materialOptions.value = apiResults
    hasNextPage.value = res.data?.has_next ?? false
  } finally { searchLoading.value = false }
}

const loadMoreMaterials = async () => {
  if (searchLoading.value || loadingMore.value || !hasNextPage.value) return
  loadingMore.value = true
  searchPage.value += 1
  try {
    const res: any = await searchMaterialBase(searchKeyword.value, searchPage.value)
    if (res.data && res.data.items && res.data.items.length > 0) {
      const newItems = res.data.items.map((i: any) => ({...i, isHistory: false}))
      materialOptions.value.push(...newItems)
      hasNextPage.value = res.data.has_next
    } else {
      hasNextPage.value = false
    }
  } catch (e) {
    searchPage.value -= 1
  } finally {
    loadingMore.value = false
  }
}

const onMaterialSelected = (val: number) => {
  const item = materialOptions.value.find(i => i.id === val)
  if (item) {
    form.company_name = item.company_name // [新增]
    form.material_name = item.name
    form.spec_model = item.spec
    form.category = item.category
    form.unit = item.unit
    form.material_type = item.type
    checkHistoryAndSetMode(item.id)
  }
}

// ------------------------------------
// Validation Logic
// ------------------------------------
const validateUnique = (rule: any, value: string, callback: any) => {
  if (!value) return callback()
  const isDuplicate = tableData.value.some((row: any) => {
    if (dialogStatus.value === 'update' && row.id === form.id) return false
    if (rule.field === 'serial_number' && row.serial_number === value) return true
    if (rule.field === 'batch_number' && row.batch_number === value && row.base_id === form.base_id) return true
    return false
  })
  if (isDuplicate) callback(new Error('当前列表页存在相同编号(后端将进行全局校验)'))
  else callback()
}
const validateIdentity = (rule: any, value: any, callback: any) => {
  if (entryMode.value === 'serial' && !form.serial_number && rule.field === 'serial_number') callback(new Error('SN必填'))
  else if (entryMode.value === 'batch' && !form.batch_number && rule.field === 'batch_number') callback(new Error('批号必填'))
  else callback()
}
const rules = {
  base_id: [{required: true, message: '请选择物料', trigger: 'change'}],
  in_quantity: [{required: true, message: '请输入数量', trigger: 'blur'}],
  warehouse_location: [{required: true, message: '库位不能为空，请填写或选择', trigger: ['blur', 'change']}],
  serial_number: [{validator: validateIdentity, trigger: 'blur'}, {validator: validateUnique, trigger: 'blur'}],
  batch_number: [{validator: validateIdentity, trigger: 'blur'}, {validator: validateUnique, trigger: 'blur'}]
}

// ------------------------------------
// 表单字段权限检查
// ------------------------------------
const hasFormFieldPermission = (fieldName: string) => {
  if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') {
    return true
  }
  const map: Record<string, string> = {
    company_name: 'inbound_semi:company_name',
    material_name: 'inbound_semi:material_name',
    spec_model: 'inbound_semi:spec_model',
    category: 'inbound_semi:category',
    material_type: 'inbound_semi:material_type',
    unit: 'inbound_semi:unit',
    sku: 'inbound_semi:sku',
    in_date: 'inbound_semi:inbound_date',
    barcode: 'inbound_semi:barcode',
    serial_number: 'inbound_semi:serial_number',
    batch_number: 'inbound_semi:batch_number',
    status: 'inbound_semi:status',
    quality_status: 'inbound_semi:quality_status',
    in_quantity: 'inbound_semi:in_quantity',
    stock_quantity: 'inbound_semi:stock_quantity',
    available_quantity: 'inbound_semi:available_quantity',
    warehouse_location: 'inbound_semi:warehouse_location',
    bom_code: 'inbound_semi:bom_code',
    bom_version: 'inbound_semi:bom_version',
    work_order_code: 'inbound_semi:work_order_code',
    raw_material_cost: 'inbound_semi:raw_material_cost',
    manual_cost: 'inbound_semi:manual_cost',
    unit_total_cost: 'inbound_semi:unit_total_cost',
    production_manager: 'inbound_semi:production_manager',
    production_time_range: 'inbound_semi:production_start_time',
    arrival_photo: 'inbound_semi:arrival_photo',
    quality_report_link: 'inbound_semi:quality_report_link',
    detail_link: 'inbound_semi:detail_link',
  }
  const code = map[fieldName]
  if (!code) {
    return true
  }
  return userStore.hasPermission(code)
}

// ------------------------------------
// Core Logic
// ------------------------------------
const checkHistoryAndSetMode = async (baseId: number) => {
  try {
    const res: any = await getSemiList({page: 1, pageSize: 1000})
    const historyItems = (res.data.items || []).filter((item: any) => item.base_id === baseId)
    if (historyItems.length > 0) {
      modeLocked.value = true
      const latest = historyItems.sort((a: any, b: any) => b.id - a.id)[0]
      if (latest.serial_number) { entryMode.value = 'serial'; form.serial_number = ''; form.batch_number = '' }
      else { entryMode.value = 'batch'; form.serial_number = ''; form.batch_number = incrementBatchNumber(latest.batch_number || '000000') }
    } else { modeLocked.value = false; entryMode.value = 'batch'; form.batch_number = '000001' }
    if(formRef.value) { formRef.value.clearValidate('serial_number'); formRef.value.clearValidate('batch_number') }
  } catch (e) { modeLocked.value = false; entryMode.value = 'batch'; form.batch_number = '000001' }
}
const incrementBatchNumber = (batchStr: string) => {
  if (!batchStr || !/^\d+$/.test(batchStr)) return '000001'
  const num = parseInt(batchStr, 10)
  return (num + 1).toString().padStart(6, '0')
}
const handleEntryModeChange = (val: string) => {
  if (val === 'batch') { form.serial_number = ''; form.batch_number = '000001'; if(formRef.value) formRef.value.clearValidate('serial_number') }
  else { form.batch_number = ''; if(formRef.value) formRef.value.clearValidate('batch_number') }
}

const handleSortChange = ({ column, prop, order }: any) => {
  if (order === 'ascending') {
    queryParams.orderByColumn = prop
    queryParams.isAsc = 'true'
  } else if (order === 'descending') {
    queryParams.orderByColumn = prop
    queryParams.isAsc = 'false'
  } else {
    queryParams.orderByColumn = ''
    queryParams.isAsc = ''
  }
  queryParams.page = 1
  fetchData()
}

const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      ...queryParams,
      statuses: queryParams.statuses.join(','),
      orderByColumn: queryParams.orderByColumn,
      isAsc: queryParams.isAsc,
      advancedFilters: queryParams.advancedFilters.length > 0 ? JSON.stringify(queryParams.advancedFilters) : ''
    }
    const res: any = await getSemiList(params)
    tableData.value = res.data.items || []
    total.value = res.data.total || 0
  } finally { loading.value = false }
}

// 防抖即时搜索
const debouncedSearch = debounce(() => {
  queryParams.page = 1
  fetchData()
}, 500)

const handleInputSearch = () => {
  debouncedSearch()
}

const fetchOptions = async () => {
  try {
    const res: any = await getFilterOptions()
    if (res.code === 200) {
      categoryOptions.value = res.data.categories
      typeOptions.value = res.data.types
      companyOptions.value = res.data.companies // [新增]
    }
  } catch (e) {
    console.error('Fetch options failed', e)
  }
}

// 加载库位树数据
const loadWarehouseTree = async () => {
  try {
    const res = await getWarehouseTree()
    if (res.code === 200) {
      warehouseOptions.value = res.data || []
    }
  } catch (e) {
    console.error('加载库位树失败', e)
  }
}

const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.searchField = 'all'
  queryParams.sku = ''
  queryParams.category = ''
  queryParams.material_type = ''
  queryParams.company = ''
  queryParams.page = 1
  queryParams.orderByColumn = ''
  queryParams.isAsc = ''
  queryParams.advancedFilters = []
  fetchData()
}

const addCondition = () => {
  advancedConditions.value.push({ field: '', operator: '', value: '' })
}
const removeCondition = (index: number) => {
  advancedConditions.value.splice(index, 1)
}
const applyAdvancedFilter = () => {
  const validConditions = advancedConditions.value.filter(c => c.field && c.operator && c.value !== '')
  queryParams.advancedFilters = validConditions
  advancedFilterVisible.value = false
  queryParams.page = 1
  fetchData()
}
const resetAdvancedFilter = () => {
  advancedConditions.value = [{ field: '', operator: '', value: '' }]
  queryParams.advancedFilters = []
  advancedFilterVisible.value = false
  queryParams.page = 1
  fetchData()
}

const handleCreate = () => {
  dialogStatus.value = 'create'
  resetForm()
  form.in_date = dayjs().format('YYYY-MM-DD')
  modeLocked.value = false
  entryMode.value = 'batch'
  form.batch_number = ''
  visible.value = true
  materialOptions.value = []
}

const handleUpdate = (row: any) => {
  dialogStatus.value = 'update'
  resetForm()
  modeLocked.value = true
  Object.assign(form, {
    id: row.id, base_id: row.base_id,
    company_name: row.company_name, // [新增]
    material_name: row.material_name, spec_model: row.spec_model, category: row.category,
    unit: row.unit, material_type: row.material_type, sku: row.sku, barcode: row.barcode, in_date: row.inbound_date,
    warehouse_location: row.warehouse_loc, status: row.status, quality_status: row.quality_status,
    in_quantity: Number(row.qty_inbound), stock_quantity: Number(row.qty_stock), available_quantity: Number(row.qty_available),
    bom_code: row.bom_code, bom_version: row.bom_version, work_order_code: row.work_order_code,
    raw_material_cost: (row.raw_material_cost !== null && row.raw_material_cost !== undefined) ? Number(row.raw_material_cost) : undefined,
    unit_total_cost: (row.unit_total_cost !== null && row.unit_total_cost !== undefined) ? Number(row.unit_total_cost) : undefined,
    production_manager: row.production_manager,
    production_time_range: (row.production_start_time && row.production_end_time) ? [row.production_start_time, row.production_end_time] : [],
    detail_link: row.detail_link,
    arrival_photo: row.arrival_photo || [], quality_report_link: row.quality_report_link || []
  })
  // 计算总成本
  const u = Number(form.unit_total_cost || 0)
  const q = Number(form.in_quantity || 1)
  form.total_price = Number((u * q).toFixed(2))
  arrivalFileList.value = form.arrival_photo.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }))
  const reports = form.quality_report_link || []
  const reportImgs = reports.filter(r => !isExternalLink(r))
  const reportLinks = reports.filter(r => isExternalLink(r))
  reportFileList.value = reportImgs.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }))
  quality_report_url.value = reportLinks.length > 0 ? reportLinks[0] : ''
  if (row.serial_number) { entryMode.value = 'serial'; form.serial_number = row.serial_number; form.batch_number = '' }
  else { entryMode.value = 'batch'; form.batch_number = row.batch_number; form.serial_number = '' }
  materialOptions.value = [{ id: row.base_id, name: row.material_name, spec: row.spec_model, category: row.category, company_name: row.company_name, isHistory: false }]
  // 回显BOM，如果存在
  if (form.bom_code) {
    bomOptions.value = [{ bom_no: form.bom_code, version: form.bom_version }]
  }
  visible.value = true
}

const getImageUrl = (url: string) => { if (!url) return ''; return url.startsWith('http') ? url : url }
const isExternalLink = (str: string) => { return str && (str.startsWith('http://') || str.startsWith('https://')) && !str.includes('/api/v1/common/files') }
const getImagesOnly = (list: string[]) => { return !list ? [] : list.filter(item => !isExternalLink(item)) }
const hasExternalLink = (list: string[]) => { return !list ? false : list.some(item => isExternalLink(item)) }
const beforeAvatarUpload = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') { ElMessage.error('仅支持 JPG/PNG'); return false }
  if (rawFile.size / 1024 / 1024 > 5) { ElMessage.error('图片不能超过 5MB'); return false }
  return true
}
const customUpload = async (options: any, targetField: 'arrival_photo' | 'quality_report_link') => {
  const { file, onSuccess, onError } = options
  const formData = new FormData(); formData.append('file', file)
  isUploading.value = true
  try {
    const res: any = await uploadFile(formData)
    if (res.code === 200) {
      const newUrl = res.data.url; form[targetField].push(newUrl); ElMessage.success('上传成功'); onSuccess(res)
    } else { ElMessage.error(res.msg || '上传失败'); onError(new Error(res.msg)) }
  } catch (e) { ElMessage.error('网络错误'); onError(e) }
  finally { isUploading.value = false }
}
const handleRemoveImage = async (uploadFile: any, targetField: 'arrival_photo' | 'quality_report_link') => {
  try {
    const urlToRemove = form[targetField].find(u => getImageUrl(u) === uploadFile.url) || uploadFile.url
    form[targetField] = form[targetField].filter(u => u !== urlToRemove)
    if (!isExternalLink(urlToRemove)) { const filename = urlToRemove.split('/').pop(); if (filename) await deleteFile(filename) }
    ElMessage.success('已删除')
  } catch (e) { console.error(e) }
}
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
const triggerCamera = (field: 'arrival_photo' | 'quality_report_link') => {
  currentCameraField.value = field;
  cameraDialogVisible.value = true;
}
const handleCameraConfirm = async (file: File) => {
  if (!beforeAvatarUpload(file)) {
    cameraDialogVisible.value = false;
    return;
  }
  const formData = new FormData();
  formData.append('file', file);
  const loadingMsg = ElLoading.service({ text: '照片上传中...', background: 'rgba(0, 0, 0, 0.7)' });
  let success = false;
  try {
    const res: any = await uploadFile(formData);
    if (res.code === 200) {
      const newUrl = res.data.url;
      const field = currentCameraField.value;
      form[field].push(newUrl);
      if (field === 'arrival_photo') {
        arrivalFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
      } else if (field === 'quality_report_link') {
        reportFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
      }
      ElMessage.success('拍照上传成功');
      success = true;
    } else {
      ElMessage.error(res.msg || '上传失败');
    }
  } catch (e) {
    ElMessage.error('网络错误，上传失败');
  } finally {
    loadingMsg.close();
    if (success) {
      cameraDialogVisible.value = false;
    }
  }
};

// 智能扫码
const openScanner = () => {
  scannerDialogVisible.value = true
}

const handleScannerConfirm = (result: string) => {
  form.serial_number = result
  scannerDialogVisible.value = false
  ElMessage.success('序列号已提取')
}

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      submitting.value = true
      const finalReportList = [...form.quality_report_link]
      if (quality_report_url.value && !finalReportList.includes(quality_report_url.value)) finalReportList.push(quality_report_url.value)
      const onlyImages = finalReportList.filter(item => !isExternalLink(item))
      if (quality_report_url.value) onlyImages.push(quality_report_url.value)
      const payload: any = {
        ...form,
        quality_report_link: onlyImages,
        in_quantity: Number(form.in_quantity),
        raw_material_cost: Number(form.raw_material_cost || 0),
        unit_total_cost: Number(form.unit_total_cost || 0),
        total_price: Number(form.total_price || 0),
        production_start_time: form.production_time_range?.[0] || null,
        production_end_time: form.production_time_range?.[1] || null
      }
      delete payload.production_time_range
      try {
        if (dialogStatus.value === 'create') {
          const res: any = await createSemiInbound(payload)
          ElMessage.success('入库成功')
          const newItem = res.data
          if (newItem) {
            ElMessage.info('正在发送打印指令...')
            try { await executePrint({ ...newItem, copies: form.print_copies }); ElMessage.success(`打印指令已发送 (x${form.print_copies})`) }
            catch (printErr: any) { ElMessage.warning('入库成功，但自动打印失败：' + (printErr.msg || '未知错误')) }
          }
        } else { await updateSemiInbound(form.id!, payload); ElMessage.success('更新成功') }
        await fetchData(); visible.value = false
      } catch (e: any) {
        ElMessage.error(e.msg || '操作失败')
      } finally { submitting.value = false }
    } else {
      ElMessage.warning('入库校验未通过，请检查必填项（如：库位）是否已填写完整！')
    }
  })
}

const handleDelete = async (row: any) => { try { await deleteSemiInbound(row.id); ElMessage.success('删除成功'); fetchData() } catch (e) { ElMessage.error('删除失败') } }
const handlePrint = async (row: any) => {
  printVisible.value = true; printLoading.value = true; previewUrl.value = ''
  currentPrintData.value = { global_print_id: row.global_print_id, material_name: row.material_name, spec_model: row.spec_model, category: row.category, material_type: row.material_type, warehouse_loc: row.warehouse_loc, serial_number: row.serial_number, batch_number: row.batch_number, sku: row.sku }
  try { const res: any = await getLabelPreview(currentPrintData.value); previewUrl.value = res.data } catch (e) { ElMessage.error('预览生成失败') } finally { printLoading.value = false }
}
const confirmPrint = async () => { printing.value = true; try { await executePrint({ ...currentPrintData.value, copies: printCopies.value }); ElMessage.success(`指令已发送 (x${printCopies.value})`); printVisible.value = false } catch (e: any) { ElMessage.error(e.msg || '打印失败') } finally { printing.value = false } }
const resetForm = () => {
  materialOptions.value = []; bomOptions.value = []; arrivalFileList.value = []; reportFileList.value = []; quality_report_url.value = ''
  Object.assign(form, {
    id: undefined, base_id: undefined,
    company_name: '', // [新增]
    material_name: '', spec_model: '', category: '', unit: '', material_type: '', sku: '', barcode: '', in_date: '', serial_number: '', batch_number: '', status: '在库', quality_status: '合格', in_quantity: 1, stock_quantity: 1, available_quantity: 1, print_copies: 1, warehouse_location: '', bom_code: '', bom_version: '', work_order_code: '',
    raw_material_cost: undefined, unit_total_cost: undefined, total_price: undefined,
    production_manager: '', production_time_range: [], arrival_photo: [], quality_report_link: [], detail_link: '' })
}
const getStatusType = (status: string) => { const map: any = { '在库': 'success', '出库': 'info', '借库': 'warning', '损耗': 'danger' }; return map[status] || 'warning' }
const getQualityType = (status: string) => { const map: any = { '合格': 'success', '不合格': 'danger', '待检': 'info', '返修中': 'warning' }; return map[status] || 'info' }
const formatMoney = (val: any) => isNaN(Number(val)) ? '-' : `¥ ${Number(val).toFixed(2)}`

onMounted(() => {
  // 先根据权限初始化列显示状态
  initColumnPermissions()
  fetchData()
  fetchOptions()
  loadWarehouseTree()
})
</script>

<style scoped>
.semi-module { background: #f5f7fa; padding: 20px; min-height: 100vh; }
.header-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); }
.left-tools { display: flex; gap: 10px; align-items: center; flex: 1; flex-wrap: wrap; }
.right-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.action-btn { font-weight: 500; }
.modern-table { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); }
:deep(.table-header-gray th) { background-color: #f8f9fb !important; color: #606266; font-weight: 600; height: 50px; }
.tag-sn { color: #409EFF; font-weight: bold; font-family: monospace; }
.tag-bn { color: #67C23A; font-weight: bold; font-family: monospace; }
.money-text { font-family: 'Consolas', monospace; color: #303133; }
.stock-num { font-weight: bold; color: #333; font-size: 15px; }
.avail-num { font-weight: bold; color: #67C23A; font-size: 15px; }
.id-cell { display: flex; align-items: center; }
.id-text { font-family: monospace; color: #606266; }
/* [修改] 增加 min-height */
.dialog-scroll-container { padding: 20px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; min-height: 450px; }

.stylish-form .form-card { background: #fff; border-radius: 8px; border: 1px solid #e4e7ed; margin-bottom: 20px; }
.card-title { background: #fcfcfc; padding: 12px 20px; border-bottom: 1px solid #ebeef5; font-weight: 600; font-size: 15px; color: #303133; display: flex; align-items: center; }
.card-title .icon { margin-right: 8px; font-size: 18px; color: #409EFF; }
.card-title .sub-title { font-size: 12px; color: #909399; font-weight: normal; margin-left: 10px; }
.card-content { padding: 20px; }
.basic-card { border-left: 4px solid #409EFF; }
.inbound-card { border-left: 4px solid #67C23A; }
.production-card { border-left: 4px solid #E6A23C; } .production-card .card-title .icon { color: #E6A23C; }
.identity-panel { background: #fffbf0; border: 1px dashed #e6a23c; border-radius: 6px; padding: 15px; margin-bottom: 20px; }
.custom-radio-group { margin-bottom: 10px; }
.locked-msg { font-size: 12px; color: #e6a23c; margin-left: 15px; }
.prefix-tag { font-weight: bold; font-size: 12px; padding: 0 5px; border-radius: 4px; }
.prefix-tag.bn { color: #67C23A; background: #f0f9eb; }
.prefix-tag.sn { color: #409EFF; background: #ecf5ff; }
.divider-text { display: flex; align-items: center; text-align: center; margin: 30px 0 20px; color: #909399; font-size: 14px; font-weight: 500; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-bottom: 1px solid #ebeef5; }
.divider-text::before { margin-right: 15px; }
.divider-text::after { margin-left: 15px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; padding: 20px; border-top: 1px solid #ebeef5; }

.filter-item-select { /* 宽度已在行内样式控制 */ }
.filter-item-input { /* 宽度已在行内样式控制 */ }
.search-btn { background-color: #E6F1FC; border-color: #A3D0FD; color: #409EFF; }
.search-btn:hover { background-color: #409EFF; border-color: #409EFF; color: #fff; }
.reset-btn { background-color: #fff; border: 1px solid #dcdfe6; }
.reset-btn:hover { border-color: #c0c4cc; color: #606266; }

/* [优化] 纯文本样式 */
.is-text-view :deep(.el-input__wrapper) { box-shadow: none !important; background-color: transparent !important; border-bottom: 1px dashed #dcdfe6; border-radius: 0; padding-left: 0; }
.is-text-view :deep(.el-input__inner) { color: #303133; font-weight: 600; font-size: 14px; cursor: text; }

.search-tip { color: #909399; font-size: 12px; margin-left: 10px; display: flex; align-items: center; gap: 4px; }
.upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
:deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }
:deep(.el-upload-list--picture-card .el-upload-list__item) { width: 100px; height: 100px; }
.camera-card { width: 100px; height: 100px; background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; color: #8c939d; }
.camera-card:hover { border-color: #409EFF; color: #409EFF; }
.camera-card .text { font-size: 12px; margin-top: 5px; }
.camera-card .el-icon { font-size: 24px; }

/* [重点] 下拉框 Flex 布局 */
.option-item { display: flex; align-items: center; padding: 8px 0; width: 100%; }
.opt-main { flex: 1; min-width: 0; margin-right: 10px; }
.opt-name { font-weight: 600; font-size: 14px; color: #333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-meta { width: 100px; text-align: right; flex-shrink: 0; margin-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-spec { color: #999; font-size: 12px; }
.opt-tags { display: flex; gap: 5px; flex-shrink: 0; }
.company-tag { font-weight: bold; }

/* 左对齐数字框 */
:deep(.el-input-number .el-input__inner) { text-align: left; }
</style>

<style>
.long-dropdown { width: 580px !important; }
.long-dropdown .el-select-dropdown__wrap { max-height: 320px !important; }
.long-dropdown .el-input__suffix { z-index: 10; }
</style>
