<template>
  <view>
	  <van-toast id="van-toast" />
    <van-empty description="暂无数据" v-if="dataList.length === 0" />
    <scroll-view
      :scroll-top="0"
      scroll-y="true"
      class="scroll-box"
      @scrolltolower="lower"
      v-if="dataList.length > 0"
    >
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="list-item"
      >
        <view class="feedback-info flex flex_start_center">
          <image :src="item.TeacherIcon" class="info-headimg" />
          <view class="grow">
            <view class="teacher-name one_line" v-if="item.TeacherName">{{
              item.TeacherName
            }} {{item.CourseName}}</view>
            <view class="rate">
              <van-rate
                :value="item.Score"
                icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/rate.png"
                void-icon=""
                size="24rpx"
              />
            </view>
          </view>
          <view class="feedback-all"> {{ item.ClassDateStr }} {{item.StartTime}}</view>
        </view>
        <view class="feedback-text"> {{ item.Comment }}</view>
        <view class="flex flex_wrap">
          <view
            v-for="(item1, index1) in item.PhotoList"
            :key="index1"
            class="feedback-img"
            v-if="index1 === 0 || index1 === 1 || index1 === 2"
          >
		  <view style="width: 100%; height: 100%;position: relative;">
		  	<image
		  	  :src="item1"
		  	  style="width: 100%; height: 100%"
		  	  mode="aspectFill"
		  	 v-if="item1.indexOf('mp4')===-1"
			  @click="previewImage(item1, index1)"
		  	/>
			<video :id="'myVideo'+index1" :src="item1" style="width: 100%; height: 100%"
						:controls='controls' 
						:show-center-play-btn='false'
						:show-fullscreen-btn='false' 
						@fullscreenchange='videoControl'
						v-if="item1.indexOf('mp4')!=-1"
			></video>
			<view  @click="enlarge(index1)" v-if="item1.indexOf('mp4')!=-1"
							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,.4);display: flex;align-items: center;justify-content: center;">
							<!-- 播放按钮 -->
				<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
              class="layer"
              v-if="item.PhotoList.length > 3 && index1 === 2"
            ></view>
            <view
              class="layer2 flex flex_center_center"
              v-if="item.PhotoList.length > 3 && index1 === 2"
              >+{{ item.PhotoList.length - 3 }}</view
            >
          </view>
        </view>
      </view>
      <Loadmore :state="pageState" />
    </scroll-view>
  </view>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import Loadmore from "../../components/loadmore.vue";
import { getClassFeedBackList } from "../../api/index";
export default {
  components: {
    Loadmore,
  },
  setup(props) {
    let data = reactive({
      msg: {
        PageIndex: 1,
        PageSize: 10,
      },
      dataList: [],
      pageState: "more",
      pageCount: 0,
      timer: null, //防抖
	  controls:false,//显示默认控件
	  videoContext:null
    });
    let methods = {
      async getList() {
        let res = await getClassFeedBackList(data.msg);
        if (res) {
          if (data.timer) data.timer = null;
          if (data.msg.PageIndex === 1) {
            data.dataList = res.Data.PageData;
          } else {
            data.dataList = [...res.Data.PageData, ...data.dataList];
          }
          data.pageCount = res.Data.PageCount;
          if (data.msg.PageIndex >= res.Data.PageCount) {
            data.pageState = "none";
          } else {
            data.pageState = "more";
          }
        }
      },
      lower(e) {
        if (data.msg.PageIndex < data.pageCount) {
          data.pageState = "loading";
          data.msg.PageIndex++;
          if (data.timer) clearTimeout(data.timer);
          data.timer = setTimeout(() => {
            that.getList();
          }, 1000);
        } else {
          data.pageState = "none";
        }
      },
      previewImage(item,i) {
		  let arr=[item]
        uni.previewImage({
          urls: arr,
          current: i,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {},
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      },
	  			enlarge(i) {
	  				// 全屏
	  				data.videoContext = uni.createVideoContext('myVideo'+i);
	  				data.videoContext.requestFullScreen({direction: 0})
	  			},
	  			videoControl(e){
					console.log(156,e)
	  				if(e.detail.fullScreen==false){
	  					data.videoContext.stop()
	  					data.controls=false
	  				}else{
	  					data.videoContext.play()
	  					data.controls=true
	  				}
	  			},
    };
    let that = methods;
    onMounted(() => {
      that.getList();
    });
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "课程反馈",
    });
  },
};
</script>
<style scoped>
.scroll-box {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  margin-top: 10rpx;
  background-color: #fff;
}
.list-item {
  /* height: 430rpx; */
  box-sizing: border-box;
  padding: 30rpx 0;
  border-bottom: 1px solid #e2e2e2;
}
.feedback-info {
  height: 60rpx;
}
.info-headimg {
  width: 60rpx;
  height: 60rpx;
  background-color: #c4a1a1;
  border-radius: 50%;
  margin-right: 20rpx;
}
.teacher-name {
  max-width: 400rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.feedback-all {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.feedback-text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #111111;
  margin: 20rpx 0;
}
.feedback-img {
  width: 210rpx;
  height: 210rpx;
  border-radius: 20rpx;
  background-color: #eee;
  overflow: hidden;
  margin-right: 30rpx;
  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
  position: relative;
}
.feedback-img:nth-child(3n) {
  margin-right: 0rpx !important;
}
.layer {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  background-color: #cbd9ed;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
}
.layer2 {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}
</style>