<template>
  <div class="key-dm-inventory-wrapper">
    <div v-if="pushBadgeShow" class="pushCls">
      <div class='pushIconCls'>！</div>
    </div>
    <Tabs v-model="activeTab" @on-click="handleTabChange">
      <TabPane label="办公用品申领" name="apply">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="18">
              <span>部门：</span>
              <Input
                v-model="filters.apply.department_name"
                placeholder="请输入部门"
                class="mr10"
                style="width: 200px"
              />
              <span>申请人：</span>
              <Input
                v-model="filters.apply.applicant_name"
                placeholder="请输入申请人"
                class="mr10"
                style="width: 200px"
              />
              <span>开始时间：</span>
              <DatePicker
                v-model="filters.apply.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择开始时间"
                class="mr10"
                style="width: 200px"
              />
              <span>结束时间：</span>
              <DatePicker
                v-model="filters.apply.endDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择结束时间"
                class="mr10"
                style="width: 200px"
              />
              <br>
              <div class="mt8">
              <span>审批状态：</span>
              <Select
                v-model="filters.apply.approval_status"
                placeholder="请选择审批状态"
                class="mr10"
                style="width: 200px"
              >
                <Option :value='0'>待提交</Option>
                <Option :value='1'>审批中</Option>
                <Option :value='9'>审批通过</Option>
                <Option :value='-1'>驳回</Option>
              </Select>
              </div>
            </Col>
            <!-- 右侧操作按钮区：固定居右 -->
            <Col span="6" class="action-col">
              <Button type="primary" class="mr10" @click="handleSearch('apply')">搜索</Button>
              <Button type="primary" class="mr10" @click="handleReset('apply')">重置</Button>
              <Button type="primary" class="mr10" @click="openApplyModal">申请</Button>
            </Col>
          </Row>
        </div>

        <Table :data="tables.apply" :loading="loading.apply" :columns="applyColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" @click="openDetail(row)" class="mr5" >详细</Button>
            <Button size="small" type="primary"  class="mr5" @click="openEdit(row)" v-if="canEdit(row)">修改</Button>
            <Poptip confirm title="提交后将进入审批流程" transfer @on-ok="submit(row)" v-if="canSubmit(row)" class="mr5">
              <Button size="small" type="success">提交</Button>
            </Poptip>
            <Poptip confirm title="确认撤回？" transfer @on-ok="revoke(row)" v-if="canRevoke(row)" class="mr5">
              <Button size="small" type="warning">撤回</Button>
            </Poptip>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.apply.totalRecord" :current="pagers.apply.pageNo" :page-size="pagers.apply.pageSize"
          show-total show-sizer @on-change="pageChange('apply', $event)" @on-page-size-change="sizeChange('apply', $event)" />
      </TabPane>

      <TabPane label="办公用品待审批" name="pending" v-if="power.supply_approval">
        <Table :data="tables.pending" :loading="loading.pending" :columns="pendingColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" type="primary" @click="openApproveModal(row)">处理</Button>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.pending.totalRecord" :current="pagers.pending.pageNo" :page-size="pagers.pending.pageSize"
          show-total show-sizer @on-change="pageChange('pending', $event)" @on-page-size-change="sizeChange('pending', $event)" />
      </TabPane>

      <TabPane label="办公用品审批历史查询" name="history" v-if="power.supply_view">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="18">
              <span>部门：</span>
              <Input
                v-model="filters.history.department_name"
                placeholder="请输入部门"
                class="mr10"
                style="width: 200px"
              />
              <span>申请人：</span>
              <Input
                v-model="filters.history.applicant_name"
                placeholder="请输入申请人"
                class="mr10"
                style="width: 200px"
               />
              <span>提交开始时间：</span>
              <DatePicker
                v-model="filters.history.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择开始时间"
                class="mr10"
                style="width: 200px"
              />
              <span>提交结束时间：</span>
              <DatePicker
                v-model="filters.history.endDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择结束时间"
                class="mr10"
                style="width: 200px"
              />
              <br>
              <div class="mt8">
              <span>审批状态：</span>
              <Select
                v-model="filters.history.approval_status"
                placeholder="请选择审批状态"
                class="mr10"
                style="width: 200px"
              >
                <Option :value= "0">待提交</Option>
                <Option :value= "1">审批中</Option>
                <Option :value= "9">审批通过</Option>
                <Option :value= "-1">驳回</Option>
              </Select>
              </div>
            </Col>
            <Col span="6" class="text-right">
              <Button type="primary" class="mr10" @click="handleSearch('history')">搜索</Button>
              <Button type="primary" class="mr10" @click="handleReset('history')">重置</Button>
            </Col>
          </Row>
        </div>

        <Table :data="tables.history" :loading="loading.history" :columns="historyColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" @click="openDetail(row)">详细</Button>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.history.totalRecord" :current="pagers.history.pageNo" :page-size="pagers.history.pageSize"
          show-total show-sizer @on-change="pageChange('history', $event)" @on-page-size-change="sizeChange('history', $event)" />
      </TabPane>

      <TabPane label="办公用品入库" name="inbound" v-if="power.inventory_manager">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="18">
              <span>入库单号：</span>
              <Input
                v-model="filters.inbound.inbound_no"
                placeholder="请输入入库单号："
                class="mr10"
                style="width: 200px"
              />
              <span>批次号：</span>
              <Input
                v-model="filters.inbound.batch_no"
                placeholder="请输入批次号："
                class="mr10"
                style="width: 200px"
              />
              <span>开始时间：</span>
              <DatePicker
                v-model="filters.inbound.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择开始时间"
                class="mr10"
                style="width: 150px"
              />
              <span>结束时间：</span>
              <DatePicker
                v-model="filters.inbound.endDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择结束时间"
                class="mr10"
                style="width: 150px"
              />
              <br>
              <div class="mt8">
              <span>入库类型：</span>
              <Select
                v-model="filters.inbound.inbound_type"
                placeholder="请选择入库类型"
                class="mr10"
                style="width: 200px"
                clearable
              >
                <Option :value='1'>手工入库</Option>
                <Option :value='2'>归还入库</Option>
              </Select>
              <span>入库状态：</span>
              <Select
                v-model="filters.inbound.inbound_status"
                placeholder="请选择入库状态"
                class="mr10"
                style="width: 200px"
                clearable
              >
                <Option :value='0'>待入库</Option>
                <Option :value='1'>已入库</Option>
              </Select>
              </div>
            </Col>
            <Col span="6" class="text-right">
              <Button type="primary" class="mr10" @click="handleSearch('inbound')">搜索</Button>
              <Button type="primary" class="mr10" @click="handleReset('inbound')">重置</Button>
              <Button type="primary" class="mr10" @click="openInboundModal">新增入库</Button>
              <Button type="primary" class="mr10" v-if="showImport()" @click="importShow = true">导入</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.inbound" :loading="loading.inbound" :columns="inboundColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Poptip confirm title="确认执行入库？" transfer @on-ok="doInbound(row)" v-if="canEditInbound(row)">
              <Button size="small" type="success" class="mr5">入库</Button>
            </Poptip>
            <Button size="small" @click="openInboundDetail(row)" class="mr5">详细</Button>
            <Button size="small" type="primary" @click="openEditInbound(row)" v-if="canEditInbound(row)" class="mr5">修改</Button>
            <Poptip confirm title="确认删除？" transfer @on-ok="deleteInbound(row)" v-if="canEditInbound(row)">
              <Button size="small" type="error">删除</Button>
            </Poptip>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.inbound.totalRecord" :current="pagers.inbound.pageNo" :page-size="pagers.inbound.pageSize"
          show-total show-sizer @on-change="pageChange('inbound', $event)" @on-page-size-change="sizeChange('inbound', $event)" />
      </TabPane>

      <TabPane label="办公用品归还" name="return" v-if="power.inventory_manager">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="18">
              <span>部门：</span>
              <Input
                v-model="filters.return.department_name"
                placeholder="请输入部门"
                class="mr10"
                style="width: 200px"
              />
              <span>申领人：</span>
              <Input
                v-model="filters.return.applicant_name"
                placeholder="请输入申请人"
                class="mr10"
                style="width: 200px"
              />
            </Col>
            <Col span="6" class="action-col">
              <Button type="primary" class="mr10" @click="handleSearch('return')">搜索</Button>
              <Button type="primary" class="mr10" @click="handleReset('return')" >重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.return" :loading="loading.return" :columns="returnColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" type="primary" @click="openReturnModal(row)">归还</Button>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.return.totalRecord" :current="pagers.return.pageNo" :page-size="pagers.return.pageSize"
          show-total show-sizer @on-change="pageChange('return', $event)" @on-page-size-change="sizeChange('return', $event)" />
      </TabPane>

      <TabPane label="库存查询" name="inventory" v-if="power.inventory_manager">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="18">
              <span>用品编码：</span>
              <Input
                v-model="filters.inventory.material_code"
                placeholder="请输入用品编码"
                class="mr10"
                style="width: 200px"
              />
              <span>用品名称：</span>
              <Input
                v-model="filters.inventory.material_name"
                placeholder="请输入用品名称"
                class="mr10"
                style="width: 200px"
              />
            </Col>
            <Col span="6" class="action-col">
              <Button type="primary" class="mr10" @click="handleSearch('inventory')">搜索</Button>
              <Button type="primary" class="mr10" @click="handleReset('inventory')">重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.inventory" :loading="loading.inventory" :columns="inventoryColumns" border />
      </TabPane>
    </Tabs>

    <!-- 申请弹窗 -->
    <Modal v-model="applyModal.visible" :title="applyModal.isEdit ? '修改领用申请' : '新增领用申请'" width="800">
      <Form :model="applyModal.form" :rules="applyRules" :label-width="120" ref="applyForm">
        <!-- <FormItem label="申请人">
          <Input v-model="applyModal.form.applicant_name" disabled />
        </FormItem>
        <FormItem label="部门">
          <Input v-model="applyModal.form.department_name" disabled />
        </FormItem> -->
        <FormItem label="领用用途" prop="borrow_purpose">
          <Input v-model="applyModal.form.borrow_purpose" />
        </FormItem>
        <FormItem label="审批人:" prop="approver_id">
          <Select
            v-model="applyModal.form.approver_id"
            placeholder="请选择审批人"
            class="form-input"
            filterable
          >
            <Option
              v-for="item in approverModal.approverList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }} {{ item.leader === 1 ? '-leader' : '' }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="预计归还日期">
          <DatePicker
            v-model="applyModal.form.expected_return_date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择预计归还日期"
          />
        </FormItem>

        <h4>申请明细</h4>
        <Row type="flex" justify="end" class="mb8">
          <Col>
            <Button size="small" class="mr5" type="primary" @click="showMaterialSelector = true">添加</Button>
            <Button size="small" type="error" @click="deleteSelectedDetails">删除</Button>
          </Col>
        </Row>
        <Table :data="applyModal.details" :columns="applyDetailColumns" size="small" border @on-selection-change="onApplyDetailSelectionChange" />
        <MaterialSelector v-model="showMaterialSelector" :selected="[]" @on-ok="handleMaterialSelectorOk" @cancel="showMaterialSelector = false"/>
      </Form>
      <div slot="footer">
        <Button @click="applyModal.visible=false">取消</Button>
        <Button type="primary" :loading="applyModal.saving" @click="saveApplication">保存</Button>
      </div>
    </Modal>

    <!-- 审批弹窗 -->
    <Modal v-model="approveModal.visible" title="申请处理" width="700">
      <Form :model="approveModal.record" :label-width="120">
        <FormItem label="部门"><span>{{ approveModal.record.department_name }}</span></FormItem>
        <FormItem label="申请人"><span>{{ approveModal.record.applicant_name }}</span></FormItem>
        <FormItem label="申请明细">
          <Table :data="approveModal.details" :columns="approveDetailColumns" size="small" border />
        </FormItem>
        <FormItem label="审批意见">
          <Input type="textarea" v-model="approveModal.opinion" placeholder="驳回时必填" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="approveModal.visible=false">取消</Button>
        <Button type="success" :loading="approveModal.submitting" @click="confirmApprove">通过</Button>
        <Button type="error" :loading="approveModal.submitting" @click="confirmReject">驳回</Button>
      </div>
    </Modal>

    <!-- 详情弹窗 -->
    <Modal v-model="detailModal.visible" title="申请详情" width="720">
      <Spin fix v-if="detailModal.loading"></Spin>
      <div v-else>
        <Row :gutter="16"><Col span="12"><p><strong>申请人：</strong>{{ detailModal.data.applicant_name }}</p></Col><Col span="12"><p><strong>部门：</strong>{{ detailModal.data.department_name }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><p><strong>领用用途：</strong>{{ detailModal.data.borrow_purpose }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><p><strong>预计归还日期：</strong>{{ formatDate(detailModal.data.expected_return_date) }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><h4>明细</h4></Col></Row>
        <Table :data="detailModal.details" :columns="detailDetailColumns" size="small" border />
        <Row class="mt8"><Col span="24"><h3><strong>审批详情</strong></h3></Col></Row><br>
        <!-- <Table :data="detailModal.logs" :columns="detailLogsColumns" size="small" border /> -->
        <Row :gutter="16"><Col span="12"><p><strong>审批人：</strong>{{ detailModal.data.approver_name }}</p></Col><Col span="12"><p><strong>审批结果：</strong>{{ approvalStatusMap[detailModal.data.approval_status] }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><p><strong>审批意见：</strong>{{ detailModal.data.approval_opinion }}</p></Col></Row>
      </div>
      <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
    </Modal>

    <!-- 入库弹窗 -->
    <Modal v-model="inboundModal.visible" :title="inboundModal.isEdit ? '修改入库' : '新增入库'" width="800">
      <Form :model="inboundModal.form" :rules="inboundRules" :label-width="120" ref="inboundForm">
        <FormItem label="入库单号" prop="inbound_no">
          <Input v-model="inboundModal.form.inbound_no" />
        </FormItem>
        <FormItem label="批次号" prop="batch_no">
          <Input v-model="inboundModal.form.batch_no" />
        </FormItem>
        <FormItem label="入库日期" prop="inbound_date">
          <DatePicker
            v-model="inboundModal.form.inbound_date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择入库日期"
          />
        </FormItem>
        <FormItem label="存放位置">
          <Input v-model="inboundModal.form.storage_location" />
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" v-model="inboundModal.form.remark" :rows="2" />
        </FormItem>

        <h4>明细（从用品库选择）
          <div style="float: right;">
            <Button size="small" class="mr5" type="primary" @click="showInboundMaterialSelector = true">添加</Button>
            <Button size="small" type="error" @click="deleteSelectedInboundDetails">删除</Button>
          </div>
        </h4>
        <Table :data="inboundModal.details" :columns="inboundDetailColumns" size="small" border @on-selection-change="onInboundDetailSelectionChange" style="width: 100%" />
        <MaterialSelector v-model="showInboundMaterialSelector" :selected="[]" @on-ok="handleInboundMaterialSelectorOk" @cancel="showInboundMaterialSelector = false" />
      </Form>
      <div slot="footer">
        <Button @click="inboundModal.visible=false">取消</Button>
        <Button type="primary" :loading="inboundModal.saving" @click="saveInbound">保存</Button>
      </div>
    </Modal>

    <!-- 归还弹窗 -->
    <Modal v-model="returnModal.visible" title="归还物品" width="700">
      <Form :model="returnModal.record" :label-width="120">
        <FormItem label="部门"><span>{{ returnModal.record.department_name }}</span></FormItem>
        <FormItem label="申请人"><span>{{ returnModal.record.applicant_name }}</span></FormItem>
        <FormItem label="归还明细">
          <Table :data="returnModal.details" :columns="returnDetailColumns" size="small" border />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="returnModal.visible=false">取消</Button>
        <Button type="primary" :loading="returnModal.saving" @click="confirmReturn">归还</Button>
      </div>
    </Modal>

    <!-- 入库详情弹窗 -->
    <Modal v-model="inboundDetailModal.visible" title="入库/归还详情" width="720">
      <Spin fix v-if="inboundDetailModal.loading"></Spin>
      <div v-else>
        <Row :gutter="16"><Col span="12"><p><strong>单号：</strong>{{ inboundDetailModal.data.inbound_no || inboundDetailModal.data.application_no }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><h4>明细</h4></Col></Row>
        <Table :data="inboundDetailModal.details" :columns="inboundDetailDetailColumns" size="small" border />
      </div>
      <div slot="footer"><Button type="primary" @click="inboundDetailModal.visible=false">关闭</Button></div>
    </Modal>

    <!-- 导入用品弹窗 -->
    <Modal v-model="importShow" title="入库导入" width="360">
      <Row type="flex" justify="center" align="middle">
        <Col span="10">
          <div style="text-align: center;">
            <Upload
               action="#"
              :show-upload-list="false"
              :before-upload="handleBeforeUpload"
              :format="['xls','xlsx']"
              accept=".xls,.xlsx"
              :max-size="4096">
              <Button icon="ios-cloud-upload-outline" type="primary" :loading="impBtnDisabled">导入</Button>
            </Upload>
          </div>
        </Col>
        <Col span="12">
          <div style="text-align: center;">
            <Button type="primary" @click="tplDownload" style="margin-right: 10px;">下载模板</Button>
          </div>
        </Col>
      </Row>
      <div slot="footer">
        <Button size="large" type="text" @click="importShow = false">关闭</Button>
      </div>
    </Modal>
    <!-- <Modal v-model="approverModal.visible" title="选择审批人" width="500">
      <Form :model="approverModal.form" :label-width="80">
        <FormItem label="审批人：" required>
          <Select
            v-model="approverModal.form.approver_id"
            placeholder="请选择审批人"
            class="form-input"
            filterable
          >
            <Option
              v-for="item in approverModal.approverList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }} {{ item.leader === 1 ? '-leader' : '' }}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="approverModal.visible=false">取消</Button>
        <Button
          type="primary"
          :loading="approverModal.submitting"
          @click="confirmSubmitWithApprover"
          :disabled="!approverModal.form.approver_id"
        >
          确认提交
        </Button>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import {
  getBorrowList,
  saveBorrowApplication,
  submitBorrow,
  revokeBorrow,
  getPendingBorrowList,
  getHistoryBorrowList,
  approveBorrow,
  rejectBorrow,
  getBorrowById,
  getSupplyApproval,
  getInboundList,
  saveInbound,
  deleteInbound,
  doInbound,
  getPendingReturnList,
  processReturn,
  getInventoryList,
  getInboundById,
  getPendingReturnById,
  importInbound,
  getUserDmPermissionList
} from '@/api/key-dm'
import MaterialSelector from '@/view/key-person/key_dm_conf/materialSelector.vue'
import { normalizeVisitTimeValue } from '@/view/key-person/key_dm_conf/dates.js'
import axios from 'axios'

export default {
  name: 'key-dm-inventory-index',
  components: { MaterialSelector },
  data () {
    return {
      // 表单验证规则
      applyRules: {
        borrow_purpose: [
          { required: true, message: '请填写申领用途', trigger: 'blur' }
        ],
        approver_id: [
          { required: true, message: '请选择审批人', trigger: 'change' }
        ]
      },
      inboundRules: {
        inbound_no: [
          { required: true, message: '请填写入库单号', trigger: 'blur' }
        ],
        batch_no: [
          { required: true, message: '请选择批次号', trigger: 'blur' }
        ],
        inbound_date: [
          { required: true, message: '请选择入库日期' }
        ]
      },
      approverModal: {
        visible: false,
        submitting: false,
        form: { approver_id: '' }, // 选中的审批人ID
        approverList: [], // 审批人列表
        currentBorrowId: '' // 暂存当前提交的申请ID
      },
      pushBadgeShow: false,
      // 申请弹窗中的可编辑行状态
      editingRowIndex: -1,
      editingCellField: '',
      // 审批状态映射字典
      approvalStatusMap: { '0': '待提交', '1': '审批中', '9': '审批通过', '-1': '驳回' },
      activeTab: 'apply',
      filters: {
        apply: { application_no: '', applicant_name: '', approval_status: null, startDate: null, endDate: null },
        history: { application_no: '', applicant_name: '', approval_status: null, startDate: null, endDate: null },
        inbound: {
          inbound_no: null,
          batch_no: null,
          startDate: null,
          endDate: null,
          inbound_type: null,
          inbound_status: null
        },
        return: {
          application_no: '',
          applicant_name: ''
        },
        inventory: {
          material_name: ''
        }
      },
      tables: { apply: [], pending: [], history: [], inbound: [], return: [], inventory: [] },
      pagers: { apply: { pageNo: 1, pageSize: 10, totalRecord: 0 }, pending: { pageNo: 1, pageSize: 10, totalRecord: 0 }, history: { pageNo: 1, pageSize: 10, totalRecord: 0 }, inbound: { pageNo: 1, pageSize: 10, totalRecord: 0 }, return: { pageNo: 1, pageSize: 10, totalRecord: 0 }, inventory: { pageNo: 1, pageSize: 10, totalRecord: 0 } },
      loading: { apply: false, pending: false, history: false, inbound: false, return: false, inventory: false },
      applyColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        // { title: '申请单号', key: 'application_no', align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        { title: '申请人', key: 'applicant_name', align: 'center' },
        { title: '申领用途', key: 'borrow_purpose', align: 'center' },
        {
          title: '提交申请时间',
          key: 'submit_time',
          align: 'center',
          width: '300px',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.submit_time) || '-')
          }
        },
        // {
        //   title: '起止时间',
        //   key: 'start_time',
        //   align: 'center',
        //   width: '300px',
        //   render: (h, { row }) => {
        //     return h('span', (this.formatDateTime(row.create_time) || row.create_time || '-') + '--' + (this.formatDateTime(row.approval_time) || row.approval_time || '-'))
        //   }
        // },
        // {
        //   title: '时长',
        //   key: 'duration',
        //   align: 'center',
        //   render: (h, { row }) => {
        //     const createTime = Number(row.create_time) || 0
        //     const approvalTime = Number(row.approval_time) || 0
        //     let duration = null
        //     if (createTime !== 0 && approvalTime !== 0) {
        //       const diffMs = Math.abs(approvalTime - createTime)
        //       duration = this.formatDuration(diffMs)
        //     } else {
        //       duration = this.formatDuration('')
        //     }
        //     return h('span', duration)
        //   }
        // },
        {
          title: '状态',
          key: 'approval_status',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.approvalStatusMap[row.approval_status + ''] || row.approval_status || '-')
          }
        },
        { title: '操作', slot: 'action', align: 'center', width: 260 }
      ],
      pendingColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        // { title: '申请单号', key: 'application_no', align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        { title: '申请人', key: 'applicant_name', align: 'center' },
        { title: '申请用途', key: 'borrow_purpose', align: 'center' },
        {
          title: '提交申请时间',
          key: 'submit_time',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDate(row.submit_time) || row.submit_time || '-')
          }
        },
        { title: '操作', slot: 'action', width: 120, align: 'center' }
      ],
      historyColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        // { title: '申请单号', key: 'application_no', align: 'center' },
        { title: '申请人', key: 'applicant_name', align: 'center' },
        { title: '申请用途', key: 'borrow_purpose', align: 'center' },
        {
          title: '状态',
          key: 'approval_status',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.approvalStatusMap[row.approval_status + ''] || row.approval_status || '-')
          }
        },
        {
          title: '提交审批时间',
          key: 'submit_time',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.submit_time) || '-')
          }
        },
        {
          title: '审批完成时间',
          key: 'approval_time',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.approval_time) || row.approval_time || '-')
          }
        },
        { title: '操作', slot: 'action', width: 100, align: 'center' }
      ],
      // 模态窗口内表格列定义
      applyDetailColumns: [
        { type: 'selection', width: 60 },
        { title: '用品编码', key: 'material_code' },
        { title: '用品名称', key: 'material_name' },
        {
          title: '申请数量',
          key: 'apply_quantity',
          render: (h, { row, column, index }) => {
            // 如果当前行是编辑状态，显示输入框
            if (this.editingRowIndex === index && this.editingCellField === 'apply_quantity') {
              return h('InputNumber', {
                props: {
                  value: row.apply_quantity,
                  min: 1,
                  max: row.available_quantity || 9999,
                  precision: 0
                },
                style: { width: '100%' },
                on: {
                  input: (value) => {
                    // 更新数据
                    this.applyModal.details[index].apply_quantity = value
                  },
                  'on-blur': () => {
                    // 失去焦点时退出编辑模式
                    this.editingRowIndex = -1
                    this.editingCellField = ''
                  },
                  'on-keyup': (event) => {
                    // 按回车键保存并退出编辑
                    if (event.keyCode === 13) {
                      this.editingRowIndex = -1
                      this.editingCellField = ''
                    }
                  }
                }
              })
            } else {
              // 非编辑状态，显示文本和编辑图标
              return h('div', {
                style: {
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  cursor: 'pointer',
                  padding: '0 8px'
                },
                on: {
                  click: () => {
                    // 点击进入编辑模式
                    this.editingRowIndex = index
                    this.editingCellField = 'apply_quantity'
                    // 下一个tick聚焦到输入框
                    this.$nextTick(() => {
                      const input = document.querySelector(`.ivu-table-cell-with-input input`)
                      if (input) input.focus()
                    })
                  }
                }
              }, [
                h('span', row.apply_quantity || 0),
                h('Icon', {
                  props: {
                    type: 'md-create',
                    size: 14
                  },
                  style: {
                    color: '#2d8cf0',
                    marginLeft: '8px'
                  }
                })
              ])
            }
          }
        },
        { title: '单位', key: 'unit' }
      ],
      approveDetailColumns: [
        { title: '用品名称', key: 'material_name' },
        { title: '申请数量', key: 'apply_quantity' },
        { title: '单位', key: 'unit' },
        {
          title: '可用库存',
          key: 'available_quantity',
          render: (h, { row }) => {
            return h('span', row.available_quantity || 0)
          }
        }
      ],
      detailDetailColumns: [
        { title: '用品编码', key: 'material_code' },
        { title: '用品名称', key: 'material_name' },
        { title: '申请数量', key: 'apply_quantity' },
        { title: '单位', key: 'unit' },
        { title: '已归还', key: 'returned_quantity' }
      ],
      detailLogsColumns: [
        { title: '用品名称', key: 'material_name' },
        {
          title: '操作类型',
          key: 'op_type',
          render: (h, { row }) => {
            return h('span', this.opTypeMap[row.op_type] || row.op_type || '-')
          }
        },
        { title: '数量', key: 'quantity' },
        {
          title: '时间',
          key: 'create_time',
          width: '150px',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.create_time) || row.create_time || '-')
          }
        },
        { title: '操作人', key: 'name' }
      ],
      // 入库相关表格列定义
      inboundColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '入库单号', key: 'inbound_no', align: 'center' },
        { title: '批次号', key: 'batch_no', align: 'center' },
        {
          title: '入库日期',
          key: 'inbound_date',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDate(row.inbound_date) || row.inbound_date || '')
          }
        },
        {
          title: '类型',
          key: 'inbound_type',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.inboundTypeMap[row.inbound_type] || row.inbound_type || '-')
          }
        },
        {
          title: '状态',
          key: 'inbound_status',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.inboundStatusMap[row.inbound_status] || row.inbound_status || '-')
          }
        },
        { title: '操作', slot: 'action', width: 260, align: 'center' }
      ],
      returnColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        { title: '申领人', key: 'applicant_name', align: 'center' },
        { title: '申领用途', key: 'borrow_purpose', align: 'center' },
        {
          title: '提交审批时间',
          key: 'submit_time',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.submit_time) || '-')
          }
        },
        {
          title: '审批通过时间',
          key: 'approval_time',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.formatDateTime(row.approval_time) || '-')
          }
        },
        {
          title: '发放状态',
          key: 'issue_status',
          align: 'center',
          render: (h, { row }) => {
            return h('span', this.issueStatusType[row.issue_status] || row.issue_status || '-')
          }
        },
        { title: '操作', slot: 'action', width: 140, align: 'center' }
      ],
      inventoryColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '用品编码', key: 'material_code', align: 'center' },
        { title: '用品名称', key: 'material_name', align: 'center' },
        { title: '总量', key: 'total_quantity', align: 'center' },
        { title: '借出', key: 'borrowed_quantity', align: 'center' },
        {
          title: '可用',
          key: 'available_quantity',
          align: 'center',
          render: (h, { row }) => {
            return h('span', (row.total_quantity - row.borrowed_quantity - row.damaged_quantity) || 0)
          }
        }
      ],
      // 入库相关模态窗口内表格列定义
      inboundDetailColumns: [
        { type: 'selection', width: 60 },
        { title: '用品编码', key: 'material_code', minWidth: 120 },
        { title: '用品名称', key: 'material_name', minWidth: 150 },
        { title: '入库数量',
          key: 'inbound_quantity',
          width: 120,
          render: (h, params) => {
            return h('InputNumber', {
              props: {
                value: params.row.inbound_quantity || 0,
                min: 0,
                precision: 0
              },
              style: { width: '100px' },
              on: {
                'on-change': (val) => {
                  this.$set(this.inboundModal.details[params.index], 'inbound_quantity', Number(val) || 0)
                  const quantity = Number(val) || 0
                  const unitPrice = this.inboundModal.details[params.index].unit_price || 0
                  this.$set(this.inboundModal.details[params.index], 'total_amount', (quantity * unitPrice).toFixed(2))
                }
              }
            })
          }
        },
        { title: '单价',
          key: 'unit_price',
          minWidth: 120,
          render: (h, params) => {
            return h('InputNumber', {
              props: {
                value: params.row.unit_price || 0,
                min: 0,
                precision: 2
              },
              style: { width: '100px' },
              on: {
                'on-change': (val) => {
                  this.$set(this.inboundModal.details[params.index], 'unit_price', Number(val) || 0)
                  const quantity = this.inboundModal.details[params.index].inbound_quantity || 0
                  const unitPrice = Number(val) || 0
                  this.$set(this.inboundModal.details[params.index], 'total_amount', (quantity * unitPrice).toFixed(2))
                }
              }
            })
          }
        },
        {
          title: '总金额',
          key: 'total_amount',
          minWidth: 120,
          render: (h, params) => {
            const quantity = Number(params.row.inbound_quantity) || 0
            const unitPrice = Number(params.row.unit_price) || 0
            const total = (quantity * unitPrice).toFixed(2)
            this.$set(params.row, 'total_amount', total)
            return h('span', total)
          }
        }
      ],
      returnDetailColumns: [
        { title: '用品名称', key: 'material_name' },
        { title: '申请数量', key: 'apply_quantity' },
        { title: '归还数量', key: 'returned_quantity' }
      ],
      inboundDetailDetailColumns: [
        { title: '用品编码', key: 'material_code' },
        { title: '用品名称', key: 'material_name' },
        { title: '数量', key: 'inbound_quantity' },
        { title: '单价', key: 'unit_price' }
      ],
      // 选择器控制与已选明细
      showMaterialSelector: false,
      showInboundMaterialSelector: false,
      applySelectedDetails: [],
      applyModal: { visible: false, isEdit: false, saving: false, form: {}, details: [], isEditing: false },
      approveModal: { visible: false, record: {}, details: [], opinion: '', submitting: false },
      detailModal: { visible: false, loading: false, data: {}, details: [], logs: [] },
      // 入库相关数据
      importShow: false,
      impBtnDisabled: false,
      inboundTypeMap: { '1': '手工', '2': '归还' },
      inboundStatusMap: { '0': '待入库', '1': '已入库' },
      opTypeMap: { '1': '入库', '2': '出库' },
      issueStatusType: { '0': '待发放', '1': '已发放' },
      inboundSelectedDetails: [],
      inboundModal: { visible: false, isEdit: false, saving: false, form: {}, details: [] },
      returnModal: { visible: false, record: {}, details: [], saving: false },
      inboundDetailModal: { visible: false, loading: false, data: {}, details: [], logs: [] },
      power: {
        leave_approval: false, // 请假审批
        leave_view: false, // 请假查询（统计）
        supply_approval: false, // 用品申领审批
        supply_view: false, // 用品查询（统计）
        inventory_manager: false // 库存管理
      }
    }
  },
  created () {
    this.fetchList('apply')
    this.fetchApproverList()
    this.getUserDmPermission()
    this.fetchList('pending')
  },
  methods: {
    getUserDmPermission () {
      getUserDmPermissionList({}).then(ret => {
        console.log('ret', ret)
        if (ret.data && ret.data.errcode === 0) {
          const data = ret.data.data || []
          for (let i = 0; i < data.length; i++) {
            var ele = data[i]
            if (this.power.hasOwnProperty(ele.code)) {
              this.power[ele.code] = true
            }
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg || '请稍后重试' })
        }
      })
    },
    // 新增：获取审批人列表
    async fetchApproverList () {
      await getSupplyApproval().then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.approverModal.approverList = ret.data.data || []
          const leaderItem = this.approverModal.approverList.find(
            (item) => item.leader === 1
          )
          if (leaderItem) {
            this.approverModal.form.approver_id = leaderItem.id
          } else {
            this.approverModal.form.approver_id = this.approverModal.approverList[0].id
          }
        } else {
          this.$Notice.error({ title: '获取审批人失败', desc: ret.data && ret.data.errmsg })
        }
      })
    },
    // 获取当天日期，格式为 yyyy-MM-dd
    getTodayDate () {
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 格式化毫秒差值为易读的时长
    formatDuration (diffMs) {
      // 无有效差值时返回兜底值
      if (diffMs <= 0) return '--'
      // 时间单位换算（毫秒）
      const oneSecond = 1000
      const oneMinute = oneSecond * 60
      const oneHour = oneMinute * 60
      const oneDay = oneHour * 24
      // 计算各单位的数值
      const days = Math.floor(diffMs / oneDay)
      const hours = Math.floor((diffMs % oneDay) / oneHour)
      const minutes = Math.floor((diffMs % oneHour) / oneMinute)
      const seconds = Math.floor((diffMs % oneMinute) / oneSecond)
      // 拼接时长字符串（按需显示非零单位，避免冗余）
      let duration = ''
      if (days > 0) duration += `${days}天`
      if (hours > 0 || duration) duration += `${hours}时`
      if (minutes > 0 || duration) duration += `${minutes}分`
      duration += `${seconds}秒`
      return duration
    },
    // 处理单元格点击编辑
    handleCellEdit (row, column, index, field) {
      if (field === 'apply_quantity') {
        this.editingRowIndex = index
        this.editingCellField = field
        // 下一个tick聚焦到输入框
        this.$nextTick(() => {
          const input = document.querySelector(`.ivu-table-cell-with-input input`)
          if (input) input.focus()
        })
      }
    },
    // 添加方法：退出编辑模式
    exitEditMode () {
      this.editingRowIndex = -1
      this.editingCellField = ''
    },
    // 转换时间戳为yyyy-MM-dd
    formatDate (timestamp) {
      if (!timestamp || isNaN(Number(timestamp))) return ''
      const d = new Date(Number(timestamp))
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    // 转换时间戳为yyyy-MM-dd hh-mm-ss
    formatDateTime (timestamp) {
      // 空值/非数字处理：返回空字符串
      if (!timestamp || isNaN(Number(timestamp))) return ''
      const d = new Date(Number(timestamp))
      // 年
      const year = d.getFullYear()
      // 月（补0）
      const month = String(d.getMonth() + 1).padStart(2, '0')
      // 日（补0）
      const day = String(d.getDate()).padStart(2, '0')
      // 时（24小时制，补0）
      const hour = String(d.getHours()).padStart(2, '0')
      // 分（补0）
      const minute = String(d.getMinutes()).padStart(2, '0')
      // 秒（补0）
      const second = String(d.getSeconds()).padStart(2, '0')
      // 拼接为 yyyy-MM-dd HH:mm:ss
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    handleTabChange (name) {
      this.activeTab = name
      if (name === 'pending') this.fetchList('pending')
      if (name === 'history') this.fetchList('history')
      if (name === 'inbound') this.fetchList('inbound')
      if (name === 'return') this.fetchList('return')
      if (name === 'inventory') this.fetchList('inventory')
    },
    fetchList (tab) {
      const apiMap = { apply: getBorrowList, pending: getPendingBorrowList, history: getHistoryBorrowList, inbound: getInboundList, return: getPendingReturnList, inventory: getInventoryList }
      const api = apiMap[tab]; if (!api) return
      this.loading[tab] = true
      // 清理空值，防止参数传递问题
      const cleanParams = (obj) => {
        obj.startDate = normalizeVisitTimeValue(obj.startDate)
        obj.endDate = normalizeVisitTimeValue(obj.endDate)
        const cleaned = {}
        for (let key in obj) {
          const value = obj[key]
          if (value !== null && value !== undefined && value !== '') {
            cleaned[key] = value
          }
        }
        return cleaned
      }
      const payload = Object.assign({}, this.pagers[tab] || {}, { params: cleanParams(this.filters[tab] || {}) })
      if (payload.params.endDate) {
        payload.params.endDate = payload.params.endDate.substring(0, 10) + ' 23:59:59'
      }
      console.log(payload)
      api(payload).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          const data = ret.data.data || {}
          this.tables[tab] = data.results || []
          if (tab === 'pending') {
            this.pushBadgeShow = this.tables[tab].length > 0
          }
          if (data.totalRecord !== undefined) (this.pagers[tab] || {}).totalRecord = data.totalRecord
        } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.loading[tab] = false })
    },
    handleSearch (tab) {
      (this.pagers[tab] || {}).pageNo = 1
      this.fetchList(tab)
    },
    handleReset (tab) {
      if (tab === 'inbound') {
        this.filters[tab] = {
          inbound_no: null,
          batch_no: null,
          startDate: null,
          endDate: null,
          inbound_type: null,
          inbound_status: null
        }
      } else {
        this.filters[tab] = {}
      }
      ; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab)
    },
    pageChange (tab, pageNo) { (this.pagers[tab] || {}).pageNo = pageNo; this.fetchList(tab) },
    sizeChange (tab, size) { (this.pagers[tab] || {}).pageSize = size; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },

    openApplyModal () {
      this.applyModal.isEdit = false
      this.applyModal.form = {
        applicant_id: '',
        applicant_name: '',
        department_id: '',
        department_name: '',
        borrow_purpose: '',
        expected_return_date: '',
        approval_status: 0,
        approver_id: '' // 确保包含审批人字段
      }
      // 如果有默认审批人，可以设置
      if (this.approverModal.approverList.length > 0) {
        const leaderItem = this.approverModal.approverList.find(item => item.leader === 1)
        this.applyModal.form.approver_id = leaderItem ? leaderItem.id : this.approverModal.approverList[0].id
      }
      this.applyModal.details = []
      this.applyModal.visible = true
      this.exitEditMode()
      // 重置验证状态（如果有的话）
      if (this.$refs.applyForm) {
        this.$refs.applyForm.resetFields()
      }
    },
    openEdit (row) {
      console.log(row)
      this.applyModal.isEdit = true
      this.applyModal.form = Object.assign({}, row)
      // 关键：时间戳转 yyyy-MM-dd 字符串
      if (this.applyModal.form.expected_return_date) {
        this.applyModal.form.expected_return_date = this.formatDate(this.applyModal.form.expected_return_date)
      } else {
        this.applyModal.form.expected_return_date = this.getTodayDate()
      }
      // 如果表单中没有 approver_id，设置默认值
      if (!this.applyModal.form.approver_id && this.approverModal.approverList.length > 0) {
        const leaderItem = this.approverModal.approverList.find(item => item.leader === 1)
        this.applyModal.form.approver_id = leaderItem ? leaderItem.id : this.approverModal.approverList[0].id
      }
      // load details from backend when open (simplified)
      getBorrowById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.applyModal.details = ret.data.data.details || []
        }
      })
      this.applyModal.visible = true
      this.exitEditMode()
    },
    onApplyDetailSelectionChange (list) {
      this.applySelectedDetails = list || []
    },
    handleMaterialSelectorOk (selectedRows) {
      if (!Array.isArray(selectedRows) || selectedRows.length === 0) {
        this.$Message.warning('未选择用品')
        return
      }
      selectedRows.forEach(sel => {
        console.log(sel)
        const code = sel.material_code
        const exist = this.applyModal.details.find(d => d.material_code === code)
        if (exist) {
          exist.apply_quantity = Number(exist.apply_quantity || 0) + 1
        } else {
          this.applyModal.details.push({
            material_id: sel.id,
            material_code: sel.material_code,
            material_name: sel.material_name,
            apply_quantity: 1,
            unit: sel.unit,
            issue_remark: '',
            available_quantity: sel.available_quantity || 0
          })
        }
      })
      this.showMaterialSelector = false
    },
    deleteSelectedDetails () {
      if (!this.applySelectedDetails || this.applySelectedDetails.length === 0) {
        this.$Message.warning('请先选择要删除的明细行')
        return
      }
      const toRemoveCodes = this.applySelectedDetails.map(r => r.material_code)
      this.applyModal.details = this.applyModal.details.filter(d => !toRemoveCodes.includes(d.material_code))
      this.applySelectedDetails = []
    },
    saveApplication () {
      // 先退出编辑模式
      this.exitEditMode()
      // 表单验证
      this.$refs.applyForm.validate((valid) => {
        if (!valid) {
          this.$Message.error('请填写完整表单信息')
          return
        }
        // 验证明细
        if (this.applyModal.details === null || this.applyModal.details.length < 1) {
          this.$Message.error('请至少申领一条用品')
          return
        }
        // 验证申请数量
        const invalidDetails = this.applyModal.details.filter(d =>
          !d.apply_quantity || d.apply_quantity <= 0
        )
        if (invalidDetails.length > 0) {
          this.$Message.error('请填写正确的申请数量')
          return
        }
        this.applyModal.saving = true
        const payload = Object.assign({}, this.applyModal.form, {
          details: this.applyModal.details,
          // 确保提交时带上审批人ID
          approver_id: this.approverModal.form.approver_id
        })
        saveBorrowApplication(payload).then(ret => {
          if (ret.data && ret.data.errcode === 0) {
            this.$Message.success('保存成功')
            this.applyModal.visible = false
            this.fetchList('apply')
            console.log(this.applyModal.saving)
          } else {
            this.$Notice.error({ title: '保存失败', desc: ret.data && ret.data.errmsg })
          }
        }).finally(() => {
          this.applyModal.saving = false
        })
      })
    },
    canEdit (row) {
      const userId = this.$store.state.user.userId
      return (row.approval_status === 0 && row.applicant_id === userId) || (row.approval_status === -1 && row.applicant_id === userId)
    },
    canSubmit (row) {
      const userId = this.$store.state.user.userId
      return (row.approval_status === 0 && row.applicant_id === userId) || (row.approval_status === -1 && row.applicant_id === userId)
    },
    canRevoke (row) {
      const userId = this.$store.state.user.userId
      return (row.approval_status === 1 && row.applicant_id === userId)
    },
    submit (row) {
      console.log(row)
      // 暂存当前申请ID
      this.approverModal.currentBorrowId = row.id
      // 清空上次选择的审批人
      this.approverModal.form.approver_id = ''
      this.approverModal.form.approver_id = row.approver_id
      // 获取审批人列表
      this.fetchApproverList()
      // 打开审批人选择弹窗
      // this.approverModal.visible = true
      this.confirmSubmitWithApprover()
    },
    // 新增：确认选择审批人后提交
    confirmSubmitWithApprover () {
      const approverId = this.approverModal.form.approver_id
      this.approverModal.submitting = true
      // 调用提交接口，携带审批人ID（需后端接口支持）
      submitBorrow({
        id: this.approverModal.currentBorrowId,
        approver_id: approverId, // 新增审批人参数
        approver_name: this.approverModal.form.approver_name
      }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('提交成功')
          this.approverModal.visible = false
          this.fetchList('apply')
        } else {
          this.$Notice.error({ title: '提交失败', desc: ret.data && ret.data.errmsg })
        }
      }).finally(() => {
        this.approverModal.submitting = false
      })
    },
    revoke (row) { revokeBorrow({ id: row.id }).then(ret => { if (ret.data && ret.data.errcode === 0) { this.$Message.success('撤回成功'); this.fetchList('apply') } else this.$Notice.error({ title: '撤回失败', desc: ret.data && ret.data.errmsg }) }) },

    openApproveModal (row) {
      this.approveModal.record = Object.assign({}, row)
      this.approveModal.opinion = ''
      // load details and current inventory for display
      getBorrowById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.approveModal.details = ret.data.data.details || []
        }
      })
      this.approveModal.visible = true
    },
    confirmApprove () {
      this.approveModal.submitting = true
      approveBorrow({ id: this.approveModal.record.id, comment: this.approveModal.opinion }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('已通过，已生成出库并更新库存')
          this.approveModal.visible = false; this.fetchList('pending')
          this.fetchList('apply')
        } else {
          this.$Notice.error({ title: '操作失败', desc: ret.data && ret.data.errmsg })
        }
      }).finally(() => { this.approveModal.submitting = false })
    },
    confirmReject () {
      if (!this.approveModal.opinion || !this.approveModal.opinion.trim()) {
        this.$Message.warning('请输入驳回原因')
        return
      }
      this.approveModal.submitting = true
      rejectBorrow({ id: this.approveModal.record.id, comment: this.approveModal.opinion }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('已驳回')
          this.approveModal.visible = false
          this.fetchList('pending')
        } else {
          this.$Notice.error({ title: '驳回失败', desc: ret.data && ret.data.errmsg })
        }
      }).finally(() => { this.approveModal.submitting = false })
    },

    openDetail (row) {
      this.detailModal.visible = true
      this.detailModal.loading = true
      getBorrowById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.detailModal.data = ret.data.data || {}
          this.detailModal.details = ret.data.data.details || []
          this.detailModal.logs = ret.data.data.logs || []
        } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.detailModal.loading = false })
    },
    // 入库相关方法
    showImport () {
      return true
    },
    async tplDownload () {
      try {
        const response = await axios.post(
          '/api/ac/jilinsscgsdp/keyDmInbound/templateDownload',
          {},
          {
            responseType: 'blob'
          }
        )
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.download = '入库导入模板.xlsx'
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      } catch (error) {
        console.error('下载失败:', error)
      }
    },
    handleBeforeUpload (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.readFile(file)
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    async readFile (file) {
      this.impBtnDisabled = true
      const formdata = new FormData()
      formdata.append('file', file)
      formdata.append('fileName', file.name)
      const ret = await importInbound(formdata)

      if (ret && ret.data) {
        this.importShow = false
        this.impBtnDisabled = false
        const mobj = ret.data.data || {}
        let msg = '添加' + (mobj.insert || 0) + '条, 更新' + (mobj.update || 0) + '条'
        if (mobj.error) {
          msg += ', 缺少关键信息未能导入' + mobj.error + '条'
        }
        if (mobj.errInfo && mobj.errInfo !== '') {
          msg += ', 以下记录导入失败：' + mobj.errInfo
        }
        if (mobj.errmsg && mobj.errmsg !== 'success') {
          msg += mobj.errmsg
        }
        if ((mobj.insert || 0) + (mobj.update || 0) > 0) {
          this.fetchList('inbound')
        }
        this.$Notice.success({
          title: '导入完成！',
          desc: msg
        })
      } else {
        this.impBtnDisabled = false
        this.$Notice.warning({
          title: '未导入数据！',
          desc: ret && ret.data && ret.data.errmsg
        })
      }
    },
    openInboundModal () {
      this.inboundModal.isEdit = false
      this.inboundModal.form = { inbound_no: '', batch_no: '', inbound_date: this.getTodayDate(), inbound_type: 1, storage_location: '', remark: '' }
      this.inboundModal.details = []
      this.inboundModal.visible = true
    },
    onInboundDetailSelectionChange (list) {
      this.inboundSelectedDetails = list || []
    },
    handleInboundMaterialSelectorOk (selectedRows) {
      console.log('选择的用品信息' + selectedRows)
      if (!Array.isArray(selectedRows) || selectedRows.length === 0) {
        this.$Message.warning('未选择用品')
        return
      }
      selectedRows.forEach(sel => {
        const code = sel.material_code
        const exist = this.inboundModal.details.find(d => d.material_code === code)
        if (exist) {
          exist.inbound_quantity = Number(exist.inbound_quantity || 0) + 1
        } else {
          this.inboundModal.details.push({
            material_id: sel.id,
            material_code: sel.material_code,
            material_name: sel.material_name,
            inbound_quantity: 0,
            unit_price: 0,
            total_amount: 0
          })
        }
      })
      this.showInboundMaterialSelector = false
    },
    deleteSelectedInboundDetails () {
      if (!this.inboundSelectedDetails || this.inboundSelectedDetails.length === 0) {
        this.$Message.warning('请先选择要删除的明细行')
        return
      }
      const toRemoveCodes = this.inboundSelectedDetails.map(r => r.material_code)
      this.inboundModal.details = this.inboundModal.details.filter(d => !toRemoveCodes.includes(d.material_code))
      this.inboundSelectedDetails = []
    },
    openEditInbound (row) {
      this.inboundModal.isEdit = true
      getInboundById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.inboundModal.form = ret.data.data || {}
          if (this.inboundModal.form.inbound_date) {
            this.inboundModal.form.inbound_date = this.formatDate(this.inboundModal.form.inbound_date) || ''
          } else {
            this.inboundModal.form.inbound_date = this.getTodayDate()
          }
          this.inboundModal.details = ret.data.data.details || []
        }
      })
      this.inboundModal.visible = true
    },
    saveInbound () {
      this.inboundModal.saving = true
      const { inbound_no, batch_no, inbound_date } = this.inboundModal.form
      if (!inbound_no || !batch_no || !inbound_date) {
        this.$Message.warning('入库单号、批次号、入库日期为必填项')
        this.inboundModal.saving = false
        return
      }
      if (this.inboundModal.details === null || this.inboundModal.details.length < 1) {
        this.$Message.warning('请至少入库一条用品')
        this.inboundModal.saving = false
        return
      }
      const invalidDetails = this.inboundModal.details.filter(detail => {
        return !detail.inbound_quantity || detail.inbound_quantity <= 0
      })
      if (invalidDetails.length > 0) {
        this.$Message.warning('请填写有效的入库数量（必须大于0）')
        this.inboundModal.saving = false
        return
      }
      const details = this.inboundModal.details.map(detail => {
        return {
          material_id: detail.material_id,
          material_code: detail.material_code,
          material_name: detail.material_name,
          inbound_quantity: Number(detail.inbound_quantity) || 0,
          unit_price: Number(detail.unit_price) || 0,
          total_amount: Number(detail.total_amount) || 0
        }
      })
      const payload = {
        ...this.inboundModal.form,
        details: details
      }
      console.log('发送的数据：', payload)
      saveInbound(payload).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('保存成功')
          this.inboundModal.visible = false
          this.fetchList('inbound')
        } else {
          this.$Notice.error({
            title: '保存失败',
            desc: ret.data & ret.data.errmsg || '未知错误'
          })
        }
      }).catch(error => {
        console.error('保存出错：', error)
        this.$Notice.error({ title: '保存出错', desc: error.message })
      }).finally(() => {
        this.inboundModal.saving = false
      })
    },
    canEditInbound (row) {
      const userId = this.$store.state.user.userId
      return row.inbound_status === 0 && row.create_by === userId
    },
    deleteInbound (row) {
      deleteInbound({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('删除成功'); this.fetchList('inbound')
        } else {
          this.$Notice.error({
            title: '删除失败', desc: ret.data && ret.data.errmsg
          })
        }
      })
    },
    doInbound (row) {
      doInbound({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.$Message.success('入库成功')
          this.fetchList('inbound')
          this.fetchList('inventory')
        } else {
          this.$Notice.error({ title: '入库失败', desc: ret.data && ret.data.errmsg })
        }
      })
    },
    openReturnModal (row) {
      this.returnModal.record = Object.assign({}, row)
      this.returnModal.details = []
      getPendingReturnById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) this.returnModal.details = ret.data.data.details || []
      })
      this.returnModal.visible = true
    },
    confirmReturn () {
      this.returnModal.saving = true
      processReturn({ id: this.returnModal.record.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) { this.$Message.success('归还已入库并更新库存'); this.returnModal.visible = false; this.fetchList('return'); this.fetchList('inventory') } else this.$Notice.error({ title: '归还失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.returnModal.saving = false })
    },
    openInboundDetail (row) {
      this.inboundDetailModal.visible = true
      this.inboundDetailModal.loading = true
      getInboundById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          console.log(ret.data)
          this.inboundDetailModal.data = ret.data.data || {}
          this.inboundDetailModal.details = ret.data.data.details || []
          this.inboundDetailModal.logs = ret.data.data.logs || []
        } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.inboundDetailModal.loading = false })
    }
  }
}
</script>

