<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { user } from "~/store/index";

let videosData = $ref({
  videos_one: [],
  videos_two: [],
  videos_three: [],
})
request({
  baseURL: window.GLOBAL_CONFIG.api,
  url: '/aimooc/spjj/main',
}).then((res) => {
  videosData = res.data
})

const router = useRouter()
function viewMore() {
  router.push('/frontpage/viewMore')
}

function search() {
  router.push({
    path: '/frontpage/viewMore', query: {
      camp_idSelected: camp_idSelected,
      subject_idSelected: subject_idSelected,
      grade_idSelected: grade_idSelected,
      keyword: keyword,
    }
  })
}

function goDetail(item) {
  router.push({
    path: '/frontpage/videoDetail',
    query: {
      as_id: item.as_id,
    },
  })
}
let keyword = $ref('')
let popoverShow = $ref(false)
let campList = $ref([{ camp_name: '全部', camp_id: '', selected: true }])
request({
  baseURL: window.GLOBAL_CONFIG.uc,
  url: '/school/main/get_camp',
  data: {
    sm_id: user.value.sm_info.sm_id
  }
}).then(res => {
  campList = campList.concat(res.data.camp)
})
let camp_idSelected = ''
function clickCamp(item) {
  for (let camp of campList) {
    if (camp.selected) {
      camp.selected = false
    }
  }
  item.selected = true
  camp_idSelected = item.camp_id
}

let subjectOptions = $ref([{
  azz_name_v2: '全部',
  azz_id_v2: '',
  selected: true
}])
request({
  baseURL: window.GLOBAL_CONFIG.api,
  url: '/aimooc/zyfl_zy_v2/index',
  data: {
    page: 1,
    limit: 9999
  }
}).then(res => {
  subjectOptions = subjectOptions.concat(res.data.page_data)
})
let subject_idSelected = ''
function clickSubject(item) {
  for (let subject of subjectOptions) {
    if (subject.selected) {
      subject.selected = false
    }
  }
  item.selected = true
  subject_idSelected = item.azz_id_v2
}

const gradeOptions = $ref([{ value: '', name: '全部', selected: true }, { value: 1, name: '一年级' }, { value: 2, name: '二年级' }, { value: 3, name: '三年级' }, { value: 4, name: '四年级' }, { value: 5, name: '五年级' }, { value: 6, name: '六年级' }])
let grade_idSelected = ''
function clickGrade(item) {
  for (let grade of gradeOptions) {
    if (grade.selected) {
      grade.selected = false
    }
  }
  item.selected = true
  grade_idSelected = item.value
}
</script>

