<template>
  <div class="videoList">
    <div class="list">
      <div class="list-title">书籍视频解说</div>

      <view
        v-for="(item, index) in list"
        :key="index"
        @click="goPlayVideo(item)"
      >
        <div class="list-item">
          <div style="position: relative">
            <image
              class="list-item-play"
              alt=""
              src="https://ct.zzxcx.net/ctjk/h5/videoList/play.png"
            />
            <image
              mode="widthFix"
              style="width: 44.5vw"
              alt=""
              :src="item.videoCover"
            />
          </div>

          <div class="list-item-name">{{ item.videoName }}</div>
        </div>
      </view>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import utils from "@/utils";
export default {
  data() {
    return {
      query: {},
      list: [
        {
          createTime: "2023-02-20 14:46:40",
          id: 1,
          state: 1,
          updateTime: "2023-02-20 15:13:57",
          videoCover: "https://ct.zzxcx.net/ctjk/h5/videoList/km1.png",
          videoName: "01小车科目一ABS题",
          videoSubject: 1,
          videoUrl:
            "https://mp.weixin.qq.com/s?__biz=Mzg2OTkwMDU0OA==&mid=2247483656&idx=1&sn=61381ded69ebe20d8c0fedc7e77ee0ce&chksm=ce974963f9e0c075bb209fde63d128a97936eb65694d373853c6352584acc645085f42f7b9d5#rd",
        },
      ],
    };
  },
  methods: {
    goPlayVideo(item) {
      let query = Object.assign({}, this.query);
      query.paramsMode = 2
      uni.setStorageSync("storageWebSrc", item.videoUrl);
      uni.navigateTo({
        url: "/pages/extraWeb/index?" + utils.mapToUrlQuery(query),
      });
    },
  },
  onLoad(query) {
    this.query = query;
    api.carVideo
      .studentVideoTeachingList({
        videoSubject: query.subject,
      })
      .then((res) => {
        this.list = res.rows;
      });
  },
};
</script>

<style lang="scss" scoped>
.videoList {
  width: 750rpx;
  .list {
    width: 690rpx;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    position: relative;
    padding-top: 0px;
    justify-content: space-between;
    .list-title {
      width: 100%;
      color: #0a1a33;
      font-size: 34rpx;
      font-weight: bold;
      padding: 30rpx;
      padding-left: 0rpx;
    }
    .list-item {
      width: 334rpx;
      height: auto;
      margin-bottom: 30rpx;
      position: relative;
      overflow-x: hidden;
    }
    .list-item-name {
      font-size: 34rpx;
      text-align: center;
      width: 100%;
      overflow-x: hidden;
      padding: 10rpx 0px;
      color: black;
      text-align: left;
    }
    .list-item-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60rpx;
      height: 60rpx;
    }
    .list-item-title {
      color: #fff;
    }
    .list-item-jiao {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.left40 {
  left: 40rpx;
}
.top128 {
  top: 128rpx;
}
.top54 {
  top: 54rpx;
}
</style>