<style scoped>
.key-dm-inventory-wrapper { padding: 10px; }
.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
.mr10 { margin-right: 10px; }
.text-right { text-align: right; }
.page_style { margin-top: 12px; text-align: right; }
.mt8 { margin-top: 8px; }
/* 搜索区域外层盒：统一间距+背景 */
.search-container {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* 行容器：垂直居中+间距 */
.search-row {
  margin: 0 !important;
}

/* 内联表单：消除默认间距 */
.form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}

/* 表单项：统一间距+对齐 */
.form-item {
  margin: 0 8px 0 0 !important;
  display: flex;
  align-items: center;
}

/* 输入框/下拉框：统一宽度 */
.form-input {
  width: 180px !important;
}

/* 按钮组：单独样式 */
.form-item-actions {
  margin-left: 16px !important;
}

/* 右侧操作列：居右+内边距 */
.action-col {
  text-align: right;
  padding-right: 16px;
}

/* 响应式适配：小屏幕自动换行 */
@media (max-width: 768px) {
  .form-inline {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-item {
    margin: 8px 0 !important;
    width: 100%;
  }
  .form-input {
    width: 100% !important;
  }
  .action-col {
    text-align: left;
    padding: 16px 0 0 0;
  }
}
/* 添加一些样式来美化编辑状态 */
.ivu-table-cell {
  position: relative;
}

.edit-icon {
  opacity: 0;
  transition: opacity 0.2s;
}

.ivu-table-row:hover .edit-icon {
  opacity: 1;
}
.mr5 {
  margin-right: 5px;
}
.pushIconCls {
  position: relative;
  z-index:4001;
  cursor: pointer;
  color: red;
  font-weight: bold;
  font-size: 18px;
  top: 0px;
  left: 245px;
}
.pushCls {
  position: absolute;
  z-index:1;
}
</style>
