<template>
  <div class="train">
    <Header @confirmExit="getExit" :showTool="false" closeClass="close2"></Header>
    <div class="menu">
      <div class="box">
        <div class="left">
          <ul>
            <li :class="{ on: currentData.key == item.key }" v-for="(item, index) in courseList " :key="index"
              @click="clickVideo(item)">
              <div class="pic"><img :src="'static/images/train/' + item.key + '.png'">
              </div>
              <div class="name">
                {{ item.title }}
              </div>
            </li>
          </ul>
        </div>
        <div class="right">
          <!--视频开始-->
          <video style="width: 100%; object-fit: fill" :src="currentData.url"
            :poster="currentData.url?.replace('  ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
            controls autoplay>
            您的浏览器不支持 video 标签。
          </video>
          <!--视频结束-->
        </div>
      </div>
    </div>
    <div class="close" @click="getExit"></div>
  </div>
</template>

<script setup name="courseIndex" lang="ts">
const router = useRouter();
const { proxy } = getCurrentInstance() as any;


const data = reactive<any>({
  currentData: {}
});

const { currentData } = toRefs(data);


const courseList = [
  {
    title: "立定跳远",
    key: "jump",
    content:
      "立定跳远是指不用助跑从立定姿势开始的跳远，是集弹跳、爆发力、身体的协调性和技术等方面的身体素质于一体的运动。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/jump.mp4",
    img: "../../static/images/analysis/jump.png",
  },
  {
    title: "仰卧起坐",
    key: "situp",
    content:
      "仰卧起坐，一种锻炼身体的方式。仰卧，两腿并拢，两手上举，利用腹肌收缩，两臂向前摆动，迅速成坐姿，上体继续前屈，两手触脚面，低头；然后还原成坐姿，如此连续进行。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/situp.mp4",
    img: "../../static/images/analysis/sitUp.png",
  },
  {
    title: "引体向上",
    key: "pullup",
    content:
      "引体向上是人体手臂抓握力、上肢力量、背部力量和腰腹肌力量的美与力量的综合体现，这一动作练习对提高上肢悬垂力量、握力以及有着十分关键的作用， [3] 是单杠卷身上等杠上动作的基础。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/pullup.mp4",
    img: "../../static/images/analysis/pullUp.png",
  },
  {
    title: "实心球",
    key: "solidball",
    content:
      "实心球是一项力量性和动作速度项目，是以力量为基础，以动作速度为核心的投掷项目。影响实心球成绩有三个因素，实心球的出手速度、出手角度及出手高度，其中出手速度是最重要的因素。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/solidball.mp4",
    img: "../../static/images/analysis/solidBall.png",
  },

  {
    title: "斜身引体",
    key: "sidepullup",
    content:
      "斜身引体用高度适宜的低单杠，使杠面高度与受试者胸部齐平。受试者面向单杠，自然站立，两手分开与肩同宽，正握杠，两腿前伸，两脚着地并由同伴压住两脚，保持两臂与躯干呈90°，身体斜向下垂；然后做屈臂引体，当下颌能触到或超过横杠时，伸臂复原，为完成一次。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/sidepullup.mp4",
    img: "../../static/images/analysis/sidepullup.png",
  },
  {
    title: "三级蛙跳",
    key: "trijump",
    content:
      "三级蛙跳是一种高质量的身体锻炼方式，其动作基本原理为：弹跳、稳定和动态平衡。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/trijump.mp4",
    img: "../../static/images/analysis/trijump.png",
  },
  {
    title: "铅球",
    key: "shotput",
    content:
      "运动员用手托住铅球，在投掷圈内以滑步等形式用单手将球自肩上方推出，落入规定区域内为有效。",
    url: "https://aiexam-data.oss-cn-shenzhen.aliyuncs.com/midexam/samples/shotput.mp4",
    img: "../../static/images/analysis/shotput.png",
  },
]

/**
 * 点击视频
*/
const clickVideo = (data: any) => {
  currentData.value = data;
};

/**
 * 退出
*/
const getExit = () => {
  router.go(-1);
};

onMounted(() => {
  currentData.value = courseList[0];
})

</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.menu {
  width: calc(100% - ($waiPadding * 2));
  height: 75vh;
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;


  .box {
    width: 100%;
    background: linear-gradient(64deg, #092941 -85%, #2A484B 96%);
    box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.3);
    padding: 20px;
    display: flex;
    box-sizing: border-box;
    border-radius: 1.6rem;
    justify-content: space-between;
  }

  .left {
    width: 22.2%;
    display: flex;
    border-radius: 1.6rem;
    background: radial-gradient(212% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
    overflow: hidden;

    ul {
      overflow-y: scroll;
      overflow-x: hidden;
      width: 100%;

      li {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccbdbd;
        padding: 6px 8%;
        position: relative;
        cursor: pointer;

        .pic {
          width: 4.5vw;
          height: 4.5vw;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          padding: 5px;

          img {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(100%);
          }
        }

        .name {
          font-size: 1.82rem;
        }
      }

      .on {
        &::after {
          content: "";
          display: block;
          width: calc(100% - 16%);
          height: calc(100% - 12px);
          position: absolute;
          border-radius: 1.3rem;
          background: #F7F7F7;
          box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.5);
          z-index: 0;
        }

        .pic {

          z-index: 1;

          img {
            filter: none;
          }
        }

        .name {
          z-index: 1;
        }
      }

      &::-webkit-scrollbar {
        width: 0px;
      }

      &::-webkit-scrollbar-thumb {
        border-width: 2px;
        border-radius: 4px;
        border-style: dashed;
        border-color: transparent;
        background-color: rgba(26, 62, 78, 0.9);
        background-clip: padding-box;
      }

      &::-webkit-scrollbar-button:hover {
        border-radius: 6px;
        background: rgba(26, 62, 78, 1);
      }
    }
  }

  .right {
    width: 75%;
    display: flex;
  }
}

.close {
  position: absolute;
  // right: calc($waiPadding - 3.2rem);
  left: auto;
  right: calc($waiPadding - 3.2rem);
  top: auto;
  bottom: calc($topPadding / 2 - 3.2rem / 4);
}

</style>
