<template>
  <el-tabs v-model="activeName" style="margin-top: 8px">
    <el-tab-pane label="图谱1" name="1">
      <treeNodeg6 ref="treeGraph" :mockData="mockData" />
    </el-tab-pane>
    <el-tab-pane label="表格" name="2">
      <el-table
        v-loading="loading"
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%"
      >

        <el-table-column label="代码编号" align="center" prop="cdNo" />
        <el-table-column label="代码名称" align="center" prop="cdValCnMean" />
        <el-table-column label="引用标准编号" align="center" prop="stdNum" />
        <el-table-column label="引用标准英文名" align="center" prop="dataStdNo" />
        <el-table-column label="引用标准中文名" align="center" prop="stdName" />
        <el-table-column label="引用字典编号" align="center" prop="dataDictNo" />
        <el-table-column label="引用字典英文名" align="center" prop="dataDictEngName" />
        <el-table-column label="引用字典中文名" align="center" prop="dataDictCnName" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { getStdCodeMap } from "@/api/datastd/std";
import treeNodeg6 from "./treeNodeg6.vue";

const activeName = ref("1"); // 默认打开图谱

const treeGraph = ref(null);
const tableData = ref([]);
const selections = ref([]);
const loading = ref(false);
const props = defineProps({
  rowData: {
    type: Object,
    required: false
  }

});
// mocked data
const mockData = ref({
  id: "g1",
  name: props.rowData.cdValCnMean,
  count: 123456,
  label: props.rowData.cdNo,
  rate: 1.0,
  status: "G",
  variableValue: "代码",
  variableUp: true,
  children:[]
  // children: [
  //   {
  //     id: "g12",
  //     name: "发行机构类型",
  //     count: 123456,
  //     label: "iss_ins_type",
  //     rate: 1.0,
  //     status: "R",
  //     currency: "xx001",
  //     variableValue: "标准",
  //     variableUp: true,
  //     children: [
  //       {
  //         id: "g121",
  //         name: "发行机构类型",
  //         collapsed: true,
  //         count: 123456,
  //         label: "iss_ins_type",
  //         rate: 1.0,
  //         status: "B",
  //         currency: "xx002",
  //         variableValue: "词典",
  //         variableUp: true,
  //       },
  //     ],
  //   },
  //   {
  //     id: "g13",
  //     name: "发行人编号",
  //     label: "issr_no",
  //     rate: 1,
  //     status: "R",
  //     currency: "xx002",
  //     variableValue: "标准",
  //     variableUp: true,
  //   },
  // ],
});

// 获取数据列表
const getList = async () => {
  loading.value = true;
  try {
    const response = await listStdCodemap();
    tableData.value = response.rows || [];
  } finally {
    loading.value = false;
  }
};

const handleSelectionChange = (selection) => {
  selections.value = selection;
};

// 默认加载图谱
onMounted(() => {
  nextTick(() => {

    getStdCodeMap(props.rowData.id).then(response => {
    mockData.value.children = response.data.children;
    tableData.value = response.data.tableData;
    if (treeGraph.value) {
      treeGraph.value.refreshGraph();
    }
  });

  });
});
</script>

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

.query-form-container {
  margin-bottom: 20px;
}

.el-table .el-input {
  width: 100%;
}

.form-container {
  margin-bottom: 20px;
}

.info-text {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  font-weight: 500;
  display: inline-block;
  width: 100%;
}
</style>
