<script setup>
const router = useRouter()
function back() {
  router.back()
}
const route = useRoute()
let user_id = route.query.user_id
let as_zy_syxm_v2 = route.query.as_zy_syxm_v2

let grades = $ref([])
let gradeMap = {
  '1': '一年级',
  '2': '二年级',
  '3': '三年级',
  '4': '四年级',
  '5': '五年级',
  '6': '六年级',
}
let videosDataMap = {}
let videosData = $ref([])
request({
  baseURL: window.GLOBAL_CONFIG.api,
  url: '/aimooc/spjj/user_center',
  data: {
    user_id: user_id
  }
}).then(res => {
  for (let item of res.data.list) {
    grades.push({
      value: item.nj,
      name: gradeMap[item.nj],
      isChecked: false
    })
    videosDataMap[item.nj] = item.zy
  }
  if (grades.length) {
    grades[0].isChecked = true
  }
  videosData = JSON.parse(JSON.stringify(videosDataMap[grades[0].value]))
  videosData[0].unfold = true

})

function clickGrade(item) {
  for (let item of grades) {
    item.isChecked = false
  }
  item.isChecked = true
  videosData = JSON.parse(JSON.stringify(videosDataMap[item.value]))
  videosData[0].unfold = true
}

function unfold(item) {
  item.unfold = !item.unfold
}

function goVideoDetail(item) {
  router.push({
    path: '/frontpage/videoDetail', query: {
      as_id: item.as_id,
      from: 'teacherPersonalCenter'
    }
  })
}
</script>
<template>
  <div style="background-color: #f7f6fb;padding-bottom: 20px;">
    <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;">精品课程 - </span><span style="color: white;font-size: 14px;">{{
            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;display: flex;padding: 20px 40px;">
      <div>
        <img :src="'https://uc.bozedu.net/user/main/user_avatar?api=json&user_id=' + user_id"
          style="width: 80px;height: 80px;" />
      </div>
      <div style="font-size: 18px;font-weight: bold;height: 80px;line-height: 80px;padding-left: 20px;">
        {{ as_zy_syxm_v2 }}
      </div>
    </div>
    <div class="content">
      <div style="display: flex;justify-content: center;">
        <div
          style="height: 50px;background-color: #e6e8f0;border-radius: 18px;display: flex;color: #0049C6;align-items: center;">
          <div v-for="item of grades" @click="clickGrade(item)"
            style="width: 100px;text-align: center;height: 40px;line-height: 40px;cursor: pointer;"
            :class="item.isChecked ? 'gradeChecked' : ''">
            {{ item.name
            }}</div>
        </div>
      </div>
      <el-divider />
      <div style="padding:0 30px">
        <div v-for="(item, index) of videosData">
          <div style="display: flex;">
            <div class="circle">
              <div style="height: 12px;width: 12px;background-color: #9f93cd;border-radius: 15px;"></div>
            </div>
            <div style="padding-left: 10px;">
              <div style="font-size: 16px;font-weight: bold;">{{ item.zy_name }}</div>
              <div style="display: flex;"><span style="font-size: 14px;color: #8f95b2;">发布了{{ item.list.length
              }}条视频</span>
                <div class="unfoldButton" @click="unfold(item)">
                  {{ item.unfold ? '收起' : '展开' }}</div>
              </div>
            </div>
          </div>
          <div style="padding:10px 19px 10px 19px;">
            <div style="padding:10px 10px 10px 30px"
              :style="index == (videosData.length - 1) ? 'border-left: 0px' : 'border-left: 2px solid #e6e8f0;'">
              <div class="innerContent" v-show="item.unfold">
                <div v-for="video of item.list" style="padding: 0 5px;cursor: pointer;" @click="goVideoDetail(video)">
                  <el-image :src="video.as_img"
                    style="border-radius: 12px;min-height: 100px;width: 145px;height: 94px;" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.innerContent {
  background-color: #f9fafc;
  border: 1px solid #d8dae5;
  border-radius: 8px;
  display: flex;
  width: 100%;
  padding: 20px 10px;
  flex-wrap: wrap
}

.breadcrumbBg {
  background-image: url(../../../assets/breadcrumbBg.png);
  height: 60px;
  width: 100%;
}

.unfoldButton {
  font-size: 12px;
  color: #9f93cd;
  width: 50px;
  height: 20px;
  line-height: 20px;
  background: rgba(108, 93, 211, 0.10);
  text-align: center;
  border-radius: 10px;
  margin-left: 20px;
  cursor: pointer;
}

.circle {
  width: 40px;
  height: 40px;
  border: 2px solid #9f93cd;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradeChecked {
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15), 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
  border-radius: 16px;
  width: 90px !important;
  margin-right: 5px;
  margin-left: 5px;
}

.content {
  padding: 15px 0;
  width: 1200px;
  margin: auto;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
  border-radius: 16px;
  min-height: 600px;
}
</style>
