<template>
  <view>
    <view class="container" v-for="(item, index) in photoDetail" :key="item.id">
      <view class="article_head">
        <view class="title">{{ item.photo_task_type.name /* item.title */ }}</view>
        <view class="right">{{ item.put_date }}</view>
      </view>
      <view class="line"></view>
      <view v-for="option of getOptions(item)" class="step_box">
        <view class="tep_one">
          <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
          <view class="one">{{ option.name }}</view>
        </view>
        <view class="photo_list">
          <view class="photo_item" v-for="(val, index) in mediaList.filter(v => v.type === option.type)" :key="val.id" @click="previewVideo(val, index)">
            <image v-if="val.type === 'image'" mode="aspectFill" :src="val.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
            <view v-else class="play-wrapper">
              <video :controls="video.fullscreen" :object-fit="videoFit" :id="`myVideo${index}`" class="upload_img" :src="val.url" @fullscreenchange="onVideoFullscreenChange" />
              <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
            </view>
          </view>
        </view>
      </view>
      <view class="step_box">
        <view class="tep_one">
          <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
          <view class="one">上报内容</view>
        </view>
        <view class="photo_list">
          <view class="content">
            <rich-text :nodes="item.content" />
          </view>
        </view>
      </view>

      <view class="step_box">
        <view class="tep_one">
          <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_didian@2x.png" />
          <view class="one">拍摄地点</view>
        </view>
        <view class="photo_list">
          <view class="address">{{ item.position }}</view>
        </view>
      </view>
      <view class="step_box">
        <view class="tep_one">
          <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_shz_jg@2x.png" />
          <view class="one">审核结果</view>
        </view>
        <view class="photo_list examine" v-if="item.status === 1">
          <image mode="aspectFill" src="/static/icon/ic_shz@2x.png" class="examine_icon" />
          <view class="examine_status">审核中</view>
        </view>
        <view class="examine_reason" v-if="item.status === 2">
          <view class="examine_result">
            <image mode="aspectFill" src="/static/icon/ic_ytg@2x.png" class="examine_icon" />
            <view class="examine_status2">已通过</view>
          </view>
          <view class="result">已获得{{ getPrice(item.photo_task_type.points) }}元奖励</view>
        </view>
        <view class="examine_reason" v-if="item.status === 3">
          <view class="examine_result">
            <image mode="aspectFill" src="/static/icon/ic_wtg@2x.png" class="examine_icon" />
            <view class="examine_status3">未通过</view>
          </view>
          <view class="result">{{ item.remark }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      query: {},

      status: 1,
      id: null,
      photoList: [],
      mediaList: [],
      photoDetail: [],
      video: {
        ctx: null,
        fullscreen: false
      }
    };
  },
  computed: {
    videoFit() {
      return this.video.fullscreen ? 'contain' : 'cover'
    }
  },
  onLoad(query) {
    this.query = query;
    this.fetchPhotoDetail();
  },
  methods: {
    async fetchPhotoDetail() {
      const { detail } = await uni.$u.http.get('/api/app/phototask/detail', { params: { id: this.query.id } });

      const dataList = [detail];

      dataList.forEach((item) => {
        item.image_list = item.image_list ? item.image_list.split(',') : [];
        item.video_list = item.video_list ? item.video_list.split(',') : [];
        item.put_date = item.put_date.substring(0, 16);
        item.image_list.forEach((element) => {
          this.mediaList.push({
            id: uni.$u.guid(),
            type: 'image',
            url: element,
          });
        });
        item.video_list.forEach((element, index) => {
          this.mediaList.push({
            id: uni.$u.guid(),
            type: 'video',
            url: element,
          });
        });
      });
      this.mediaList = this.mediaList.map((value, index) => ({
        ...value,
        videoContext: uni.createVideoContext(`myVideo${index}`),
      }));

      this.photoDetail = dataList;
    },

    // 预览视频
    previewVideo(item, index) {
      if (item.type === 'video') {
        // this.mediaList[index].videoContext.requestFullScreen();
        const ctx = this.video.ctx = uni.createVideoContext(`myVideo${index}`)
        ctx.play()
        // HACK: iOS 需要延迟一下才能全屏
        setTimeout(() => {
          ctx.requestFullScreen()
        }, uni.$u.os() === 'ios' ? 300 : 0)
      }
      if (item.type === 'image') {
        uni.previewImage({
          urls: [item.url],
        });
      }
    },

    onVideoFullscreenChange(e) {
      const { fullScreen } = e.detail
      this.video.fullscreen = fullScreen

      if (!fullScreen) {
        this.video.ctx.pause()
      }
    },

    getOptions(detail) {
      const actionsOptions = [
        {
          name: '照片',
          type: 'image',
        },
        {
          name: '视频',
          type: 'video',
        }
      ]

      const res = []
      if (detail.image_list?.length > 0) {
        res.push(actionsOptions[0])
      }
      if (detail.video_list?.length > 0) {
        res.push(actionsOptions[1])
      }
      return res
    }
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';

::v-deep .uni-video-container {
  // iOS 要在 video 父元素上设置才生效
  border-radius: 16rpx;
}

// HACK: 上面的 :controls="false" 不生效
::v-deep .uni-video-cover {
  display: none;
}
</style>
