<template>
  <view>
    <view v-if="!isId" class="box">
      <view class="nodata" v-if="dataList.length === 0"> 暂无内容 </view>
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="img-box"
        style="position: relative"
        v-if="dataList.length > 0"
      >
        <image
          :src="item.Path"
          mode="aspectFill"
          class="img"
          v-if="item.Type == 1"
          @click="previewImage(index)"
        ></image>
        <video
          :id="'myVideo' + index"
          :src="item.Path"
          style="width: 215rpx; height: 215rpx"
          :controls="controls"
          :show-center-play-btn="false"
          :show-fullscreen-btn="false"
          @fullscreenchange="videoControl"
          v-if="item.Type == 2"
        ></video>
        <view
          @click="enlarge(index)"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -49rpx;
            margin-left: -49rpx;
            width: 98rpx;
            height: 98rpx;
            border-radius: 20rpx;
            background-color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
          "
          v-if="item.Type == 2"
        >
          <!-- 播放按钮 -->
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
            style="width: 37rpx; height: 44rpx"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <view
      style="padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
      v-if="isId"
    >
      图片
    </view>
    <view v-if="isId" class="box">
      <view class="nodata" v-if="imgList.length === 0"> 暂无内容 </view>
      <view
        v-for="(item, index) in imgList"
        :key="index"
        class="img-box"
        style="position: relative"
        v-if="imgList.length > 0"
      >
        <image
          :src="item.Path"
          mode="aspectFill"
          class="img"
          v-if="item.Type == 1"
          @click="previewImage(index)"
        ></image>
      </view>
    </view>
    <view
      style="padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
      v-if="isId"
    >
      视频
    </view>
    <view v-if="isId" class="box">
      <view class="nodata" v-if="videolist.length === 0"> 暂无内容 </view>
      <view
        v-for="(item, index) in videolist"
        :key="index"
        class="img-box"
        style="position: relative"
        v-if="videolist.length > 0"
      >
        <video
          :id="'myVideo' + index"
          :src="item.Path"
          style="width: 215rpx; height: 215rpx"
          :controls="controls"
          :show-center-play-btn="false"
          :show-fullscreen-btn="false"
          @fullscreenchange="videoControl"
          v-if="item.Type == 2"
        ></video>
        <view
          @click="enlarge(index)"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -49rpx;
            margin-left: -49rpx;
            width: 98rpx;
            height: 98rpx;
            border-radius: 20rpx;
            background-color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
          "
          v-if="item.Type == 2"
        >
          <!-- 播放按钮 -->
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
            style="width: 37rpx; height: 44rpx"
            mode=""
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      boxOption: 0,
      navsOption: 0,
      titleStyle: {},
      active: 0,
      mainColor: "",
      likeStatus: false,
      controls: false, //显示默认控件
      dataList: [],
      preImg: [],
      videoContext: null,
      imgList: [],
      videolist: [],
      isId: false,
    };
  },

  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "相册详情",
    });
    this.mainColor = this.$uiConfig.mainColor;
    if (options.data) {
      let res = JSON.parse(decodeURIComponent(options.data));
      this.dataList = res.data;

      this.dataList.map((e) => {
        this.preImg.push(e.Path);
      });
      console.log(this.dataList);
    }
    if (options.Id && options.Id > 0) {
      this.GetActivityDetial(options.Id);
      this.isId = true;
    }
  },
  methods: {
    GetActivityDetial(Id) {
      this.request2(
        {
          url: "/api/AppletEducation/GetActivityDetial",
          data: { Id: Id },
        },
        (res) => {
          let FileGroup = res.data.FileGroup;
          this.imgList = [];
          this.videolist = [];
          FileGroup.forEach((x) => {
            if (x.Key == 1) {
              //图片
              if (x.groupList && x.groupList.length > 0) {
                x.groupList.forEach((j) => {
                  this.imgList.push(...j.FileList);
                });
              }
            } else {
              if (x.groupList && x.groupList.length > 0) {
                x.groupList.forEach((j) => {
                  this.videolist.push(...j.FileList);
                });
              }
            }
          });
          console.log(this.imgList, this.videolist);
          this.imgList.map((e) => {
            this.preImg.push(e.Path);
          });
        }
      );
    },
    previewImage(i) {
      console.log(i);
      uni.previewImage({
        urls: this.preImg,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {},
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    scroll(e) {
      this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
      this.titleStyle.opacity =
        (e.detail.scrollTop - 100 < 0
          ? 0
          : Math.floor(e.detail.scrollTop - 100)) + "%";
      this.$forceUpdate();
    },
    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },

    enlarge(i) {
      // 全屏
      this.videoContext = uni.createVideoContext("myVideo" + i);
      this.videoContext.requestFullScreen({
        direction: 0,
      });
    },
    videoControl(e) {
      if (e.detail.fullScreen == false) {
        this.videoContext.stop();
        this.controls = false;
      } else {
        this.videoContext.play();
        this.controls = true;
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.box {
  margin: 30rpx;
  display: flex;
  flex-wrap: wrap;
  & .img-box:nth-child(3n) {
    margin-right: 0rpx !important;
    background-color: #000000;
  }
  .img-box {
    width: 215rpx;
    height: 215rpx;
    border-radius: 12rpx;
    bottom: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1rpx solid #eeeeee;
    overflow: hidden;
  }
  .img {
    width: 215rpx;
    height: 215rpx;
    border-radius: 12rpx;
  }
}
.nodata {
  width: 100%;
  text-align: center;
}
</style>