<template>
  <section class="graph-atlas-card">
    <div class="graph-atlas-header">
      <div>
        <div class="graph-atlas-title">图谱展示</div>
        <div class="graph-atlas-subtitle">输入证件号后查看资金图谱和关系图谱</div>
      </div>
    </div>

    <div class="graph-atlas-query">
      <el-input
        v-model="certNoInput"
        class="graph-atlas-input"
        clearable
        placeholder="请输入证件号"
        size="small"
        @keyup.enter.native="handleQuery"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleQuery"
      >
        查询图谱
      </el-button>
    </div>

    <el-tabs v-model="activeGraphTab" class="graph-atlas-tabs">
      <el-tab-pane
        v-for="item in graphTabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      />
    </el-tabs>

    <div v-if="!certNoHash" class="graph-atlas-empty">
      <el-empty description="请输入证件号后查询图谱" />
    </div>

    <div v-else class="graph-atlas-frame-wrapper">
      <iframe
        :key="`${activeGraphTab}-${certNoHash}`"
        class="graph-atlas-frame"
        :src="currentGraphUrl"
        title="专项排查图谱"
      />
    </div>
  </section>
</template>

<script>
import md5 from "@/utils/md5";

const GRAPH_ATLAS_CONFIG = {
  fund: {
    label: "资金图谱",
    urlTemplate: 'http://64.202.65.112:8082/atlas/refactor/#/home/graph/downloadService?id=ccdi_lanxi_trans&mode=K_EXPAND&type=NORMAL&atlasToken=F4BBA291A285858BAF4526C6EC312388&params={"vId":"idno_node/{hash}"}',
  },
  relationship: {
    label: "关系图谱",
    urlTemplate: 'http://64.202.65.112:8082/atlas/refactor/#/home/graph/downloadService?id=lanxitest&mode=K_EXPAND&type=NORMAL&atlasToken=2C914E5E1FBFBC4AD15163E0AB03B800&params={"vId":"rel_node/{hash}"}',
  },
};

export default {
  name: "GraphAtlasSection",
  data() {
    return {
      certNoInput: "",
      certNoHash: "",
      activeGraphTab: "fund",
      graphTabs: [
        { name: "fund", label: GRAPH_ATLAS_CONFIG.fund.label },
        { name: "relationship", label: GRAPH_ATLAS_CONFIG.relationship.label },
      ],
    };
  },
  computed: {
    currentGraphUrl() {
      if (!this.certNoHash) {
        return "";
      }
      const config = GRAPH_ATLAS_CONFIG[this.activeGraphTab];
      return config.urlTemplate.replace("{hash}", this.certNoHash);
    },
  },
  methods: {
    handleQuery() {
      const certNo = this.normalizeCertNo(this.certNoInput);
      if (!certNo) {
        this.certNoHash = "";
        this.$message.warning("请输入证件号");
        return;
      }
      this.certNoHash = md5(certNo);
    },
    normalizeCertNo(value) {
      const certNo = value === null || value === undefined ? "" : String(value).trim();
      if (certNo.endsWith("x")) {
        return `${certNo.slice(0, -1)}X`;
      }
      return certNo;
    },
  },
};
</script>

<style lang="scss" scoped>
.graph-atlas-card {
  margin-top: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ccdi-border);
  border-radius: 14px;
  box-shadow: var(--ccdi-shadow);
}

.graph-atlas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.graph-atlas-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ccdi-text-primary);
}

.graph-atlas-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ccdi-text-muted);
}

.graph-atlas-query {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.graph-atlas-input {
  width: 320px;
}

.graph-atlas-tabs {
  margin-top: 16px;
}

.graph-atlas-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  border: 1px dashed #d9e3ee;
  background: #f8fbfe;
}

.graph-atlas-frame-wrapper {
  overflow: hidden;
  border: 1px solid #d9e3ee;
  background: #fff;
}

.graph-atlas-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 280px);
  min-height: 560px;
  max-height: 760px;
  border: 0;
}

@media (max-width: 768px) {
  .graph-atlas-query {
    align-items: stretch;
    flex-direction: column;
  }

  .graph-atlas-input {
    width: 100%;
  }

  .graph-atlas-frame {
    min-height: 480px;
  }
}
</style>
