<script setup>
const router = useRouter()
function back() {
  router.back()
}
const route = useRoute()
let as_id = route.query.as_id
let from = route.query.from
let one_info = $ref({
  as_zy_syxm_v2: ''
})

watch(() => router.currentRoute.value.query.as_id, (newValue) => {
  as_id = newValue
  clickedLike = false
  initData()
})
initData()
function initData() {
  request({
    baseURL: window.GLOBAL_CONFIG.api,
    url: '/aimooc/spjj/detail',
    data: {
      as_id: as_id,
      is_center: 0
    }
  }).then(res => {
    one_info = res.data.one_info
    getRecommendList()
  })
}


let clickedLike = $ref(false)
function clickLike() {
  request({
    baseURL: window.GLOBAL_CONFIG.api,
    url: '/aimooc/spjj/dianzan',
    data: {
      as_id: as_id
    }
  }).then(() => {
    clickedLike = true
    one_info.as_zy_dzs_v2++
  })
}

function goTeacherPersonalCenter() {
  router.push({
    path: '/frontpage/teacherPersonalCenter',
    query: {
      user_id: one_info.create_user_id,
      as_zy_syxm_v2: one_info.as_zy_syxm_v2
    }
  })
}

let pageData = $ref([])
function getRecommendList() {
  request({
    baseURL: window.GLOBAL_CONFIG.api,
    url: '/aimooc/spjj/index',
    data: {
      azz_id_v2: one_info.azz_id_v2,
      azz_ssnj_v2: one_info.azz_ssnj_v2_option_k,
      page: 1,
      limit: 20,
      exclude_id: as_id,
      as_zy_shzt_v2: 1
    }
  }).then(res => {
    pageData = res.data.page_data
  })
}

function goDetail(item) {
  router.push({
    path: '/frontpage/videoDetail', query: {
      as_id: item.as_id
    }
  })
}
</script>
<template>
  <div style="background-color: #f7f6fb;">
    <div class="breadcrumbBg">
      <div style="width: 1200px;margin:auto;height: 60px;display: flex;justify-content: space-between;">
        <div style="line-height: 60px;">
          <span style="color: #D3D3D3;font-size: 14px;">{{ from == 'teacherPersonalCenter' ? '精品课程 - ' : '' }}</span><span
            style="color: white;font-size: 14px;">{{ from == 'teacherPersonalCenter' ? one_info.as_zy_syxm_v2 + '的个人中心' :
              '精品课程'
            }}</span>
        </div>
        <div style="height: 60px;display: flex;align-items: center;">
          <el-button style="width: 80px;height: 35px;border-radius: 3px;color: #9f93cd;" @click="back()">返回</el-button>
        </div>
      </div>
    </div>
    <div style="width: 1200px;margin:auto;font-size: 20px;font-weight: bold;padding:10px 20px;min-height: 50px;">
      {{ one_info.as_title }}
    </div>
    <div style="width: 1200px;margin:auto;display: flex;">
      <div style="width: 950px;">
        <div style="display: flex;justify-content: space-between;padding:0 20px 10px 20px">
          <div style="display: flex;cursor: pointer;" @click="goTeacherPersonalCenter()">
            <img :src="'https://uc.bozedu.net/user/main/user_avatar?api=json&user_id=' + one_info.create_user_id"
              style="width: 25px;height: 25px;margin-right: 5px;" />
            {{ one_info.as_zy_syxm_v2 }}
          </div>
          <div style="display: flex;">
            <img src="../../../assets/like.png" v-show="!clickedLike" @click="clickLike()"
              style="width: 20px;height: 20px;cursor: pointer;" />
            <img src="../../../assets/likeSolid.png" v-show="clickedLike" style="width: 20px;height: 20px;" />
            <span style="margin-left: 5px;">{{ one_info.as_zy_dzs_v2 }}</span>
          </div>
        </div>

        <div>
          <video :src="one_info.as_file" controls controlslist="nodownload" style="width: 100%;"></video>
        </div>
      </div>
      <div style="width: 250px;padding-left: 20px;margin-top: -4px;">
        <div style="font-size: 20px;font-weight: bold;width: 94px;text-align: center;">相关推荐</div>
        <div style="width: 94px;height: 7px;opacity: 0.62;background:#6c5dd3;border-radius: 4px;margin-top: -8px;"></div>
        <el-scrollbar height="600px" style="margin-top: 10px;width: 250px;">
          <div style="width: 250px;padding: 0px;cursor: pointer;" v-for="item of pageData" @click="goDetail(item)">
            <el-image :src="item.as_img" style="border-radius: 12px;min-height: 100px;width: 250px;height: 162px;" />
            <div style="background-color: white;padding: 5px 10px;">
              <div style="font-size: 16px;">
                {{ item.as_title }}
              </div>
              <div style="display: flex;justify-content: space-between;">
                <div style="color:#6F767E;font-size: 14px;">
                  {{ item.as_zy_syxm_v2 }}
                </div>
                <div style="display: flex;">
                  <div style="display: flex;margin-right: 20px;">
                    <img src="../../../assets/like.png" style="width: 20px;height: 20px;margin-right: 5px;" />
                    {{ item.as_zy_dzs_v2 }}
                  </div>
                  <div style="display: flex;">
                    <img src="../../../assets/eye.png" style="width: 25px;height: 20px;margin-right: 5px;">
                    {{ item.as_zy_gks_v2 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.breadcrumbBg {
  background-image: url(../../../assets/breadcrumbBg.png);
  height: 60px;
  width: 100%;
}
</style>
