<!-- @format -->
<template>
  <div class="app-container">
    <div class="image">
      <img
        @mouseover="handleChangeActiveContent('A')"
        @click="handleMaterialApplication('A')"
        :src="aaImg"
        alt=""
      />
      <img
        @click="handleMaterialApplication"
        @mouseover="handleChangeActiveContent('B')"
        :src="bbImg"
        alt=""
      />
    </div>
    <div class="message-box">
      <div class="title">{{ activeContentItems.headline }}</div>
      <div class="content" v-html="activeContentItems.content"></div>
    </div>
  </div>
</template>
<script setup>
import aaImg from "@/assets/images/aa.png";
import bbImg from "@/assets/images/bb.png";
import { getMessageContent } from "@/api/talentApplication/index";
import { useRouter } from "vue-router";

let contentList = [];
const activeContentItems = ref({});
const router = useRouter();

const handleMaterialApplication = () => {
  router.push({
    path: "/materialApplication",
    query: {
      type: activeContentItems.value.cardType,
    },
  });
};
//修改选中状态
const handleChangeActiveContent = (type) => {
  activeContentItems.value = contentList.find((item) => item.cardType == type);
};
//获取申请条件内容
const handleGetMessageContent = () => {
  getMessageContent().then((res) => {
    contentList = res.data;
    activeContentItems.value = res.data[0];
  });
};
handleGetMessageContent();
</script>
<style lang="scss" scoped>
.app-container {
  padding: 40px 0 0 0;
}
.title {
  font-family: "宋体";
  color: red;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.content {
  margin: 20px 0;
  font-family: "宋体";
  font-size: 14px;
  text-align: left;
  padding: 0px 0 30px 30px;
}
.message-box {
  padding-top: 20px;
  font-size: 14px;
  background: rgb(244, 244, 247);
  margin-top: 10px;
  width: 80%;
  margin: 20px auto 0;
}
.image {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  img {
    cursor: pointer;
  }
}
</style>
