<template>
  <div id="app">
    <!-- 标题 -->
    <div class="header">
      <h1>Intern Selection</h1>
    </div>

    <!-- 关键指标 -->
    <section class="key-notes">
      <h2>Key Notes</h2>
      <div class="score-item" v-for="(item, index) in scores" :key="index">
        <div class="score-title">
          <span>{{ item.name }}</span>
          <span>{{ item.score }}</span>
        </div>
        <div class="score-bar">
          <div class="score-fill" :style="{ width: item.score + '%' }"></div>
        </div>
      </div>

      <!-- 单独的 result-text 部分 -->
      <p class="result-text"> 
        <strong>{{ result.main }}</strong> 
        {{ result.detail }} 
      </p>
    </section>

    <!-- 分析部分 -->
    <section class="analysis" v-if="decisions.length">
      <h2>Analysis</h2>
      <div v-for="(decision, index) in decisions" :key="index" class="decision-card">
        <span class="number">{{ index + 1 }}</span>
        <div class="decision-text">
          <strong>{{ decision.main }}</strong>
          {{ decision.detail }}
        </div>
      </div>
    </section>


    <!-- 按钮 -->
    <div class="footer">
      <button class="chat-button" @click="goChatting">
        Go Chatting!
      </button>
    </div>
    <div class="footer1">  
      <button class="chat-button" @click="returnList">
        Return
      </button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'InternSelection',
  data() {
  return {
    scores: [
      { name: 'Tiktok', score: 91 },
      { name: 'Tencent', score: 84 },
    ],
    decisions: [
      {
        main: "Salary Comparison - 91 | 85  ",
        detail: "TikTok offers a higher salary package, including bonuses and stock options, making it more attractive financially. In contrast, Tencent's salary is competitive but slightly lower than TikTok’s, with fewer additional incentives.",
      },
      {
        main: "Location - 87 | 92  ",
        detail: "TikTok's headquarters in Singapore provides international exposure and networking opportunities, ideal for those looking to work in a global environment. Tencent’s Shenzhen office is a great option for those wanting to immerse themselves in China's tech ecosystem, though it's more localized.",
      },
      {
        main: "Company Culture - 90 |85  ",
        detail: "TikTok promotes a creative and flexible work culture, encouraging innovation and personal growth. Tencent, while still offering a solid work environment, has a more traditional, hierarchical structure that may feel restrictive for some.",
      },
      {
        main: "Work-Life Balance - 86 | 84  ",
        detail: "TikTok offers a better work-life balance with fewer demands on after-hours work, making it a more relaxed environment. Tencent is known for its high-pressure culture, with long hours and a stronger focus on performance.",
      },
      {
        main: "Career Development - 95 |80  ",
        detail: "TikTok offers faster career progression with more opportunities to move across departments and regions, giving employees more visibility. Tencent offers a solid career development path, but advancement can be slower and more dependent on internal networking.",
      }
    ],

    // 注意这里是一个对象，不是数组
    result: {
      main: 'TikTok is a better fit based on salary, location, culture, and career growth, according to your preferences and priorities. ',
      detail: 'TikTok is a better fit for those seeking a fast-paced, innovative environment with global exposure and a healthier work-life balance.'
    }
  }
},


  methods: {
    goChatting() {
      // 点击按钮返回到聊天页面
      this.$router.push('/chat-interface')
    },
    returnList() {
      // 点击按钮返回到决策列表页面
      this.$router.push({ name: 'decision-after' }); 
    },
  },
})
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f9f9f9;
  color: #333;
}

#app {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* 标题样式 */
.header h1 {
  font-size: 2rem;
  color: #52c8e8;
  margin-bottom: 10px;
}

/* 关键指标样式 */
.key-notes h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.score-item {
  margin: 10px 0;
}

.score-title {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  margin-bottom: 5px;
}

.score-bar {
  background-color: #ddd;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}

.score-fill {
  background-color: #52c8e8;
  height: 100%;
}

/* 结果文字 */
.result-text {
  margin-top: 15px;
  font-size: 1rem;
}

/* 分析部分样式 */
.analysis h2 {
  margin-top: 40px;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.decision-card {
  display: flex;
  background-color: #f2f8fc;
  border-left: 4px solid #52c8e8;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.decision-card .number {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 10px;
}

.decision-text {
  font-size: 1rem;
}

.decision-card:last-child {
  margin-bottom: 100px;  /* Adjust this value for more or less space */
}
/* 按钮样式 */
.footer1 {
  position: absolute; /* 绝对定位 */
  top: 80px; /* 距离底部 20px */
  right: 0; /* 距离右侧 40px */
  text-align: center;
}

.footer1 .chat-button {
    border-radius: 30px;
    background-color: #fff;
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 20px;
    color: #42b0cf;
    font-weight: 700;
    padding: 10px 17px;
    border: 2px solid#42b0cf;
    cursor: pointer;
    margin-right: 80px;
}

.footer1 .chat-button:hover {
  background-color:#51d4e0; /* 悬停时背景色 */
}

.footer {
  position: absolute; /* 绝对定位 */
  top: 15px; /* 距离底部 20px */
  right: 0; /* 距离右侧 40px */
  text-align: center;
}

.footer .chat-button {
    border-radius: 30px;
    background-color: #fff;
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 20px;
    color: #42b0cf;
    font-weight: 700;
    padding: 10px 17px;
    border: 2px solid#42b0cf;
    cursor: pointer;
    margin-right: 80px;
}

.footer .chat-button:hover {
  background-color:#51d4e0; /* 悬停时背景色 */
}

</style>