<template>
  <view>
    <view class="container" v-for="(item, index) in photoDetail" :key="item.id">
      <view class="article_head">
        <view class="title">{{ item.title }}</view>
        <view class="right">{{ item.put_date }}</view>
      </view>
      <view class="line"></view>
      <view class="step_box">
        <view class="tep_one">
          <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
          <view class="one">上传照片</view>
        </view>
        <view class="photo_list">
          <view class="photo_item" v-for="(val, index) in mediaList" :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 :id="`myVideo${index}`" class="upload_img" :src="val.url" />
              <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: [],
    };
  },
  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();
      }
      if (item.type === 'image') {
        uni.previewImage({
          urls: [item.url],
        });
      }
    },
  },
};
</script>

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