<template>
  <h2 class="contentTitle">AI大模型应用</h2>
  <el-row :gutter="20">
    <span class="more" @click="openCocoFlow()">查看更多</span>
    <el-col :span="6">
      <div class="grid-content"
        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/story-telling/a7fa08b8-cf60-11ef-93e3-12e77c4cb76b')">
        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
        <img :src="Img1" alt="">
        <div>
          <p class="title" title="创意智造">创意智造</p>
          <p title="以设计思维为核心深度启发学生创意，辅助学生从无到有完成科创作品。">以设计思维为核心深度启发学生创意，辅助学生从无到有完成科创作品。</p>
        </div>
        <!-- </router-link> -->
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content"
        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/e31ade78-80ed-4219-ae8e-4d3bdf2ed4f1')">
        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
        <img :src="Img3" alt="">
        <div>
          <p class="title" title="PBL课程设计助手">PBL课程设计助手</p>
          <p title="支持教师从无到有进行项目式学习课程设计及课时设计。">支持教师从无到有进行项目式学习课程设计及课时设计。</p>
        </div>
        <!-- </router-link> -->
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content"
        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/6a6cc71c-634c-46dd-a7dc-8960203f9aa0')">
        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
        <img :src="Img2" alt="">
        <div>
          <p class="title" title="5EX模型学习活动设计助手">5EX模型学习活动设计助手</p>
          <p title="以5EX教学模型为依据，进行系统化的STEM教学设计。">以5EX教学模型为依据，进行系统化的STEM教学设计。</p>
        </div>
        <!-- </router-link> -->
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content"
        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/a50ddd41-bab8-44b7-8354-34d4d47250bd')">
        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
        <img :src="img4" alt="">
        <div>
          <p class="title" title="C-POTE 跨学科主题学习设计">C-POTE 跨学科主题学习设计</p>
          <p title="以C-POTE课程设计模型为依据，进行系统化的跨学科课程设计。">以C-POTE课程设计模型为依据，进行系统化的跨学科课程设计。</p>
        </div>
        <!-- </router-link> -->
      </div>
    </el-col>
  </el-row>

</template>
<script setup>
import { ref, onMounted } from 'vue';
import Img1 from '@/assets/icon/创意智造.png'
import Img2 from '@/assets/icon/5EX.png'
import Img3 from '@/assets/icon/PBL.png'
import img4 from '@/assets/icon/POTE.png'
import { userInfoStore } from '@/stores/counter'

const InfoStore = userInfoStore()

const openApplication = (type) => {
  window.open(type, '_blank')
}

const openCocoFlow = () => {
  top.U.MD.D.I.openApplication('appStore')
}
</script>
<style lang="scss" scoped>
.more {
  padding: 5px 8px;
  position: absolute;
  background-color: #E7E7E7;
  top: -40px;
  right: 8px;
  border-radius: 8px;
  font-size: 12px;
  color: #000000B8;
  cursor: pointer;
  z-index: 10;
}

.el-row {
  margin-bottom: 20px;

  .el-col {
    border-radius: 4px;

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      background: #fff;
      border-radius: 10px;
      position: relative;
      padding: 16px;
      display: flex;
      align-items: center;

      img {
        width: 56px;
        height: fit-content;
        margin-right: 5px;
      }

      .course_down {
        // display: inline-block;
        padding: 5px 8px;
        position: absolute;
        background-color: #efefef;
        top: 5px;
        right: 8px;
        border-radius: 5px;
        font-size: 12px;
        color: #555;
        cursor: pointer;
        z-index: 10;
      }

      div {
        // position: absolute;
        // left: 80px;
        // top: 16px;
        width: calc(100% - 56px);
        cursor: pointer;


        .title {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          width: 100%;
          color: rgba(0, 0, 0, 0.9);
          font-size: 14px;
          margin-bottom: 10px;
          font-weight: 400;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }

        p {
          color: rgba(0, 0, 0, 0.4);
          font-size: 12px;
          padding-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }


}

.el-row:last-child {
  margin-bottom: 0;
}
</style>