<template>
  <section class="increase-lending-section">
    <div class="section-card">
      <div class="block-header">
        <div>
          <div class="block-title">新增贷款查询</div>
          <div class="block-subtitle">按客户经理柜员号查询经办/管户新增贷款</div>
        </div>
      </div>

      <el-form :model="queryParams" size="small" :inline="true" label-width="104px" class="query-form">
        <el-form-item label="柜员号" label-width="72px">
          <el-input
            v-model="queryParams.staffId"
            placeholder="请输入柜员号"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="员工身份证">
          <el-input
            v-model="queryParams.staffIdCard"
            placeholder="请输入员工身份证"
            clearable
            style="width: 220px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="审核人柜员号">
          <el-input
            v-model="queryParams.approver"
            placeholder="请输入审核人柜员号"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="发放日期">
          <el-date-picker
            v-model="loanDateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
          <el-button size="mini" :disabled="!hasPersonCondition" @click="handleExport">导出</el-button>
          <el-button size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="result-wrapper">
        <el-table
          v-loading="loading"
          :data="rows"
          :empty-text="searched ? '暂无数据' : '请输入条件后点击查询'"
          border
          class="increase-lending-table"
        >
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="staffId" label="柜员号" width="100" />
          <el-table-column prop="staffName" label="员工姓名" min-width="110" />
          <el-table-column prop="staffIdCard" label="员工身份证" min-width="170" />
          <el-table-column prop="deptName" label="部门" min-width="140" />
          <el-table-column prop="contractNo" label="合同编号" min-width="150" />
          <el-table-column prop="borrowerName" label="借款人" min-width="120" />
          <el-table-column prop="loanProduct" label="贷款产品" min-width="140" />
          <el-table-column label="合同金额" min-width="120" align="right">
            <template slot-scope="scope">{{ formatAmount(scope.row.contractAmount) }}</template>
          </el-table-column>
          <el-table-column label="当前余额" min-width="120" align="right">
            <template slot-scope="scope">{{ formatAmount(scope.row.loanBalance) }}</template>
          </el-table-column>
          <el-table-column prop="loanStartDate" label="发放日期" width="120" />
          <el-table-column prop="loanEndDate" label="到期日期" width="120" />
          <el-table-column prop="status" label="合同状态" width="110" />
          <el-table-column prop="fiveClassification" label="五级分类" width="110" />
          <el-table-column prop="approver" label="审批人" min-width="110" />
        </el-table>

        <pagination
          v-show="searched && total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="loadList"
        />
      </div>
    </div>
  </section>
</template>

<script>
import { getIncreaseLendingList } from "@/api/ccdi/projectSpecialCheck";

export default {
  name: "IncreaseLendingSection",
  props: {
    projectId: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      searched: false,
      rows: [],
      total: 0,
      queryParams: {
        staffId: "",
        staffIdCard: "",
        approver: "",
        loanStartDate: "",
        loanEndDate: "",
        pageNum: 1,
        pageSize: 10,
      },
      loanDateRange: [],
    };
  },
  watch: {
    projectId() {
      this.resetQuery();
    },
  },
  computed: {
    hasPersonCondition() {
      return Boolean(this.queryParams.staffId || this.queryParams.staffIdCard || this.queryParams.approver);
    },
  },
  methods: {
    handleQuery() {
      if (!this.hasPersonCondition) {
        this.$message.warning("请输入柜员号、员工身份证或审核人柜员号后查询");
        return;
      }
      this.syncLoanDateRange();
      this.searched = true;
      this.queryParams.pageNum = 1;
      this.loadList();
    },
    resetQuery() {
      this.queryParams = {
        staffId: "",
        staffIdCard: "",
        approver: "",
        loanStartDate: "",
        loanEndDate: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.loanDateRange = [];
      this.searched = false;
      this.rows = [];
      this.total = 0;
    },
    handleExport() {
      if (!this.hasPersonCondition) {
        this.$message.warning("请输入柜员号、员工身份证或审核人柜员号后导出");
        return;
      }
      this.syncLoanDateRange();
      this.download(
        "ccdi/project/special-check/increase-lending/export",
        {
          projectId: this.projectId,
          staffId: this.queryParams.staffId,
          staffIdCard: this.queryParams.staffIdCard,
          approver: this.queryParams.approver,
          loanStartDate: this.queryParams.loanStartDate,
          loanEndDate: this.queryParams.loanEndDate,
        },
        `新增贷款查询_${this.queryParams.staffId || this.queryParams.staffIdCard || this.queryParams.approver}_${Date.now()}.xlsx`
      );
    },
    async loadList() {
      this.syncLoanDateRange();
      if (!this.projectId) {
        this.rows = [];
        this.total = 0;
        return;
      }

      this.loading = true;
      try {
        const response = await getIncreaseLendingList({
          projectId: this.projectId,
          ...this.queryParams,
        });
        const data = (response && response.data) || {};
        this.rows = Array.isArray(data.rows) ? data.rows : [];
        this.total = Number(data.total || 0);
      } catch (error) {
        this.rows = [];
        this.total = 0;
        this.$message.error("新增贷款查询失败");
      } finally {
        this.loading = false;
      }
    },
    formatAmount(value) {
      if (value === null || value === undefined || value === "") {
        return "-";
      }
      return Number(value).toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    },
    syncLoanDateRange() {
      const range = Array.isArray(this.loanDateRange) ? this.loanDateRange : [];
      this.queryParams.loanStartDate = range[0] || "";
      this.queryParams.loanEndDate = range[1] || "";
    },
  },
};
</script>

<style lang="scss" scoped>
.increase-lending-section {
  margin-top: 16px;
  margin-bottom: 16px;
}

.section-card {
  padding: 20px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.block-header {
  margin-bottom: 14px;
}

.block-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.block-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.query-form {
  margin-bottom: 8px;
}

.result-wrapper {
  margin-top: 8px;
}

.increase-lending-table {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.increase-lending-table th) {
  background: #f8fafc;
  color: #64748b;
}
</style>
