<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout
        :model="state.queryData"
        ref="queryFormRef"
        label-position="left"
        label-width="auto"
        :gutter="30"
        :colSpan="6"
      >
        <template #buttonGroup>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>

    <cacp-complex-table
      :actions="actions"
      :data="tableData"
      :pagination="tablePagination"
      :actionsWidth="120"
      @selection-change="handleSelectionChange"
      @on-page-change="onPageChange"
      @on-size-change="onSizeChange"
      :loading="loading"
    >
      <el-table-column type="selection" width="36" fixed="left" />
      <el-table-column property="entryId" label="报关单号" width="100" :show-overflow-tooltip="true" />
      <el-table-column property="mainStatus" label="维护状态" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="passMode" label="通关模式" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="trafMode" label="运输方式" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="iEFlag" label="出入境标志" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="iEPort" label="进出境口岸" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="declPort" label="申报口岸" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="iEDate" label="货物运抵(进出口)时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="declDate" label="申报时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="declAdvanceFlag" label="是否提前申报标记" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="acceptDate" label="自动受理时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="exInPortDate" label="出境报关单-货物进港时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="consignScc" label="境内收发货人代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="consignCode" label="境内收发货人代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="consignName" label="境内收发货人名称" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="frnConsignCode" label="境外收发货人代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="frnConsignName" label="境外收发货人名称(中文)" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="tradeMode" label="监管方式" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="tradeCountry" label="贸易国别代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="grossWt" label="货运量毛重" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="netWt" label="货运量净重" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="rmbPrice" label="货运值人民币" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="usdPrice" label="货运值美元" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="CONTAINER" label="集装箱数量" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="declMode" label="报关模式" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="declStatus" label="报关单状态" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="orderReceiveDate" label="现场接单时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="orderReceiveCost" label="接单耗时即单证审核时长(秒)" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="certRlsDate" label="单证放行时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="preReleaseDate" label="担保放行时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="agentCode" label="申报单位代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="agentName" label="申报单位名称" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="noteS" label="备注" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="ownerCode" label="生产销售单位代码" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="ownerName" label="生产销售单位名称" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="examDate" label="转关数据发送时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="checkDate" label="转关数据核销时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="compEleDate" label="完整申报电子申报时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="releaseDate" label="结关时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="cuCost" label="海关通关时间(秒)" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="totalCost" label="总体通关时间(秒)" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="beforeDeclCost" label="申报前准备时间(秒)" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="profVerifyFlag" label="是否专业审单" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="newTwoStepFlag" label="是否新两步申报标记" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="eleDeclDate" label="电子申报时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="assessStartDate" label="现场验估时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="assessEndDate" label="验估处置完毕时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="refundDate" label="退单时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="refundFlag" label="是否退过单标记" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="manCreateTime" label="查验指令下达时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="manChkTimeStart" label="查验开始时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="manChkTimeEnd" label="查验结束时间" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="checkCustomsCode" label="查验关区" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="checkFlag" label="是否查验" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="manProcResult" label="处理结果" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="manProcIdea" label="处理意见" width="120" :show-overflow-tooltip="true" />
    </cacp-complex-table>
  </cacp-search-layout>

  <cacp-dialog
    v-model="state.dialogVisible"
    :resizable="false"
    :title="state.title"
    width="60%"
    @closed="onDialogClosed"
  >
    <el-form
      :model="state.formData"
      ref="dialogFormRef"
      :rules="infoRules"
      label-width="auto"
      label-position="left"
      :disabled="!state.isEdit"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="维护状态" prop="mainStatus">
            <el-input v-model="state.formData.mainStatus" placeholder="请输入维护状态" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通关模式" prop="passMode">
            <el-input v-model="state.formData.passMode" placeholder="请输入通关模式" />
          </el-form-item>
        </el-col>
      </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="运输方式" prop="trafMode">
          <el-input v-model="state.formData.trafMode" placeholder="请输入运输方式" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出入境标志" prop="iEFlag">
          <el-input v-model="state.formData.iEFlag" placeholder="请输入出入境标志" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="进出境口岸" prop="iEPort">
          <el-input v-model="state.formData.iEPort" placeholder="请输入进出境口岸" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报口岸" prop="declPort">
          <el-input v-model="state.formData.declPort" placeholder="请输入申报口岸" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货物运抵(进出口)时间" prop="iEDate">
          <el-input v-model="state.formData.iEDate" placeholder="请输入货物运抵(进出口)时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报时间" prop="declDate">
          <el-input v-model="state.formData.declDate" placeholder="请输入申报时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否提前申报标记" prop="declAdvanceFlag">
          <el-input v-model="state.formData.declAdvanceFlag" placeholder="请输入是否提前申报标记" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="自动受理时间" prop="acceptDate">
          <el-input v-model="state.formData.acceptDate" placeholder="请输入自动受理时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="出境报关单-货物进港时间" prop="exInPortDate">
          <el-input v-model="state.formData.exInPortDate" placeholder="请输入出境报关单-货物进港时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境内收发货人代码" prop="consignScc">
          <el-input v-model="state.formData.consignScc" placeholder="请输入境内收发货人代码" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="境内收发货人代码" prop="consignCode">
          <el-input v-model="state.formData.consignCode" placeholder="请输入境内收发货人代码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境内收发货人名称" prop="consignName">
          <el-input v-model="state.formData.consignName" placeholder="请输入境内收发货人名称" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="境外收发货人代码" prop="frnConsignCode">
          <el-input v-model="state.formData.frnConsignCode" placeholder="请输入境外收发货人代码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境外收发货人名称(中文)" prop="frnConsignName">
          <el-input v-model="state.formData.frnConsignName" placeholder="请输入境外收发货人名称(中文)" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="监管方式" prop="tradeMode">
          <el-input v-model="state.formData.tradeMode" placeholder="请输入监管方式" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="贸易国别代码" prop="tradeCountry">
          <el-input v-model="state.formData.tradeCountry" placeholder="请输入贸易国别代码" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货运量毛重" prop="grossWt">
          <el-input v-model="state.formData.grossWt" placeholder="请输入货运量毛重" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货运量净重" prop="netWt">
          <el-input v-model="state.formData.netWt" placeholder="请输入货运量净重" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货运值人民币" prop="rmbPrice">
          <el-input v-model="state.formData.rmbPrice" placeholder="请输入货运值人民币" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货运值美元" prop="usdPrice">
          <el-input v-model="state.formData.usdPrice" placeholder="请输入货运值美元" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="集装箱数量" prop="CONTAINER">
          <el-input v-model="state.formData.CONTAINER" placeholder="请输入集装箱数量" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报关模式" prop="declMode">
          <el-input v-model="state.formData.declMode" placeholder="请输入报关模式" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="报关单状态" prop="declStatus">
          <el-input v-model="state.formData.declStatus" placeholder="请输入报关单状态" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="现场接单时间" prop="orderReceiveDate">
          <el-input v-model="state.formData.orderReceiveDate" placeholder="请输入现场接单时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="接单耗时即单证审核时长(秒)" prop="orderReceiveCost">
          <el-input v-model="state.formData.orderReceiveCost" placeholder="请输入接单耗时即单证审核时长(秒)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单证放行时间" prop="certRlsDate">
          <el-input v-model="state.formData.certRlsDate" placeholder="请输入单证放行时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="担保放行时间" prop="preReleaseDate">
          <el-input v-model="state.formData.preReleaseDate" placeholder="请输入担保放行时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报单位代码" prop="agentCode">
          <el-input v-model="state.formData.agentCode" placeholder="请输入申报单位代码" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="申报单位名称" prop="agentName">
          <el-input v-model="state.formData.agentName" placeholder="请输入申报单位名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备注" prop="noteS">
          <el-input v-model="state.formData.noteS" placeholder="请输入备注" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="生产销售单位代码" prop="ownerCode">
          <el-input v-model="state.formData.ownerCode" placeholder="请输入生产销售单位代码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="生产销售单位名称" prop="ownerName">
          <el-input v-model="state.formData.ownerName" placeholder="请输入生产销售单位名称" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="转关数据发送时间" prop="examDate">
          <el-input v-model="state.formData.examDate" placeholder="请输入转关数据发送时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="转关数据核销时间" prop="checkDate">
          <el-input v-model="state.formData.checkDate" placeholder="请输入转关数据核销时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="完整申报电子申报时间" prop="compEleDate">
          <el-input v-model="state.formData.compEleDate" placeholder="请输入完整申报电子申报时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结关时间" prop="releaseDate">
          <el-input v-model="state.formData.releaseDate" placeholder="请输入结关时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="海关通关时间(秒)" prop="cuCost">
          <el-input v-model="state.formData.cuCost" placeholder="请输入海关通关时间(秒)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总体通关时间(秒)" prop="totalCost">
          <el-input v-model="state.formData.totalCost" placeholder="请输入总体通关时间(秒)" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="申报前准备时间(秒)" prop="beforeDeclCost">
          <el-input v-model="state.formData.beforeDeclCost" placeholder="请输入申报前准备时间(秒)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否专业审单" prop="profVerifyFlag">
          <el-input v-model="state.formData.profVerifyFlag" placeholder="请输入是否专业审单" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否新两步申报标记" prop="newTwoStepFlag">
          <el-input v-model="state.formData.newTwoStepFlag" placeholder="请输入是否新两步申报标记" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="电子申报时间" prop="eleDeclDate">
          <el-input v-model="state.formData.eleDeclDate" placeholder="请输入电子申报时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="现场验估时间" prop="assessStartDate">
          <el-input v-model="state.formData.assessStartDate" placeholder="请输入现场验估时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="验估处置完毕时间" prop="assessEndDate">
          <el-input v-model="state.formData.assessEndDate" placeholder="请输入验估处置完毕时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="退单时间" prop="refundDate">
          <el-input v-model="state.formData.refundDate" placeholder="请输入退单时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否退过单标记" prop="refundFlag">
          <el-input v-model="state.formData.refundFlag" placeholder="请输入是否退过单标记" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="查验指令下达时间" prop="manCreateTime">
          <el-input v-model="state.formData.manCreateTime" placeholder="请输入查验指令下达时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="查验开始时间" prop="manChkTimeStart">
          <el-input v-model="state.formData.manChkTimeStart" placeholder="请输入查验开始时间" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="查验结束时间" prop="manChkTimeEnd">
          <el-input v-model="state.formData.manChkTimeEnd" placeholder="请输入查验结束时间" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="查验关区" prop="checkCustomsCode">
          <el-input v-model="state.formData.checkCustomsCode" placeholder="请输入查验关区" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否查验" prop="checkFlag">
          <el-input v-model="state.formData.checkFlag" placeholder="请输入是否查验" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="处理结果" prop="manProcResult">
          <el-input v-model="state.formData.manProcResult" placeholder="请输入处理结果" />
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="处理意见" prop="manProcIdea">
          <el-input v-model="state.formData.manProcIdea" placeholder="请输入处理意见" />
        </el-form-item>
      </el-col>
    </el-row>

    </el-form>
    <template #footer v-if="state.isEdit">
      <el-button @click="onDialogClosed">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </cacp-dialog>

  <cacp-dialog
    v-model="state.viewDialogVisible"
    :resizable="false"
    :title="state.viewTitle"
    width="50%"
  >
    <el-form
      :model="state.viewForm"
      label-width="auto"
      label-position="left"
      :disabled="true"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="维护状态:" prop="mainStatus">
            <span>{{ state.viewForm.mainStatus || '-' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通关模式:" prop="passMode">
            <span>{{ state.viewForm.passMode || '-' }}</span>
          </el-form-item>
        </el-col>
      </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="运输方式:" prop="trafMode">
          <span>{{ state.viewForm.trafMode || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出入境标志:" prop="iEFlag">
          <span>{{ state.viewForm.iEFlag || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="进出境口岸:" prop="iEPort">
          <span>{{ state.viewForm.iEPort || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报口岸:" prop="declPort">
          <span>{{ state.viewForm.declPort || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货物运抵(进出口)时间:" prop="iEDate">
          <span>{{ state.viewForm.iEDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报时间:" prop="declDate">
          <span>{{ state.viewForm.declDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否提前申报标记:" prop="declAdvanceFlag">
          <span>{{ state.viewForm.declAdvanceFlag || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="自动受理时间:" prop="acceptDate">
          <span>{{ state.viewForm.acceptDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="出境报关单-货物进港时间:" prop="exInPortDate">
          <span>{{ state.viewForm.exInPortDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境内收发货人代码:" prop="consignScc">
          <span>{{ state.viewForm.consignScc || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="境内收发货人代码:" prop="consignCode">
          <span>{{ state.viewForm.consignCode || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境内收发货人名称:" prop="consignName">
          <span>{{ state.viewForm.consignName || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="境外收发货人代码:" prop="frnConsignCode">
          <span>{{ state.viewForm.frnConsignCode || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="境外收发货人名称(中文):" prop="frnConsignName">
          <span>{{ state.viewForm.frnConsignName || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="监管方式:" prop="tradeMode">
          <span>{{ state.viewForm.tradeMode || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="贸易国别代码:" prop="tradeCountry">
          <span>{{ state.viewForm.tradeCountry || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货运量毛重:" prop="grossWt">
          <span>{{ state.viewForm.grossWt || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货运量净重:" prop="netWt">
          <span>{{ state.viewForm.netWt || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="货运值人民币:" prop="rmbPrice">
          <span>{{ state.viewForm.rmbPrice || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货运值美元:" prop="usdPrice">
          <span>{{ state.viewForm.usdPrice || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="集装箱数量:" prop="CONTAINER">
          <span>{{ state.viewForm.CONTAINER || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报关模式:" prop="declMode">
          <span>{{ state.viewForm.declMode || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="报关单状态:" prop="declStatus">
          <span>{{ state.viewForm.declStatus || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="现场接单时间:" prop="orderReceiveDate">
          <span>{{ state.viewForm.orderReceiveDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="接单耗时即单证审核时长(秒):" prop="orderReceiveCost">
          <span>{{ state.viewForm.orderReceiveCost || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单证放行时间:" prop="certRlsDate">
          <span>{{ state.viewForm.certRlsDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="担保放行时间:" prop="preReleaseDate">
          <span>{{ state.viewForm.preReleaseDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申报单位代码:" prop="agentCode">
          <span>{{ state.viewForm.agentCode || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="申报单位名称:" prop="agentName">
          <span>{{ state.viewForm.agentName || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备注:" prop="noteS">
          <span>{{ state.viewForm.noteS || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="生产销售单位代码:" prop="ownerCode">
          <span>{{ state.viewForm.ownerCode || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="生产销售单位名称:" prop="ownerName">
          <span>{{ state.viewForm.ownerName || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="转关数据发送时间:" prop="examDate">
          <span>{{ state.viewForm.examDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="转关数据核销时间:" prop="checkDate">
          <span>{{ state.viewForm.checkDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="完整申报电子申报时间:" prop="compEleDate">
          <span>{{ state.viewForm.compEleDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结关时间:" prop="releaseDate">
          <span>{{ state.viewForm.releaseDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="海关通关时间(秒):" prop="cuCost">
          <span>{{ state.viewForm.cuCost || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总体通关时间(秒):" prop="totalCost">
          <span>{{ state.viewForm.totalCost || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="申报前准备时间(秒):" prop="beforeDeclCost">
          <span>{{ state.viewForm.beforeDeclCost || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否专业审单:" prop="profVerifyFlag">
          <span>{{ state.viewForm.profVerifyFlag || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否新两步申报标记:" prop="newTwoStepFlag">
          <span>{{ state.viewForm.newTwoStepFlag || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="电子申报时间:" prop="eleDeclDate">
          <span>{{ state.viewForm.eleDeclDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="现场验估时间:" prop="assessStartDate">
          <span>{{ state.viewForm.assessStartDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="验估处置完毕时间:" prop="assessEndDate">
          <span>{{ state.viewForm.assessEndDate || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="退单时间:" prop="refundDate">
          <span>{{ state.viewForm.refundDate || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否退过单标记:" prop="refundFlag">
          <span>{{ state.viewForm.refundFlag || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="查验指令下达时间:" prop="manCreateTime">
          <span>{{ state.viewForm.manCreateTime || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="查验开始时间:" prop="manChkTimeStart">
          <span>{{ state.viewForm.manChkTimeStart || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="查验结束时间:" prop="manChkTimeEnd">
          <span>{{ state.viewForm.manChkTimeEnd || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="查验关区:" prop="checkCustomsCode">
          <span>{{ state.viewForm.checkCustomsCode || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否查验:" prop="checkFlag">
          <span>{{ state.viewForm.checkFlag || '-' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="处理结果:" prop="manProcResult">
          <span>{{ state.viewForm.manProcResult || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row><el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="处理意见:" prop="manProcIdea">
          <span>{{ state.viewForm.manProcIdea || '-' }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  </cacp-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, type FormRules } from 'element-plus'
import config from '@/config'
import {
  SuccessResultCode,
  useComplexTable,
  type Result,
  type SearchPanelLayoutInstance,
  type TableAction,
  useLoading
} from '@cacp/ui'
import type { EntryHead, EntryHeadQuery } from '@/types/analyze/EntryHead'
import { insert, getList, getDetail, remove, update } from '@/apis/analyze/EntryHead'
import { permissionStatus } from '@/utils/globalPermission'

// 表单引用
const queryFormRef = ref<SearchPanelLayoutInstance>()
const dialogFormRef = ref<FormInstance>()

// 加载状态
const { loading, setLoading } = useLoading()

// 表格 Hook
const tableHooks = useComplexTable<EntryHead>(config)
const { tableData, tablePagination, setPagination, setPageIndex, setPageSizes } = tableHooks

// 响应式数据
interface State {
  queryData: EntryHeadQuery
  formData: EntryHead
  viewForm: EntryHead
  viewTitle: string
  viewDialogVisible: boolean
  title: string
  isEdit: boolean
  dialogVisible: boolean
}

const state = reactive<State>({
  queryData: {
    mainStatus: '',
    passMode: '',
    trafMode: '',
    iEFlag: '',
    iEPort: '',
    declPort: '',
    iEDate: '',
    declDate: '',
    declAdvanceFlag: '',
    acceptDate: '',
    exInPortDate: '',
    consignScc: '',
    consignCode: '',
    consignName: '',
    frnConsignCode: '',
    frnConsignName: '',
    tradeMode: '',
    tradeCountry: '',
    grossWt: '',
    netWt: '',
    rmbPrice: '',
    usdPrice: '',
    CONTAINER: '',
    declMode: '',
    declStatus: '',
    orderReceiveDate: '',
    orderReceiveCost: '',
    certRlsDate: '',
    preReleaseDate: '',
    agentCode: '',
    agentName: '',
    noteS: '',
    ownerCode: '',
    ownerName: '',
    examDate: '',
    checkDate: '',
    compEleDate: '',
    releaseDate: '',
    cuCost: '',
    totalCost: '',
    beforeDeclCost: '',
    profVerifyFlag: '',
    newTwoStepFlag: '',
    eleDeclDate: '',
    assessStartDate: '',
    assessEndDate: '',
    refundDate: '',
    refundFlag: '',
    manCreateTime: '',
    manChkTimeStart: '',
    manChkTimeEnd: '',
    checkCustomsCode: '',
    checkFlag: '',
    manProcResult: '',
    manProcIdea: '',
    pageIndex: tablePagination.currentPage,
    pageSize: tablePagination.pageSize
  },
  formData: {
    entryId: '',
    mainStatus: '',
    passMode: '',
    trafMode: '',
    iEFlag: '',
    iEPort: '',
    declPort: '',
    iEDate: '',
    declDate: '',
    declAdvanceFlag: '',
    acceptDate: '',
    exInPortDate: '',
    consignScc: '',
    consignCode: '',
    consignName: '',
    frnConsignCode: '',
    frnConsignName: '',
    tradeMode: '',
    tradeCountry: '',
    grossWt: '',
    netWt: '',
    rmbPrice: '',
    usdPrice: '',
    CONTAINER: '',
    declMode: '',
    declStatus: '',
    orderReceiveDate: '',
    orderReceiveCost: '',
    certRlsDate: '',
    preReleaseDate: '',
    agentCode: '',
    agentName: '',
    noteS: '',
    ownerCode: '',
    ownerName: '',
    examDate: '',
    checkDate: '',
    compEleDate: '',
    releaseDate: '',
    cuCost: '',
    totalCost: '',
    beforeDeclCost: '',
    profVerifyFlag: '',
    newTwoStepFlag: '',
    eleDeclDate: '',
    assessStartDate: '',
    assessEndDate: '',
    refundDate: '',
    refundFlag: '',
    manCreateTime: '',
    manChkTimeStart: '',
    manChkTimeEnd: '',
    checkCustomsCode: '',
    checkFlag: '',
    manProcResult: '',
    manProcIdea: '',
  } as EntryHead,
  viewForm: {} as EntryHead,
  viewTitle: '',
  viewDialogVisible: false,
  title: '',
  isEdit: false,
  dialogVisible: false,
})

// 表单验证规则
const infoRules = reactive<FormRules<EntryHead>>({
  entryId: [
    { required: true, message: '报关单号不能为空', trigger: 'blur' }
  ],
})

// 表格操作按钮配置
const actions = <Array<TableAction>>[
  {
    key: 'create',
    text: '新增',
    onclick: onCreate,
    limit: permissionStatus('none', 'ANALYZE_ENTRYHEAD_ADD_BT'),
    position: 'left',
    type: 'primary',
  },
  {
    key: 'view',
    text: '查看',
    onclick: onView,
    limit: permissionStatus('one', 'ANALYZE_ENTRYHEAD_VIEW_BT'),
    type: 'primary'
  },
  {
    key: 'edit',
    text: '修改',
    onclick: onEdit,
    limit: permissionStatus('one', 'ANALYZE_ENTRYHEAD_EDIT_BT'),
    type: 'primary'
  },
  {
    key: 'delete',
    text: '删除',
    onclick: onDelete,
    confirm: true,
    limit: permissionStatus('none', 'ANALYZE_ENTRYHEAD_DELETE_BT'),
    type: 'primary'
  },
  {
    key: 'refresh',
    type: 'primary',
    text: '刷新',
    onclick: onRefresh,
    limit: 'none',
    position: 'left',
    plain: true
  }
]

// 选中项的 ID 数组
const ids = ref<string[]>([])

// 多选框选中数据
function handleSelectionChange(selection: EntryHead[]) {
  ids.value = selection
    .map(item => item.entryId)
    .filter((id): id is string => id != null && id !== undefined)
}

// 搜索方法
const onSearch = () => {
  setPageIndex(1)
  onLoadData()
}

// 重置方法
const onReset = () => {
  queryFormRef.value?.resetFields()
  onPageChange(1)
}

// 每页显示条数变化
const onSizeChange = (size: number) => {
  setPageSizes(size)
  onLoadData()
}

// 翻页查询
const onPageChange = (currentPage: number) => {
  setPageIndex(currentPage)
  onLoadData()
}

// 弹框关闭方法
function onDialogClosed() {
  state.dialogVisible = false
  resetForm()
}

// 重置表单
function resetForm() {
  state.formData = {
    entryId: '',
    mainStatus: '',
    passMode: '',
    trafMode: '',
    iEFlag: '',
    iEPort: '',
    declPort: '',
    iEDate: '',
    declDate: '',
    declAdvanceFlag: '',
    acceptDate: '',
    exInPortDate: '',
    consignScc: '',
    consignCode: '',
    consignName: '',
    frnConsignCode: '',
    frnConsignName: '',
    tradeMode: '',
    tradeCountry: '',
    grossWt: '',
    netWt: '',
    rmbPrice: '',
    usdPrice: '',
    CONTAINER: '',
    declMode: '',
    declStatus: '',
    orderReceiveDate: '',
    orderReceiveCost: '',
    certRlsDate: '',
    preReleaseDate: '',
    agentCode: '',
    agentName: '',
    noteS: '',
    ownerCode: '',
    ownerName: '',
    examDate: '',
    checkDate: '',
    compEleDate: '',
    releaseDate: '',
    cuCost: '',
    totalCost: '',
    beforeDeclCost: '',
    profVerifyFlag: '',
    newTwoStepFlag: '',
    eleDeclDate: '',
    assessStartDate: '',
    assessEndDate: '',
    refundDate: '',
    refundFlag: '',
    manCreateTime: '',
    manChkTimeStart: '',
    manChkTimeEnd: '',
    checkCustomsCode: '',
    checkFlag: '',
    manProcResult: '',
    manProcIdea: '',
  } as EntryHead
  dialogFormRef.value?.resetFields()
}

// 刷新方法
function onRefresh() {
  onReset()
}

// 新增
function onCreate() {
  resetForm()
  state.dialogVisible = true
  state.isEdit = true
  state.title = '新增危险品报关单头'
}

// 查看
function onView(row: EntryHead) {
  state.viewForm = { ...row }
  state.viewDialogVisible = true
  state.viewTitle = '查看危险品报关单头详情'
}

// 编辑
async function onEdit(row: EntryHead) {
  const res = await getDetail(row.entryId)
  if (res.code === SuccessResultCode) {
    state.formData = res.data
    state.dialogVisible = true
    state.isEdit = true
    state.title = '修改危险品报关单头'
  } else {
    ElMessage.error(res.message || '数据获取异常')
  }
}

// 删除
async function onDelete(row: EntryHead) {
  const deleteIds = row.entryId || ids.value
  if (!deleteIds || deleteIds.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  try {
    await ElMessageBox.confirm('确定要删除选中的危险品报关单头吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const res = await remove(deleteIds)
    if (res.code === SuccessResultCode) {
      ElMessage.success('删除成功')
      onPageChange(1)
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch{
    // 用户取消删除
  }
}


// 新增/修改提交
async function onSubmit() {
  if (!dialogFormRef.value) return

  const isValid = await dialogFormRef.value.validate()
  if (!isValid) return

  try {


    let res: Result<any>
    if (state.formData.entryId) {
      res = await update(state.formData)
    } else {
      res = await insert(state.formData)
    }

    if (res.code === SuccessResultCode) {
      ElMessage.success(state.formData.entryId ? '修改成功' : '新增成功')
      state.dialogVisible = false
      onPageChange(1)
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('操作失败')
  }
}

// 数据查询
async function onLoadData() {
  setLoading(true)
  try {
    const query = {
      ...state.queryData,
      pageIndex: tablePagination.currentPage,
      pageSize: tablePagination.pageSize
    }
    const res = await getList(query)
    if (res.code === SuccessResultCode) {
      setPagination(res.data)
    } else {
      ElMessage.error(res.message || '查询失败')
    }
  } catch (error) {
    console.error('查询失败:', error)
    ElMessage.error('查询失败')
  } finally {
    setLoading(false)
  }
}


// 组件挂载时加载数据
onMounted(() => {
  onLoadData()
})
</script>

<style scoped>
/* 自定义样式 */
</style>