<template>
  <div style="height: 600px;display: flex;">
    <div style="background-color: #9f93cd;width: 60%;"></div>
    <div style="background-color: #f3f3f8;width: 40%;"></div>
  </div>
  <div style="height: 600px;margin-top: -600px;padding: 2% 3%;display: flex;">
    <div
      style="background-color: #131d42;height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
      <div style="height:288px;color:white;display: flex;flex-direction:column;align-items: center;">
        <div><span style="font-size: 50px;">AI数字化服务平台，</span></div>
        <div><span style="font-size: 50px;">打造你的个性化数字人</span></div>
        <div style="margin-top: 10px;"><span style="font-size: 16px;">Ai digital service platform to create</span></div>
        <div><span style="font-size: 16px;">your personalized digital people.</span></div>
        <div>
          <el-input v-model="keyword" placeholder="请输入您要搜索的内容"
            style="height: 60px;width: 600px;margin-top: 20px;font-size: 16px;">
            <template #prepend>
              <el-button @click="popoverShow = !popoverShow"
                style="background-color: white;border-radius:0;height: 60px;width: 80px;color: black;font-size: 16px;">全部
                <el-icon>
                  <ArrowDown />
                </el-icon></el-button>
            </template>
            <template #append>
              <el-button @click="search()"
                style="background-color: #9F93CD;border-radius:0;height: 60px;width: 100px;color: white;font-size: 16px;">搜索
                →</el-button>
            </template>
          </el-input>
        </div>
      </div>
      <div v-show="popoverShow" style="width: 600px;height: 0px;color: black;">
        <div style="display: flex;background-color: white;">
          <div style="width: 80px;text-align: center;padding-top: 15px;padding-bottom: 15px;">
            学院
          </div>
          <div style="width: 520px;display: flex;flex-wrap: wrap;">
            <div style="text-align: center;padding:10px 5px 10px 5px;" v-for="item of campList" :key="item.camp_id">
              <div style="padding: 5px;cursor: pointer;" @click="clickCamp(item)"
                :style="'background-color:' + (item.selected ? '#f8f5fa;' : ';') + 'color:' + (item.selected ? '#2e235b;' : ';') + 'font-weight:' + (item.selected ? 'bold;' : ';')">
                {{ item.camp_name }}</div>
            </div>
          </div>
        </div>
        <div style="display: flex;background-color: white;">
          <div style="width: 80px;text-align: center;padding-top: 15px;padding-bottom: 15px;">
            专业
          </div>
          <div style="width: 520px;display: flex;flex-wrap: wrap;">
            <div style="text-align: center;padding:10px 5px 10px 5px;" v-for="item of subjectOptions"
              :key="item.azz_id_v2">
              <div style="padding: 5px;cursor: pointer;" @click="clickSubject(item)"
                :style="'background-color:' + (item.selected ? '#f8f5fa;' : ';') + 'color:' + (item.selected ? '#2e235b;' : ';') + 'font-weight:' + (item.selected ? 'bold;' : ';')">
                {{ item.azz_name_v2 }}</div>
            </div>
          </div>
        </div>
        <div style="display: flex;background-color: white;">
          <div style="width: 80px;text-align: center;padding-top: 15px;padding-bottom: 15px;">
            年级
          </div>
          <div style="width: 520px;display: flex;flex-wrap: wrap;">
            <div style="text-align: center;padding:10px 5px 10px 5px;" v-for="item of gradeOptions" :key="item.value">
              <div style="padding: 5px;cursor: pointer;" @click="clickGrade(item)"
                :style="'background-color:' + (item.selected ? '#f8f5fa;' : ';') + 'color:' + (item.selected ? '#2e235b;' : ';') + 'font-weight:' + (item.selected ? 'bold;' : ';')">
                {{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="width: 1200px;margin:auto;display: flex;">
    <div style="width: 400px;">
      <div
        style="height:300px;width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <div style="font-weight: Medium;font-size: 30px;">Ai数字人展示</div>
        <div style="font-weight: bold;font-size: 40px;color: #c5c3da;margin-top: 15px;">AI DIGITAL</div>
        <div style="font-weight: bold;font-size: 40px;color: #c5c3da;">HUMAN DISPLAY</div>
      </div>
      <div style="width: 300px;background-color: #e8eaeb;height: 300px;margin-top: -300px;margin-left: 50px;"></div>
      <div style="width:400px;">
        <video style="width: 400px;" src="http://vjs.zencdn.net/v/oceans.mp42" controls></video>
      </div>
      <div style="width: 300px;background-color: #e8eaeb;height: 100px;margin-left: 50px;"></div>
    </div>
    <div style="width:100px;"></div>
    <div style="width:700px;padding-top: 90px;">
      <div style="float: left;height:200px;width:350px;border-right: 2px solid #f3f3f3;border-bottom: 2px solid #f3f3f3;">
        <div><img src="../../../assets/aiIntroduce1.png" /></div>
        <div style="font-size: 16px;font-weight: bold;padding-top: 10px;">引领高等教育变革</div>
        <div style="font-size: 14px;margin-top: 20px;">慕课是推动高等教育变革的重要引擎。慕课以大规模在线开放课程的形式，为广大学子提供了……</div>
      </div>
      <div style="float: left; height:200px;width:350px;border-bottom: 2px solid #f3f3f3;padding-left: 50px;">
        <div><img src="../../../assets/aiIntroduce2.png" /></div>
        <div style="font-size: 16px;font-weight: bold;padding-top: 10px;">提升录制效率，缩减时间与制作成本</div>
        <div style="font-size: 14px;margin-top: 20px;">数字人替代教师出境，提高课程录制效率，大幅缩减时间与制作成本。</div>
      </div>
      <div style="float: left;height:200px;width:350px;border-right: 2px solid #f3f3f3;">
        <div><img src="../../../assets/aiIntroduce3.png" /></div>
        <div style="font-size: 16px;font-weight: bold;padding-top: 10px;">释放教师潜能，让教学更聚焦</div>
        <div style="font-size: 14px;margin-top: 20px;">数字人替代教师出境，把教师从“演课”这一工作中解脱出来，释放教学潜能，让教师更专注于……</div>
      </div>
      <div style="float: left; height:200px;width:350px;padding-left: 50px;">
        <div><img src="../../../assets/aiIntroduce2.png" /></div>
        <div style="font-size: 16px;font-weight: bold;padding-top: 10px;">智能化生成专属数字人</div>
        <div style="font-size: 14px;margin-top: 20px;">借助数据采集技术，系统能够捕获教师的声音数据和人像数据，进而塑造出教师的数字化分身…… </div>
      </div>
    </div>
  </div>
  <div style="display: flex;height: 500px;">
    <div style="width: 50%;height: 100%;">
      <div style="background-color: #f7f6fb;height: 230px;width: 50%;margin-top: 10%;" />
    </div>
    <div style="width: 50%;height: 100%;background-color: #f7f6fb;" />
  </div>
  <div style="height: 700px;max-height:700px;margin-top: -500px;">
    <div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
      <img src="../../../assets/divider.png" style="width: 1200px;">
    </div>
    <div style="display: flex;width: 100%;">
      <div style="width: 900px;margin-left: calc((100% - 1200px)/2);">
        <div style="display: flex;margin-top: 60px;">
          <div v-if="videosData.videos_one[0]" style="width: 300px;padding: 0 5px;cursor: pointer;"
            @click="goDetail(videosData.videos_one[0])">
            <el-image :src="videosData.videos_one[0].as_img"
              style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
            <div style="font-size: 15px;font-weight: Medium;">
              {{ videosData.videos_one[0].as_title }}
            </div>
          </div>
          <div v-if="videosData.videos_one[1]" style="width: 300px;padding: 0 5px;cursor: pointer;"
            @click="goDetail(videosData.videos_one[1])">
            <el-image :src="videosData.videos_one[1].as_img"
              style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
            <div style="font-size: 15px;font-weight: Medium;">
              {{ videosData.videos_one[1].as_title }}
            </div>
          </div>
          <div v-if="videosData.videos_one[2]" style="width: 300px;padding: 0 5px;cursor: pointer;"
            @click="goDetail(videosData.videos_one[2])">
            <el-image :src="videosData.videos_one[2].as_img"
              style="width: 100%;border-radius: 12px;width: 290px;height: 188px;" />
            <div style="font-size: 15px;font-weight: Medium;">
              {{ videosData.videos_one[2].as_title }}
            </div>
          </div>
        </div>
      </div>
      <div style="width: 300px;background-color: #9f93cd;height: 300px;">
        <div style="display: flex;flex-direction: column;justify-content: center;height: 100%;">
          <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
            精品课程
          </div>
          <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
            PREMIUM
          </div>
          <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
            COURSES
          </div>
          <div style="color: white;cursor: pointer;text-align: center;" @click="viewMore()">
            查看更多 》
          </div>
        </div>
      </div>
      <div style="width: calc((100% - 1200px)/2);background-color: #9f93cd;height: 300px;" />
    </div>
    <div>
      <div style="display: flex;width: 1200px;margin-left: calc((100% - 1200px)/2);margin-top: 30px;">
        <div v-if="videosData.videos_one[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_one[3])">
          <el-image :src="videosData.videos_one[3].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_one[3].as_title }}
          </div>
        </div>
        <div v-if="videosData.videos_one[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_one[4])">
          <el-image :src="videosData.videos_one[4].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_one[4].as_title }}
          </div>
        </div>
        <div v-if="videosData.videos_one[5]" style="width: 300px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_one[5])">
          <el-image :src="videosData.videos_one[5].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_one[5].as_title }}
          </div>
        </div>
        <div v-if="videosData.videos_one[6]" style="width: 300px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_one[6])">
          <el-image :src="videosData.videos_one[6].as_img" style="border-radius: 12px;width: 290px;height: 188px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_one[6].as_title }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style="height: 600px;">
    <div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
      <img src="../../../assets/divider.png" style="width: 1200px;">
    </div>
    <div style="width: 100%;">
      <div style="width: 1200px;display: flex;margin-left: calc((100% - 1200px)/2);">
        <div v-if="videosData.videos_two[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_two[0])">
          <img src="../../../assets/champion.png" class="cornerMarkImg">
          <div class="cornerMark" style="background-color: #f2dc8c;margin-top: -3px;">
            1
          </div>
          <el-image :src="videosData.videos_two[0].as_img"
            style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_two[0].as_title }}
          </div>
        </div>
        <div v-if="videosData.videos_two[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_two[1])">
          <img src="../../../assets/secondWinner.png" class="cornerMarkImg">
          <div class="cornerMark" style="background-color: #d7d8d8;margin-top: -3px;">
            2
          </div>
          <el-image :src="videosData.videos_two[1].as_img"
            style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_two[1].as_title }}
          </div>
        </div>
        <div v-if="videosData.videos_two[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
          @click="goDetail(videosData.videos_two[2])">
          <img src="../../../assets/thirdWinner.png" class="cornerMarkImg">
          <div class="cornerMark" style="background-color: #ff4f32;margin-top: -3px;">
            3
          </div>
          <el-image :src="videosData.videos_two[2].as_img"
            style="border-radius: 12px;width: 390px;height: 253px;margin-top: -40px;" />
          <div style="font-size: 15px;font-weight: Medium;">
            {{ videosData.videos_two[2].as_title }}
          </div>
        </div>
      </div>
      <div style="display: flex;margin-top: 30px;">
        <div
          style="background-color: #9f93cd;height: 220px;width: calc((100% - 1200px)/2 + 600px);display: flex;justify-content: flex-end;">
          <div style="width: 600px;height: 220px;display: flex;flex-direction: column;justify-content: center;">
            <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
              热视频排名
            </div>
            <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
              HOT VIDEO RANKING
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <div v-if="videosData.videos_two[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
            @click="goDetail(videosData.videos_two[3])">
            <div class="cornerMark" style="background-color: #ff8d7a;">
              4
            </div>
            <el-image :src="videosData.videos_two[3].as_img"
              style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;" />
            <div style="font-size: 15px;font-weight: Medium;">
              {{ videosData.videos_two[0].as_title }}
            </div>
          </div>
          <div v-if="videosData.videos_two[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
            @click="goDetail(videosData.videos_two[4])">
            <div class="cornerMark" style="background-color: #ff8d7a;">
              5
            </div>
            <el-image :src="videosData.videos_two[4].as_img"
              style="border-radius: 12px;width: 290px;height: 188px;margin-top: -40px;" />
            <div style="font-size: 15px;font-weight: Medium;">
              {{ videosData.videos_two[0].as_title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div style="display: flex;justify-content: center;width: 100%;padding: 40px 0px">
      <img src="../../../assets/divider.png" style="width: 1200px;">
    </div>
    <div style="width: 1200px;margin: auto;display: flex;">
      <div v-if="videosData.videos_three[0]" style="width: 400px;padding: 0 5px;cursor: pointer;"
        @click="goDetail(videosData.videos_three[0])">
        <img src="../../../assets/champion.png" class="cornerMarkImg">
        <div class="cornerMark" style="background-color: #f2dc8c;margin-top: -3px;">
          1
        </div>
        <el-image :src="videosData.videos_three[0].as_img"
          style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
        <div style="font-size: 15px;font-weight: Medium;">
          {{ videosData.videos_three[0].as_title }}
        </div>
      </div>
      <div v-if="videosData.videos_three[1]" style="width: 400px;padding: 0 5px;cursor: pointer;"
        @click="goDetail(videosData.videos_three[1])">
        <img src="../../../assets/secondWinner.png" class="cornerMarkImg">
        <div class="cornerMark" style="background-color: #d7d8d8;margin-top: -3px;">
          2
        </div>
        <el-image :src="videosData.videos_three[1].as_img"
          style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
        <div style="font-size: 15px;font-weight: Medium;">
          {{ videosData.videos_three[1].as_title }}
        </div>
      </div>
      <div v-if="videosData.videos_three[2]" style="width: 400px;padding: 0 5px;cursor: pointer;"
        @click="goDetail(videosData.videos_three[2])">
        <img src="../../../assets/thirdWinner.png" class="cornerMarkImg">
        <div class="cornerMark" style="background-color: #ff4f32;margin-top: -3px;">
          3
        </div>
        <el-image :src="videosData.videos_three[2].as_img"
          style="width: 390px;height: 253px;border-radius: 12px;margin-top: -40px;" />
        <div style="font-size: 15px;font-weight: Medium;">
          {{ videosData.videos_three[2].as_title }}
        </div>
      </div>
    </div>
    <div style="width: 1200px;margin:auto;display: flex;margin-top: 30px;">
      <div v-if="videosData.videos_three[3]" style="width: 300px;padding: 0 5px;cursor: pointer;"
        @click="goDetail(videosData.videos_three[3])">
        <div class="cornerMark" style="background-color: #ff8d7a;">
          4
        </div>
        <el-image :src="videosData.videos_three[3].as_img"
          style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;" />
        <div style="font-size: 15px;font-weight: Medium;">
          {{ videosData.videos_three[0].as_title }}
        </div>
      </div>
      <div v-if="videosData.videos_three[4]" style="width: 300px;padding: 0 5px;cursor: pointer;"
        @click="goDetail(videosData.videos_three[4])">
        <div class="cornerMark" style="background-color: #ff8d7a;">
          5
        </div>
        <el-image :src="videosData.videos_three[4].as_img"
          style="width: 290px;height: 188px;border-radius: 12px;margin-top: -40px;" />
        <div style="font-size: 15px;font-weight: Medium;">
          {{ videosData.videos_three[0].as_title }}
        </div>
      </div>
      <div style="background-color: #9f93cd;height: 220px;width: 600px;display: flex;justify-content: flex-end;">
        <div style="width: 600px;height: 220px;display: flex;flex-direction: column;justify-content: center;">
          <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
            班级课程
          </div>
          <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
            CLASS
          </div>
          <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
            COURSES
          </div>
        </div>
      </div>
    </div>
    <div class="bg">
      <div style="width: 1200px;margin: auto;display: flex;align-items: center;height: 100%;display: flex;">
        <div
          style="background-color:rgba(119,110,151,0.5);border-radius: 10px;width: 290px;height: 335px;display: flex;flex-direction: column;justify-content: center;">
          <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
            博智数字教师
          </div>
          <div style="color: white;font-size: 30px;font-weight: Medium;text-align: center;">
            优势
          </div>
          <div style="color: #c5c3da;font-size: 33px;font-weight: bold;text-align: center;">
            BOZHI AI MUKE
          </div>
          <div style="color: #c5c3da;font-size: 40px;font-weight: bold;text-align: center;">
            Advantages
          </div>
        </div>
        <div style="width: 910px;display: flex;justify-content: space-around;">
          <div>
            <div style="display: flex;justify-content: center;">
              <img src="../../../assets/icon1.png">
            </div>
            <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
              AI驱动
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              支持数字人实时渲染
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              提供PaaS技术支持底座
            </div>
          </div>
          <div>
            <div style="display: flex;justify-content: center;">
              <img src="../../../assets/icon2.png">
            </div>
            <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
              智能生产制作
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              支持云剪辑视频与资源文件
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              提供剪辑合成、特效与生产
            </div>
          </div>
          <div>
            <div style="display: flex;justify-content: center;">
              <img src="../../../assets/icon3.png">
            </div>
            <div style="font-size: 32px;color: white;text-align: center;margin-top: 20px;">
              成本和效率
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              相比真人出镜更灵活高效
            </div>
            <div style="font-size: 18px;color:white;text-align: center;">
              大大节省制作成本和时间
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  margin-top: 70px;
  background-image: url('../../../assets/homepageBg.png');
  width: 100%;
  height: calc(100vw * 0.264);
}

.cornerMarkImg {
  position: relative;
  z-index: 100;
  width: 50px;
  height: 30px;
  margin-top: -22px;
}

.cornerMark {
  position: relative;
  z-index: 99;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 50px;
  height: 40px;
  border-radius: 12px 0;
  line-height: 40px;
  text-align: center;
}
</style>
