<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/teacher' }">校园名师</el-breadcrumb-item>
        <el-breadcrumb-item>{{ info.teacherName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="teacher-card">
      <div class="teacher-top">
        <div>
          <img :src="info.avatarUrl" alt="">
        </div>
        <p class="teacher-info">
          <span>教师名称：{{ info.teacherName }}</span>
          <span>年级：{{ info.gradeName }}</span>
          <span>学科：{{ info.subjectName }}</span>
        </p>
      </div>
      <div class="teacher-content" v-html="info.content"> </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getShowInfoAPI } from '@/apis/home'

const route = useRoute()
const id = route.params.id

const info = ref({})
const getShowInfoData = async () => {
  const res = await getShowInfoAPI(id)
  info.value = res.data
}

onMounted(() => {
  getShowInfoData()
})

</script>

<style lang="scss" scoped>
.container {
  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .teacher-card {
    margin-top: 20px;
    padding: 20px;

    min-height: 600px;
    background-color: #FAEADF;
    border-radius: 10px;

    .teacher-top {
      text-align: center;

      img {
        width: 290px;
        height: 360px;
      }

      .teacher-info {
        line-height: 60px;
        color: #A9A19B;

        span:nth-child(1) {
          margin-right: 20px;
        }

        span:nth-child(2) {
          margin-right: 20px;
        }
      }
    }

    .teacher-content {
      margin: 0 20px;

      :deep(p) {
        text-indent: 2em;
        line-height: 30px;
      }
    }

  }

}
</style>