<!-- 安全学习 -->
<template>
  <view class="videoDetails">
    <view class="tui-header-screen">
      <view class="tui-screen__box">
        <view class="tui-screen-item"
              @tap="screen"
              data-index="2">
          <text style="margin-right: 20rpx;">显示方式</text>
          <tui-icon :name="isList ? 'manage' : 'listview'"
                    :size="isList ? 22 : 18"
                    :bold="isList ? false : true"
                    color="#333"></tui-icon>
        </view>
      </view>
    </view>
    <!--list-->
    <view class="tui-product-list">
      <view class="tui-product-container">
        <template v-for="(item, index) in dataModel.video">
          <!--商品列表-->
          <view :key="index"
                v-if="(index + 1) % 2 != 0 || isList"
                class="tui-pro-item"
                :class="[isList ? 'tui-flex-list' : '']"
                hover-class="tui-hover"
                :hover-start-time="150"
                @tap="detail(item)">
            <image :src="!!item.video_header_url?item.video_header_url:'/static/images/sxlq/bg-img.png'"
                   class="tui-pro-img"
                   :class="[isList ? 'tui-proimg-list' : '']"
                   mode="widthFix"></image>
            <view class="tui-pro-content">
              <!-- <view class="tui-pro-tit">{{ dataModel.name }}</view>    -->
              <view>
                <view class="tui-price__box">
                  <view class="tui-price">
                    <view class="tui-price__small">《 {{ item.video_title }} 》</view>
                  </view>
                </view>
                <view class="tui-group-text">《 {{ item.video_title }} 》</view>
                <view class="tui-group-btn">
                  <view class="tui-flex-btn tui-color-red">已学习时长 {{ (((millisecondsToMinutes(item.currentTime)/millisecondsToMinutes(item.duration)))*100).toFixed(2)}}%</view>
                </view>
              </view>
            </view>
          </view>
          <!--商品列表-->
        </template>
      </view>
      <view class="tui-product-container"
            :class="{'tui-pro--hidden':isList}">
        <template v-for="(item, index) in dataModel.video">
          <!--商品列表-->
          <view :key="index"
                v-if="(index + 1) % 2 == 0"
                class="tui-pro-item"
                :class="[isList ? 'tui-flex-list' : '']"
                hover-class="tui-hover"
                :hover-start-time="150"
                @tap="detail(item)">
            <image :src="!!item.video_header_url?item.video_header_url:'/static/images/sxlq/bg-img.png'"
                   class="tui-pro-img"
                   :class="[isList ? 'tui-proimg-list' : '']"
                   mode="widthFix"></image>
            <view class="tui-pro-content">
              <!-- <view class="tui-pro-tit">{{ dataModel.name }}</view>    -->
              <view>
                <view class="tui-price__box">
                  <view class="tui-price">
                    <view class="tui-price__small">《 {{ item.video_title }} 》</view>
                  </view>
                </view>
                <view class="tui-group-text">《 {{ item.video_title }} 》</view>
                <view class="tui-group-btn">
                  <view class="tui-flex-btn tui-color-red">已学习时长 {{ (((millisecondsToMinutes(item.currentTime)/millisecondsToMinutes(item.duration)))*100).toFixed(2)}}%</view>
                </view>
              </view>
            </view>
          </view>
          <!--商品列表-->
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dropdownList: [
        {
          name: "价格升序",
          selected: false,
        },
        {
          name: "价格降序",
          selected: false,
        },
      ],
      isList: false, //列表或大图
      tabIndex: 0, //顶部筛选索引
      drawer: false,
      drawerH: 0,
      dataModel: null,
    };
  },
  created() {
    //路由
    let routes = getCurrentPages();
    this.index = routes[routes.length - 1]?.options?.index;
    this.dataModel = JSON.parse(routes[routes.length - 1]?.options?.dataModel);
    console.log("dataModle", this.dataModel);
    const videoIdList = this.dataModel.video.map((item) => item.id);
    this.getAllCurrentTime(videoIdList);
  },
  methods: {
    //查咨询每条视频的播放时间
    async getAllCurrentTime(videoIdList) {
      console.log("videoIdList:", videoIdList);
      const { code, data } = await this.$request.post(
        "learn/videoLook/getAllCurrentTime",
        {
          body: { videoIdList },
        }
      );
      if (code == 1) {
        uni.showToast({ title: "查询播放记录失败!", icon: "none" });
      }
      console.log("即将被遍历的结果:", data);
      this.dataModel.video.forEach((element) => {
        let dataItem = data.find((item) => {
          return item.video_id == element.id;
        });
        if (!!dataItem) {
          element.last_look_time = dataItem.last_look_time;
          element.is_look_completed = dataItem.is_look_completed;
          element.duration = dataItem.duration;
          element.currentTime = dataItem.currentTime;
        }
      });
      console.log("查询结果:", this.dataModel.video);
    },
    millisecondsToMinutes(milliseconds) {
      console.log("转换前:", milliseconds);
      console.log("转换后:", (milliseconds / 60).toFixed(2));
      return (milliseconds / 60).toFixed(2);
    },
    screen() {
      console.log("搜索函数!!");
      this.isList = !this.isList;
    },
    detail(dataModel) {
      if (dataModel.video_url.indexOf(".") == -1) {
        uni.showToast({
          title: "视频无法播放!",
          icon: "error",
        });
        // return;
      }
      uni.navigateTo({
        url: `/pages/template/learn/videoLook?dataModel=${JSON.stringify(
          dataModel
        )}`,
        events: {
          back: (res) => {
            console.log("返回值res:", res);
            console.log("dataModel:", dataModel);
            dataModel.is_look_completed = res.is_look_completed;
            if (res.currentTime >= dataModel.currentTime) {
              dataModel.currentTime = res.currentTime;
            }
          },
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tui-search__bar {
  width: 100%;
  background-color: #fff;
  padding: 20rpx 25rpx;
  box-sizing: border-box;
}

.tui-searchbox {
  width: 100%;
  height: 64rpx;
  margin-right: 30rpx;
  border-radius: 15px;
  font-size: 24rpx;
  background: #f7f7f7;
  padding: 6rpx 20rpx;
  box-sizing: border-box;
  color: #999;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tui-search-text {
  padding-left: 16rpx;
}

/*screen*/

.tui-header-screen {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  // position: fixed;
  z-index: 996;
}

.tui-screen__box {
  width: 95%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: end;
  font-size: 28rpx;
  color: #333;
  position: relative;
  background: #fff;
}

.tui-screen-item {
  height: 28rpx;
  line-height: 28rpx;
  // flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-btmItem-active {
  background-color: #fcedea !important;
  color: #e41f19;
  font-weight: bold;
  position: relative;
}

.tui-btmItem-active::after {
  content: "";
  position: absolute;
  border: 1rpx solid #e41f19;
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
  left: 0;
  top: 0;
}

.tui-addr-left {
  padding-left: 6rpx;
}

.tui-bold {
  font-weight: bold;
}

.tui-active {
  color: #e41f19;
}

/*screen*/

/*顶部下拉选择 综合*/

.tui-dropdownlist {
  width: 100%;
  position: absolute;
  background-color: #fff;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 10rpx;
  padding-bottom: 26rpx;
  left: 0;
  top: 80rpx;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 996;
}

.tui-dropdownlist-show {
  visibility: visible;
}

.tui-dropdownlist-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.tui-mask-show {
  opacity: 1;
  visibility: visible;
}

.tui-dropdownlist-item {
  color: #333;
  height: 70rpx;
  font-size: 28rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*顶部下拉选择 综合*/

/*筛选*/
.tui-drawer-box {
  width: 686rpx;
  height: 100%;
  font-size: 24rpx;
  position: relative;
  overflow: hidden;
}

.tui-drawer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  height: 80rpx;
}

.tui-title-bold {
  font-size: 26rpx;
  font-weight: bold;
  flex-shrink: 0;
}

.tui-location {
  margin-right: 6rpx;
}

.tui-attr-right {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.tui-all-box {
  width: 90%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tui-drawer-content {
  padding: 16rpx 30rpx 30rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.tui-input {
  border: 0;
  height: 64rpx;
  border-radius: 32rpx;
  width: 45%;
  background-color: #f7f7f7;
  text-align: center;
  font-size: 24rpx;
  color: #333;
}

.tui-phcolor {
  text-align: center;
  color: #b2b2b2;
  font-size: 24rpx;
}

.tui-flex-attr {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.tui-attr-item {
  width: 30%;
  height: 64rpx;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rpx;
  box-sizing: border-box;
  border-radius: 32rpx;
  margin-right: 5%;
  margin-bottom: 5%;
}

.tui-attr-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 96%;
  text-align: center;
}

.tui-attr-item:nth-of-type(3n) {
  margin-right: 0%;
}

.tui-attr-btnbox {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 30rpx;
  background: #fff;
  z-index: 10;
}

.tui-attr-safearea {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
  width: 100%;
  height: env(safe-area-inset-bottom);
}

.tui-attr-btnbox::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid #eaeef1;
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 0;
}

.tui-drawer-btn {
  width: 48%;
  flex-shrink: 0;
}

.tui-mtop__30 {
  margin-top: 30rpx;
}

/*========商品 start======*/

.tui-product__box {
  width: 100%;
  padding: 184rpx 25rpx 60rpx 25rpx;
  box-sizing: border-box;
}

.tui-product-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-top: 10rpx;
}

.tui-product-container {
  flex: 1;
  margin-right: 10rpx;
}

.tui-product-container:last-child {
  margin-right: 0;
}

.tui-pro-item {
  width: 100%;
  margin-bottom: 10rpx;
  background: #fff;
  box-sizing: border-box;
  border-radius: 12rpx;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}

.tui-flex-list {
  display: flex;
  margin-bottom: 1rpx !important;
}

.tui-pro-img {
  width: 100%;
  display: block;
  flex-shrink: 0;
  background-color: #f5f5f5;
}

.tui-proimg-list {
  width: 280rpx;
  height: 280rpx !important;
  flex-shrink: 0;
  border-radius: 12rpx;
}

.tui-pro-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx;
}

.tui-pro-tit {
  color: #2e2e2e;
  font-size: 26rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tui-price__box {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 12rpx;
}

.tui-price {
  display: flex;
  align-items: flex-end;
  color: #eb0909;
}

.tui-price__small {
  font-size: 24rpx;
  line-height: 24rpx;
}

.tui-price__large {
  font-size: 34rpx;
  line-height: 32rpx;
  font-weight: 600;
}

.tui-price__original {
  font-size: 24rpx;
  line-height: 24rpx;
  text-decoration: line-through;
  color: #999;
  padding-top: 10rpx;
  padding-left: 12rpx;
}

.tui-group-btn {
  max-width: 312rpx;
  height: 48rpx;
  border-radius: 6rpx;
  background: #91d5ff;
  display: flex;
  align-items: center;
  padding: 4rpx;
  margin-top: 10rpx;
  box-sizing: border-box;
}

.tui-flex-btn {
  height: 100%;
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  line-height: 26rpx;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-flex-btn:first-child {
  background: #fff;
}

.tui-group-text {
  font-size: 25rpx;
  line-height: 25rpx;
  transform: scale(0.8);
  transform-origin: 0 center;
  padding-top: 30rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tui-color-red {
  color: #1890ff;
}
.tui-pro--hidden {
  visibility: hidden;
  opacity: 0;
  display: none;
}
</style>