<template>
  <div class="background">
    <p class="company-name" @click="">企业列表</p>
    <div v-if="jsonData">
      <div v-for="(item, index) in jsonData.root.kczy.row" :key="index">
        <!-- 使用 router-link 来实现路由导航 -->
        <router-link :to="{ name: 'corporateInfo', query: { id: item.ID } }" class="router-link">
          <p style="font-size: 18px;">{{ item.FIELD0001 }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { fetchToken } from '../utils/getToken';
import x2js from 'x2js';

 // 使用首字母小写的 x2js
const x2jsInstance = new x2js();

// 用于存储获取的数据
const token = ref('');
const data = ref('');
const jsonData = ref(null);

// 在组件加载时调用 fetchToken 函数
fetchToken().then((response) => {
  if (response) {
    token.value = response;
    // 获取 token 后调用 fetchData 函数
    fetchData(response);
  }
});

// 加入 token 获取数据
const fetchData = async (token) => {
  try {
    const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
    data.value = response.data;
    // 将XML数据转换为JSON数据，传递的是 data.value 
    jsonData.value = x2jsInstance.xml2js(data.value);
    // console.log(jsonData.value);
  } catch (error) {
    console.error(error);
  }
};
</script>

<style scoped>
.background {
  background-image: url("../assets/img/index3.png");
  background-size: 100% 100%;
  background-position: center;
  height: 100vh; /* 设置高度为视口高度 */
  /* 其他样式属性 */
}
* {
  margin: 0;
  padding: 0;
}
.company-name {
  color: blue;
  font-size: 24px;
  text-align: center;
  /* 设置文本内容距离顶部的距离为 50 像素 */
  padding-top: 110px; 
  font-weight: bold;
}
.router-link {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的颜色，这里是指定的字体颜色 */
}

.router-link:hover {
  color: inherit; /* 继承父元素的颜色，鼠标悬停时颜色不变 */
}
</style>
