<template>
  <view class="s-ses">
    <card title="督学视频介绍">
      <video src=""></video>
    </card>

    <card title="督学图文介绍">
      <view class="image">
        <image style="height: 200px" src="@/static/png/s_1.png"></image>
      </view>
      <!-- <view class="des" v-html="desHtml"></view> -->
      <rich-text class="des" :nodes="desHtml"></rich-text>
    </card>

    <card title="其他图文介绍">
      <view
        v-for="item in otherDes"
        :key="item.id"
        class="other-des-item"
        @click="gotoDetail(item)"
      >
        <view class="other-des-img">
          <image :src="item.img"></image>
        </view>
        <text :title="item.des" class="other-des-text">{{ item.des }}</text>
      </view>
    </card>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import card from './card.vue';

const desHtml = `督学是小学英语教育专业的一门专业核心课程，本课程开设四个学期，每周四课时。本课程旨在通过英语语言基础训练与篇章学习分析，使学生系统掌握基础语言知识和基本语言技能。<br>
        在教学过程中培养学生合作学习、自主学习的能力并引导学生扩大国际视野，培养学生跨文化交际的能力。通过中西方文化对比，培养学生的文化自信。启发学生善于思考，在学习语言的同时，也获得正确的思想观念、价值观点、道德规范和审美观点。`;

const otherDes = ref([
  {
    id: 1,
    img: new URL('@/static/png/s_2.png', import.meta.url).href,
    des: `督学是小学英语教育专业的一门专业核心课程，`,
  },
  {
    id: 2,
    img: new URL('@/static/png/s_3.png', import.meta.url).href,
    des: `自主学习的能力并引导学生扩大国际视野，培养学生跨文化交际的能力`,
  },
  {
    id: 3,
    img: new URL('@/static/png/s_4.png', import.meta.url).href,
    des: `培养学生跨文化交际的能力`,
  },
]);

const gotoDetail = item => {
  uni.navigateTo({
    url: `/pages/parents/supervisionService/serviceDetail?id=${item.id}`,
  });
};
</script>

<style lang="scss">
.s-ses {
  padding-top: 12px;
  video {
    width: 100%;
    border-radius: 10px;
  }
  .image {
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
    image {
      width: 100%;
      object-fit: contain;
    }
  }
  .des {
    color: #000;
    text-align: justify;
    // font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 160% */
  }
  .other-des-item {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    margin: 5px 0;
    padding: 10px 0;
    .other-des-img {
      width: 100px;
      height: 80px;
      image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .other-des-text {
      // flex: 1;
      width: 220px;
      padding: 0 12px;
      line-height: 25px;
      max-height: 100px;
      display: -webkit-box; /* 必须结合 -webkit-box */
      -webkit-box-orient: vertical; /* 设置为垂直方向 */
      -webkit-line-clamp: 4; /* 限制显示的行数 */
      overflow: hidden; /* 溢出隐藏 */
      text-overflow: ellipsis;
    }
  }
}
</style>
