<template>
  <div class="special-check-container">
    <div v-if="pageState === 'loading'" class="special-check-state">
      <div class="state-card">
        <el-skeleton animated :rows="6" />
      </div>
    </div>

    <div v-else-if="pageState === 'empty'" class="special-check-state">
      <div class="state-card">
        <el-empty description="暂无员工家庭资产负债核查数据" />
      </div>
    </div>

    <div v-else class="special-check-page">
      <family-asset-liability-section
        :rows="currentData.rows"
        :loading="false"
        :project-id="projectId"
        :title="sectionTitle"
        :subtitle="sectionSubtitle"
        @evidence-confirm="$emit('evidence-confirm', $event)"
      />

      <fund-graph-section ref="fundGraphSection" />
    </div>

    <div v-if="projectId" class="special-check-extended-wrapper">
      <extended-query-section :project-id="projectId" />
    </div>
  </div>
</template>

<script>
import { createSpecialCheckLoadedData, specialCheckStateData } from "./specialCheck.mock";
import { getFamilyAssetLiabilityList } from "@/api/ccdi/projectSpecialCheck";
import ExtendedQuerySection from "./ExtendedQuerySection";
import FamilyAssetLiabilitySection from "./FamilyAssetLiabilitySection";
import FundGraphSection from "./graph/FundGraphSection";

export default {
  name: "SpecialCheck",
  components: {
    ExtendedQuerySection,
    FamilyAssetLiabilitySection,
    FundGraphSection,
  },
  props: {
    projectId: {
      type: [String, Number],
      default: null,
    },
    projectInfo: {
      type: Object,
      default: () => ({
        projectName: "",
        updateTime: "",
        projectStatus: "0",
      }),
    },
  },
  data() {
    return {
      pageState: "loading",
      realData: specialCheckStateData.loading,
      sectionTitle: "员工家庭资产负债专项核查",
      sectionSubtitle: "按项目员工范围聚合本人及配偶的收入、资产与负债情况",
    };
  },
  computed: {
    currentData() {
      if (this.pageState === "loaded") {
        return this.realData;
      }
      return specialCheckStateData[this.pageState] || this.realData;
    },
  },
  watch: {
    projectId(newVal) {
      if (newVal) {
        this.loadSpecialCheckData();
        return;
      }
      this.realData = specialCheckStateData.empty;
      this.pageState = "empty";
    },
  },
  created() {
    if (this.projectId) {
      this.loadSpecialCheckData();
      return;
    }
    this.realData = specialCheckStateData.empty;
    this.pageState = "empty";
  },
  methods: {
    async loadSpecialCheckData() {
      if (!this.projectId) {
        this.realData = specialCheckStateData.empty;
        this.pageState = "empty";
        return;
      }

      this.pageState = "loading";
      try {
        const response = await getFamilyAssetLiabilityList(this.projectId);
        const listData = (response && response.data) || {};
        this.realData = createSpecialCheckLoadedData({
          projectId: this.projectId,
          listData,
        });
        this.pageState = this.realData.rows.length ? "loaded" : "empty";
      } catch (error) {
        this.realData = specialCheckStateData.empty;
        this.pageState = "empty";
        console.error("加载专项核查数据失败", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.special-check-container {
  min-height: 400px;
  padding: 0 0 24px;
}

.special-check-state {
  min-height: 400px;
}

.state-card {
  padding: 32px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ccdi-border);
  box-shadow: var(--ccdi-shadow);
}

.special-check-page {
  min-height: 400px;
}

.special-check-extended-wrapper {
  margin-top: 16px;
}
</style>
