<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标的物名称" prop="subjectName">
        <el-input
          v-model="queryParams.subjectName"
          placeholder="请输入标的物名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请人" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入申请人"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请日期">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ccdi:purchaseTransaction:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['ccdi:purchaseTransaction:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['ccdi:purchaseTransaction:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="transactionList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="采购事项ID" align="center" prop="purchaseId" width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="采购类别" align="center" prop="purchaseCategory" width="100"/>
      <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
      <el-table-column label="标的物名称" align="center" prop="subjectName" :show-overflow-tooltip="true"/>
      <el-table-column label="采购方式" align="center" prop="purchaseMethod" width="120"/>
      <el-table-column label="供应商名称" align="center" prop="supplierName" :show-overflow-tooltip="true"/>
      <el-table-column label="预算金额(元)" align="center" prop="budgetAmount" width="120">
        <template slot-scope="scope">
          {{ formatAmount(scope.row.budgetAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="applicantName" width="100"/>
      <el-table-column label="申请部门" align="center" prop="applyDepartment" width="120"/>
      <el-table-column label="申请日期" align="center" prop="applyDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['ccdi:purchaseTransaction:query']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ccdi:purchaseTransaction:edit']"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ccdi:purchaseTransaction:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="采购事项ID" prop="purchaseId">
              <el-input v-model="form.purchaseId" placeholder="请输入采购事项ID" maxlength="32" :disabled="!isAdd" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购类别" prop="purchaseCategory">
              <el-input v-model="form.purchaseCategory" placeholder="请输入采购类别" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" maxlength="200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标的物名称" prop="subjectName">
              <el-input v-model="form.subjectName" placeholder="请输入标的物名称" maxlength="200" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="标的物描述" prop="subjectDesc">
          <el-input v-model="form.subjectDesc" type="textarea" :rows="2" placeholder="请输入标的物描述" />
        </el-form-item>

        <el-divider content-position="left">数量与金额</el-divider>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="采购数量" prop="purchaseQty">
              <el-input-number v-model="form.purchaseQty" :min="0" :precision="2" placeholder="请输入采购数量" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预算金额(元)" prop="budgetAmount">
              <el-input-number v-model="form.budgetAmount" :min="0" :precision="2" placeholder="请输入预算金额" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中标金额(元)" prop="bidAmount">
              <el-input-number v-model="form.bidAmount" :min="0" :precision="2" placeholder="请输入中标金额" style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="实际采购金额(元)" prop="actualAmount">
              <el-input-number v-model="form.actualAmount" :min="0" :precision="2" placeholder="请输入实际采购金额" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同金额(元)" prop="contractAmount">
              <el-input-number v-model="form.contractAmount" :min="0" :precision="2" placeholder="请输入合同金额" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算金额(元)" prop="settlementAmount">
              <el-input-number v-model="form.settlementAmount" :min="0" :precision="2" placeholder="请输入结算金额" style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="采购方式" prop="purchaseMethod">
              <el-input v-model="form.purchaseMethod" placeholder="请输入采购方式" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">供应商信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="中标供应商名称" prop="supplierName">
              <el-input v-model="form.supplierName" placeholder="请输入供应商名称" maxlength="200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商统一信用代码" prop="supplierUscc">
              <el-input v-model="form.supplierUscc" placeholder="请输入统一信用代码" maxlength="18" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="供应商联系人" prop="contactPerson">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商联系电话" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="供应商银行账户" prop="supplierBankAccount">
              <el-input v-model="form.supplierBankAccount" placeholder="请输入银行账户" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">重要日期</el-divider>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="采购申请日期" prop="applyDate">
              <el-date-picker
                v-model="form.applyDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划批准日期" prop="planApproveDate">
              <el-date-picker
                v-model="form.planApproveDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公告发布日期" prop="announceDate">
              <el-date-picker
                v-model="form.announceDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="开标日期" prop="bidOpenDate">
              <el-date-picker
                v-model="form.bidOpenDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同签订日期" prop="contractSignDate">
              <el-date-picker
                v-model="form.contractSignDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计交货日期" prop="expectedDeliveryDate">
              <el-date-picker
                v-model="form.expectedDeliveryDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="实际交货日期" prop="actualDeliveryDate">
              <el-date-picker
                v-model="form.actualDeliveryDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="验收日期" prop="acceptanceDate">
              <el-date-picker
                v-model="form.acceptanceDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算日期" prop="settlementDate">
              <el-date-picker
                v-model="form.settlementDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">申请人信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="申请人姓名" prop="applicantName">
              <el-input v-model="form.applicantName" placeholder="请输入申请人姓名" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人工号" prop="applicantId">
              <el-input v-model="form.applicantId" placeholder="请输入申请人工号" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="申请部门" prop="applyDepartment">
              <el-input v-model="form.applyDepartment" placeholder="请输入申请部门" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">采购负责人信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="采购负责人姓名" prop="purchaseLeaderName">
              <el-input v-model="form.purchaseLeaderName" placeholder="请输入采购负责人姓名" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购负责人工号" prop="purchaseLeaderId">
              <el-input v-model="form.purchaseLeaderId" placeholder="请输入采购负责人工号" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="采购部门" prop="purchaseDepartment">
              <el-input v-model="form.purchaseDepartment" placeholder="请输入采购部门" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="采购交易详情" :visible.sync="detailOpen" width="1000px" append-to-body>
      <div class="detail-container">
        <el-divider content-position="left">基本信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="采购事项ID">{{ transactionDetail.purchaseId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采购类别">{{ transactionDetail.purchaseCategory || '-' }}</el-descriptions-item>
          <el-descriptions-item label="项目名称" :span="2">{{ transactionDetail.projectName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="标的物名称">{{ transactionDetail.subjectName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采购方式">{{ transactionDetail.purchaseMethod || '-' }}</el-descriptions-item>
          <el-descriptions-item label="标的物描述" :span="2">{{ transactionDetail.subjectDesc || '-' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">数量与金额</el-divider>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="采购数量">{{ transactionDetail.purchaseQty || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预算金额(元)">{{ formatAmount(transactionDetail.budgetAmount) }}</el-descriptions-item>
          <el-descriptions-item label="中标金额(元)">{{ formatAmount(transactionDetail.bidAmount) }}</el-descriptions-item>
          <el-descriptions-item label="实际采购金额(元)">{{ formatAmount(transactionDetail.actualAmount) }}</el-descriptions-item>
          <el-descriptions-item label="合同金额(元)">{{ formatAmount(transactionDetail.contractAmount) }}</el-descriptions-item>
          <el-descriptions-item label="结算金额(元)">{{ formatAmount(transactionDetail.settlementAmount) }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">供应商信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="中标供应商名称">{{ transactionDetail.supplierName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="统一信用代码">{{ transactionDetail.supplierUscc || '-' }}</el-descriptions-item>
          <el-descriptions-item label="供应商联系人">{{ transactionDetail.contactPerson || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ transactionDetail.contactPhone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="供应商银行账户" :span="2">{{ transactionDetail.supplierBankAccount || '-' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">重要日期</el-divider>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="采购申请日期">{{ transactionDetail.applyDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="计划批准日期">{{ transactionDetail.planApproveDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="公告发布日期">{{ transactionDetail.announceDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="开标日期">{{ transactionDetail.bidOpenDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="合同签订日期">{{ transactionDetail.contractSignDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预计交货日期">{{ transactionDetail.expectedDeliveryDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="实际交货日期">{{ transactionDetail.actualDeliveryDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="验收日期">{{ transactionDetail.acceptanceDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="结算日期">{{ transactionDetail.settlementDate || '-' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">申请人信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请人姓名">{{ transactionDetail.applicantName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="申请人工号">{{ transactionDetail.applicantId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="申请部门">{{ transactionDetail.applyDepartment || '-' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">采购负责人信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="采购负责人姓名">{{ transactionDetail.purchaseLeaderName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采购负责人工号">{{ transactionDetail.purchaseLeaderId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采购部门">{{ transactionDetail.purchaseDepartment || '-' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">审计信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">
            {{ transactionDetail.createTime ? parseTime(transactionDetail.createTime) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">{{ transactionDetail.createdBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ transactionDetail.updateTime ? parseTime(transactionDetail.updateTime) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新人">{{ transactionDetail.updatedBy || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false" icon="el-icon-close">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
      @close="handleImportDialogClose"
      v-loading="upload.isUploading"
      element-loading-text="正在导入数据,请稍候..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.7)"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的采购交易数据
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" slot="tip">
          <span>仅允许导入"xls"或"xlsx"格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm" :loading="upload.isUploading">确 定</el-button>
        <el-button @click="upload.open = false" :disabled="upload.isUploading">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入结果对话框 -->
    <import-result-dialog
      :visible.sync="importResultVisible"
      :content="importResultContent"
      title="导入结果"
      @close="handleImportResultClose"
    />
  </div>
</template>

<script>
import {
  addTransaction,
  delTransaction,
  getImportFailures,
  getImportStatus,
  getTransaction,
  listTransaction,
  updateTransaction
} from "@/api/ccdiPurchaseTransaction";
import {getToken} from "@/utils/auth";
import ImportResultDialog from "@/components/ImportResultDialog.vue";

export default {
  name: "PurchaseTransaction",
  components: { ImportResultDialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购交易表格数据
      transactionList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      detailOpen: false,
      // 采购交易详情
      transactionDetail: {},
      // 是否为新增操作
      isAdd: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: null,
        subjectName: null,
        applicantName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        purchaseId: [
          { required: true, message: "采购事项ID不能为空", trigger: "blur" },
          { max: 32, message: "采购事项ID长度不能超过32个字符", trigger: "blur" }
        ],
        purchaseCategory: [
          { required: true, message: "采购类别不能为空", trigger: "blur" },
          { max: 50, message: "采购类别长度不能超过50个字符", trigger: "blur" }
        ],
        projectName: [
          { max: 200, message: "项目名称长度不能超过200个字符", trigger: "blur" }
        ],
        subjectName: [
          { required: true, message: "标的物名称不能为空", trigger: "blur" },
          { max: 200, message: "标的物名称长度不能超过200个字符", trigger: "blur" }
        ],
        subjectDesc: [
          { max: 500, message: "标的物描述长度不能超过500个字符", trigger: "blur" }
        ],
        purchaseQty: [
          { required: true, message: "采购数量不能为空", trigger: "blur" },
          { type: 'number', min: 0.0001, message: "采购数量必须大于0", trigger: "blur" }
        ],
        budgetAmount: [
          { required: true, message: "预算金额不能为空", trigger: "blur" },
          { type: 'number', min: 0.01, message: "预算金额必须大于0", trigger: "blur" }
        ],
        bidAmount: [
          { type: 'number', min: 0.01, message: "中标金额必须大于0", trigger: "blur" }
        ],
        actualAmount: [
          { type: 'number', min: 0.01, message: "实际采购金额必须大于0", trigger: "blur" }
        ],
        contractAmount: [
          { type: 'number', min: 0.01, message: "合同金额必须大于0", trigger: "blur" }
        ],
        settlementAmount: [
          { type: 'number', min: 0.01, message: "结算金额必须大于0", trigger: "blur" }
        ],
        purchaseMethod: [
          { required: true, message: "采购方式不能为空", trigger: "blur" },
          { max: 50, message: "采购方式长度不能超过50个字符", trigger: "blur" }
        ],
        supplierName: [
          { max: 200, message: "供应商名称长度不能超过200个字符", trigger: "blur" }
        ],
        supplierUscc: [
          { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: "请输入正确的18位统一信用代码", trigger: "blur" }
        ],
        contactPerson: [
          { max: 50, message: "联系人长度不能超过50个字符", trigger: "blur" }
        ],
        contactPhone: [
          { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: "请输入正确的联系电话（手机号或座机号）", trigger: "blur" }
        ],
        supplierBankAccount: [
          { max: 50, message: "银行账户长度不能超过50个字符", trigger: "blur" }
        ],
        applyDate: [
          { required: true, message: "采购申请日期不能为空", trigger: "change" }
        ],
        applicantName: [
          { required: true, message: "申请人姓名不能为空", trigger: "blur" },
          { max: 50, message: "申请人姓名长度不能超过50个字符", trigger: "blur" }
        ],
        applicantId: [
          { required: true, message: "申请人工号不能为空", trigger: "blur" },
          { pattern: /^\d{7}$/, message: "申请人工号必须为7位数字", trigger: "blur" }
        ],
        applyDepartment: [
          { required: true, message: "申请部门不能为空", trigger: "blur" },
          { max: 100, message: "申请部门长度不能超过100个字符", trigger: "blur" }
        ],
        purchaseLeaderName: [
          { max: 50, message: "采购负责人姓名长度不能超过50个字符", trigger: "blur" }
        ],
        purchaseLeaderId: [
          { pattern: /^\d{7}$/, message: "采购负责人工号必须为7位数字", trigger: "blur" }
        ],
        purchaseDepartment: [
          { max: 100, message: "采购部门长度不能超过100个字符", trigger: "blur" }
        ]
      },
      // 导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/ccdi/purchaseTransaction/importData"
      },
      // 导入结果弹窗
      importResultVisible: false,
      importResultContent: "",
      // 导入轮询定时器
      importPollingTimer: null,
      // 是否显示查看失败记录按钮
      showFailureButton: false,
      // 当前导入任务ID
      currentTaskId: null,
      // 失败记录对话框
      failureDialogVisible: false,
      failureList: [],
      failureLoading: false,
      failureTotal: 0,
      failureQueryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    /**
     * 上次导入信息摘要
     */
    lastImportInfo() {
      const savedTask = this.getImportTaskFromStorage();
      if (savedTask && savedTask.totalCount) {
        return `导入时间: ${this.parseTime(savedTask.saveTime)} | 总数: ${savedTask.totalCount}条 | 成功: ${savedTask.successCount}条 | 失败: ${savedTask.failureCount}条`;
      }
      return '';
    }
  },
  created() {
    this.getList();
    this.restoreImportState(); // 恢复导入状态
  },
  beforeDestroy() {
    // 清理定时器
    if (this.importPollingTimer) {
      clearInterval(this.importPollingTimer);
      this.importPollingTimer = null;
    }
  },
  methods: {
    /** 查询采购交易列表 */
    getList() {
      this.loading = true;
      const params = this.addDateRange(this.queryParams, this.dateRange, 'applyDate');
      listTransaction(params).then(response => {
        this.transactionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 格式化金额
    formatAmount(amount) {
      if (amount === null || amount === undefined || amount === '') return '-';
      return parseFloat(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        purchaseId: null,
        purchaseCategory: null,
        projectName: null,
        subjectName: null,
        subjectDesc: null,
        purchaseQty: null,
        budgetAmount: null,
        bidAmount: null,
        actualAmount: null,
        contractAmount: null,
        settlementAmount: null,
        purchaseMethod: null,
        supplierName: null,
        supplierUscc: null,
        contactPerson: null,
        contactPhone: null,
        supplierBankAccount: null,
        applyDate: null,
        planApproveDate: null,
        announceDate: null,
        bidOpenDate: null,
        contractSignDate: null,
        expectedDeliveryDate: null,
        actualDeliveryDate: null,
        acceptanceDate: null,
        settlementDate: null,
        applicantId: null,
        applicantName: null,
        applyDepartment: null,
        purchaseLeaderId: null,
        purchaseLeaderName: null,
        purchaseDepartment: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.purchaseId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加采购交易";
      this.isAdd = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const purchaseId = row.purchaseId || this.ids[0];
      getTransaction(purchaseId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改采购交易";
        this.isAdd = false;
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      const purchaseId = row.purchaseId;
      getTransaction(purchaseId).then(response => {
        this.transactionDetail = response.data;
        this.detailOpen = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            addTransaction(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          } else {
            updateTransaction(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const purchaseIds = row.purchaseId || this.ids;
      this.$modal.confirm('是否确认删除采购事项ID为"' + purchaseIds + '"的数据项？').then(function() {
        return delTransaction(purchaseIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ccdi/purchaseTransaction/export', {
        ...this.queryParams
      }, `采购交易_${new Date().getTime()}.xlsx`);
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "采购交易数据导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('ccdi/purchaseTransaction/importTemplate', {}, `采购交易导入模板_${new Date().getTime()}.xlsx`);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理 - 使用异步导入
    handleFileSuccess(response, file, fileList) {
      // 检查是否返回了taskId（异步导入）
      if (response.code === 200 && response.data && response.data.taskId) {
        const taskId = response.data.taskId;
        this.upload.isUploading = false;
        this.upload.open = false;
        this.$refs.upload.clearFiles();

        // 开始轮询导入状态
        this.startImportPolling(taskId);
      } else {
        // 同步导入结果（如果后端改为同步）
        this.upload.isUploading = false;
        this.upload.open = false;
        this.getList();
        this.importResultContent = response.msg || response;
        this.importResultVisible = true;
        this.$refs.upload.clearFiles();
      }
    },
    // 开始轮询导入状态
    startImportPolling(taskId) {
      const message = this.$message({
        message: '正在导入数据，请稍候...',
        type: 'info',
        duration: 0,
        showClose: false
      });

      // 立即查询一次
      this.checkImportStatus(taskId, message);

      // 每2秒轮询一次
      this.importPollingTimer = setInterval(() => {
        this.checkImportStatus(taskId, message);
      }, 2000);
    },
    // 检查导入状态
    checkImportStatus(taskId, message) {
      getImportStatus(taskId).then(response => {
        const status = response.data;

        if (status.status === 'completed') {
          // 导入完成，停止轮询
          clearInterval(this.importPollingTimer);
          this.importPollingTimer = null;
          message.close();

          // 显示导入结果
          this.showImportResult(taskId, status);
        } else if (status.status === 'failed') {
          // 导入失败，停止轮询
          clearInterval(this.importPollingTimer);
          this.importPollingTimer = null;
          message.close();

          this.$modal.msgError('导入失败: ' + (status.errorMsg || '未知错误'));
          this.getList();
        }
        // 如果还在进行中，继续轮询
      }).catch(error => {
        clearInterval(this.importPollingTimer);
        this.importPollingTimer = null;
        message.close();
        this.$modal.msgError('查询导入状态失败');
      });
    },
    // 显示导入结果
    showImportResult(taskId, status) {
      let resultHtml = '<div style="padding: 10px;">';
      resultHtml += '<p><strong>导入完成！</strong></p>';
      resultHtml += `<p>成功: ${status.successCount} 条</p>`;
      resultHtml += `<p>失败: ${status.failureCount} 条</p>`;

      // 如果有失败记录，获取失败详情
      if (status.failureCount > 0) {
        resultHtml += '<p style="color: #F56C6C; margin-top: 10px;"><strong>失败记录:</strong></p>';
        resultHtml += '<div style="max-height: 300px; overflow-y: auto; border: 1px solid #EBEEF5; padding: 10px; background-color: #F5F7FA;">';

        // 获取失败记录详情
        getImportFailures(taskId, 1, 100).then(response => {
          const failures = response.rows || [];
          failures.forEach((failure, index) => {
            resultHtml += `<div style="margin-bottom: 10px; padding: 8px; background-color: white; border-left: 3px solid #F56C6C;">
              <p style="margin: 5px 0;"><strong>第 ${failure.rowNum} 行:</strong></p>
              <p style="margin: 5px 0; color: #606266;">${failure.errorMessage || failure.errorMsg || '未知错误'}</p>
            </div>`;
          });

          resultHtml += '</div></div>';
          this.importResultContent = resultHtml;
          this.importResultVisible = true;
        }).catch(() => {
          resultHtml += '<p style="color: #909399;">获取失败记录详情失败</p>';
          resultHtml += '</div></div>';
          this.importResultContent = resultHtml;
          this.importResultVisible = true;
        });
      } else {
        resultHtml += '</div>';
        this.importResultContent = resultHtml;
        this.importResultVisible = true;
      }

      // 刷新列表
      this.getList();
    },
    // 导入结果弹窗关闭
    handleImportResultClose() {
      this.importResultVisible = false;
      this.importResultContent = "";
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 关闭导入对话框
    handleImportDialogClose() {
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
    },
    /**
     * 保存导入任务到localStorage
     * @param {Object} taskData - 任务数据
     */
    saveImportTaskToStorage(taskData) {
      try {
        const data = {
          ...taskData,
          saveTime: Date.now()
        };
        localStorage.setItem('purchase_transaction_import_last_task', JSON.stringify(data));
      } catch (error) {
        console.error('保存导入任务状态失败:', error);
      }
    },
    /**
     * 从localStorage读取导入任务
     * @returns {Object|null} 任务数据或null
     */
    getImportTaskFromStorage() {
      try {
        const data = localStorage.getItem('purchase_transaction_import_last_task');
        if (!data) return null;

        const task = JSON.parse(data);

        // 数据格式校验
        if (!task || !task.taskId) {
          this.clearImportTaskFromStorage();
          return null;
        }

        // 时间戳校验
        if (task.saveTime && typeof task.saveTime !== 'number') {
          this.clearImportTaskFromStorage();
          return null;
        }

        // 过期检查(7天)
        const sevenDays = 7 * 24 * 60 * 60 * 1000;
        if (Date.now() - task.saveTime > sevenDays) {
          this.clearImportTaskFromStorage();
          return null;
        }

        return task;
      } catch (error) {
        console.error('读取导入任务状态失败:', error);
        this.clearImportTaskFromStorage();
        return null;
      }
    },
    /**
     * 清除localStorage中的导入任务
     */
    clearImportTaskFromStorage() {
      try {
        localStorage.removeItem('purchase_transaction_import_last_task');
      } catch (error) {
        console.error('清除导入任务状态失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.detail-container {
  padding: 0 20px;
}

.el-divider {
  margin: 16px 0;
}
</style>
