<template>
  <section class="extended-query-card">
    <div class="extended-query-header">
      <div class="extended-query-title">拓展查询</div>
      <div class="extended-query-subtitle">在专项核查同范围员工内联查采购、招聘和调动记录</div>
    </div>

    <el-tabs v-model="activeTab" class="extended-query-tabs" @tab-click="handleTabChange">
      <el-tab-pane label="采购记录" name="purchase">
        <el-form :model="tabState.purchase.query" size="small" :inline="true" label-width="96px">
          <el-form-item label="申请人姓名">
            <el-input
              v-model="tabState.purchase.query.applicantName"
              placeholder="请输入申请人姓名"
              clearable
              style="width: 220px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="申请日期范围">
            <el-date-picker
              v-model="tabState.purchase.query.applyDateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 260px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="招聘记录" name="recruitment">
        <el-form :model="tabState.recruitment.query" size="small" :inline="true" label-width="96px">
          <el-form-item label="面试官姓名">
            <el-input
              v-model="tabState.recruitment.query.interviewerName"
              placeholder="请输入面试官姓名"
              clearable
              style="width: 220px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="调动记录" name="transfer">
        <el-form :model="tabState.transfer.query" size="small" :inline="true" label-width="96px">
          <el-form-item label="员工姓名">
            <el-input
              v-model="tabState.transfer.query.staffName"
              placeholder="请输入员工姓名"
              clearable
              style="width: 220px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="调动日期范围">
            <el-date-picker
              v-model="tabState.transfer.query.transferDateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 260px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <div class="extended-query-table">
        <el-table v-loading="currentState.loading" :data="currentState.rows" border>
          <template v-if="activeTab === 'purchase'">
            <el-table-column label="采购事项ID" prop="purchaseId" min-width="150" />
            <el-table-column label="项目名称" prop="projectName" min-width="160" />
            <el-table-column label="标的物名称" prop="subjectName" min-width="160" />
            <el-table-column label="申请人姓名" prop="applicantName" width="120" />
            <el-table-column label="申请日期" prop="applyDate" width="140" />
          </template>

          <template v-else-if="activeTab === 'recruitment'">
            <el-table-column label="招聘项目编号" prop="recruitId" min-width="150" />
            <el-table-column label="招聘项目名称" prop="recruitName" min-width="180" />
            <el-table-column label="职位名称" prop="posName" min-width="140" />
            <el-table-column label="面试官姓名摘要" prop="interviewerNameSummary" min-width="180" />
            <el-table-column label="录用情况" prop="admitStatus" width="120" />
          </template>

          <template v-else>
            <el-table-column label="员工姓名" prop="staffName" min-width="140" />
            <el-table-column label="调动类型" prop="transferType" min-width="120" />
            <el-table-column label="调动前部门" prop="deptNameBefore" min-width="160" />
            <el-table-column label="调动后部门" prop="deptNameAfter" min-width="160" />
            <el-table-column label="调动日期" prop="transferDate" width="140" />
          </template>
        </el-table>

        <pagination
          v-show="currentState.total > 0"
          :total="currentState.total"
          :page.sync="currentState.query.pageNum"
          :limit.sync="currentState.query.pageSize"
          @pagination="handlePagination"
        />
      </div>
    </el-tabs>
  </section>
</template>

<script>
import {
  getExtendedPurchaseList,
  getExtendedRecruitmentList,
  getExtendedTransferList,
} from "@/api/ccdi/projectSpecialCheck";

const LIST_API_MAP = {
  purchase: getExtendedPurchaseList,
  recruitment: getExtendedRecruitmentList,
  transfer: getExtendedTransferList,
};

export default {
  name: "ExtendedQuerySection",
  props: {
    projectId: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      activeTab: "purchase",
      tabState: this.createInitialStates(),
    };
  },
  computed: {
    currentState() {
      return this.tabState[this.activeTab];
    },
  },
  watch: {
    projectId() {
      this.resetAllStates();
      if (this.projectId) {
        this.loadList(this.activeTab);
      }
    },
  },
  created() {
    if (this.projectId) {
      this.loadList(this.activeTab);
    }
  },
  methods: {
    createInitialStates() {
      return {
        purchase: this.createTabState("purchase"),
        recruitment: this.createTabState("recruitment"),
        transfer: this.createTabState("transfer"),
      };
    },
    createTabState(tabName) {
      return {
        query: this.createDefaultQuery(tabName),
        rows: [],
        total: 0,
        loading: false,
        loaded: false,
        detailVisible: false,
        detailLoading: false,
        detailData: null,
      };
    },
    createDefaultQuery(tabName) {
      if (tabName === "purchase") {
        return {
          applicantName: "",
          applyDateRange: [],
          pageNum: 1,
          pageSize: 10,
        };
      }
      if (tabName === "recruitment") {
        return {
          interviewerName: "",
          pageNum: 1,
          pageSize: 10,
        };
      }
      return {
        staffName: "",
        transferDateRange: [],
        pageNum: 1,
        pageSize: 10,
      };
    },
    handleTabChange(tab) {
      const tabName = tab.name || tab;
      this.activeTab = tabName;
      const state = this.tabState[tabName];
      if (!state.loaded) {
        this.loadList(tabName);
      }
    },
    handleQuery() {
      const state = this.currentState;
      state.query.pageNum = 1;
      this.loadList(this.activeTab);
    },
    resetQuery() {
      const state = this.currentState;
      state.query = this.createDefaultQuery(this.activeTab);
      this.loadList(this.activeTab);
    },
    handlePagination() {
      this.loadList(this.activeTab);
    },
    resetAllStates() {
      this.tabState = this.createInitialStates();
    },
    buildListParams(tabName) {
      const query = this.tabState[tabName].query;
      if (tabName === "purchase") {
        const [applyDateStart, applyDateEnd] = query.applyDateRange || [];
        return {
          projectId: this.projectId,
          applicantName: query.applicantName,
          applyDateStart,
          applyDateEnd,
          pageNum: query.pageNum,
          pageSize: query.pageSize,
        };
      }
      if (tabName === "recruitment") {
        return {
          projectId: this.projectId,
          interviewerName: query.interviewerName,
          pageNum: query.pageNum,
          pageSize: query.pageSize,
        };
      }
      const [transferDateStart, transferDateEnd] = query.transferDateRange || [];
      return {
        projectId: this.projectId,
        staffName: query.staffName,
        transferDateStart,
        transferDateEnd,
        pageNum: query.pageNum,
        pageSize: query.pageSize,
      };
    },
    async loadList(tabName) {
      if (!this.projectId) {
        return;
      }

      const state = this.tabState[tabName];
      state.loading = true;
      try {
        const request = LIST_API_MAP[tabName];
        const response = await request(this.buildListParams(tabName));
        const data = (response && response.data) || {};
        state.rows = Array.isArray(data.rows) ? data.rows : [];
        state.total = Number(data.total || 0);
        state.loaded = true;
      } catch (error) {
        state.rows = [];
        state.total = 0;
        this.$message.error("拓展查询加载失败");
      } finally {
        state.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.extended-query-card {
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.extended-query-header {
  margin-bottom: 16px;
}

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

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

.extended-query-table {
  margin-top: 12px;
}
</style>
