<template>
  <div>
    <van-loading
      v-if="uploadLoading"
      type="spinner"
      class="loading_box"
      vertical
      text-color="#fff"
      text-size='16'
    >
      上传中，请勿退出...
    </van-loading>
    <x-header :left-options="{backText: '',showBack:true}">
      内镜视频
      <div
        class="uploadBtn"
        slot="right"
      >
        <van-uploader
          :after-read="afterRead"
          :max-count='1'
          accept='video/*'
        >
          <van-button type="text">上传文件</van-button>
        </van-uploader>
      </div>
    </x-header>

    <!-- 列表 -->
    <v-content
      has-header
      :has-footer="false"
    >
      <van-list
        :immediate-check='false'
        class="list_content"
        ref="scroller"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="100"
        @load="onLoad"
      >
        <van-row
          type="flex"
          justify="space-between"
        >
          <van-col
            v-for="(item,index) in videoList"
            :key="index"
            class="col"
          >
            <!-- 图片 -->
            <div class="img_box">
              <van-image
                id="video"
                :src="'https://inno.sh-sict.com/gastric/gastric-resources/' + item.coverUrl"
              />
              <div class="start_icon">
                <van-icon
                  name="play-circle-o"
                  size="50"
                  color='#e6e6e6'
                  @click="showVideo(item.videoName)"
                />
              </div>

            </div>
            <div
              class="van-ellipsis"
              style="font-size:12px;"
            >
              {{item.videoName}}
            </div>
            <div class="label van-ellipsis">
              {{item.createTime}}
            </div>
            <div class="label van-ellipsis">
              <a>诊断详情</a>
              <a
                style="color:#127BFF;"
                @click="showPop(item)"
              >点击查看</a>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </v-content>
    <van-popup
      v-model="show"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <div class="pop_content">
        <div class="item">
          <div class="label">
            诊断日期：
          </div>
          <div class="value">
            {{ describe.diagnosisTime || '--' }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            诊断所见：
          </div>
          <div class="value">
            {{ describe.finding || '--' }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            诊断结果：
          </div>
          <div class="value">
            {{ describe.diagnosis || '--' }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// 引入
import { uploadByPieces } from '../utils/upload'
export default {
  name: 'videoList',
  data () {
    return {
      show: false,
      describe: {},//诊断详情
      videoList: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      uploadLoading: false
    }
  },
  methods: {
    onLoad () {
      if (!this.finished) {
        this.pageNum++
        this.getVideoList()
      }
    },
    getVideoList () {
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        dataId: this.$route.query.id
      }
      this.$API.getVideoList(data).then(res => {
        this.loading = false
        if (res.code == 1) {
          this.totalCount = res.object.totalCount
          this.videoList = [...this.videoList, ...res.object.list]
        }
        if (this.videoList.length >= this.totalCount) {
          this.finished = true
        }
      })
    },
    showPop (data) {
      this.show = true
      this.describe = data
    },
    showVideo (url) {
      var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
      // if (isIphone) {
      //   window.open('https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + url, '_self')
      // } else {
        this.$router.push(`/videoShow?src=${url}`)
      // }

    },
    afterRead (file) {
      this.uploadLoading = true
      // console.log(file);
      let dataId = this.$route.query.id
      let randomNum = dataId + '' + Math.round(Math.random() * 10000)
      uploadByPieces({
        randoms: randomNum, // 随机数，这里作为给后端处理分片的标识 根据项目看情况 是否要加
        file: file.file, // 视频实体
        pieceSize: 10, // 分片大小
        dataId: dataId,
        success: data => {
          console.log('分片上传视频成功', data)

          // 合并
          this.$API.fileMerge({
            dataId: dataId,
            videoName: data.videoName,
            id: randomNum
          }).then(res => {
            this.uploadLoading = false
            this.pageNum = 1
            this.videoList = []
            this.getVideoList()
          })
        },
        error: e => {
          console.log('分片上传视频失败', e)
          this.uploadLoading = false
        }
      })
    },
  },
  mounted () {
    this.videoList = []
    this.getVideoList()
  },
  activated () {
    const scrollTop = this.$route.meta.scrollTop;
    const $content = document.querySelector('.list_content');
    if (scrollTop && $content) {
      this.$nextTick(() => {
        console.log(scrollTop);
        document.querySelector('.list_content').scrollTop = scrollTop;
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path != '/videoShow') {
      from.meta.keepAlive = false
    } else
      if (to.path == '/videoShow') {
        from.meta.keepAlive = true
        const $content = document.querySelector('.list_content'); // 列表的外层容器
        const scrollTop = $content ? $content.scrollTop : 0;
        from.meta.scrollTop = scrollTop;
      }
    next()
  }
}
</script>
<style lang="scss" scoped>
.content {
  background: rgb(246, 246, 246);
}
.list_content {
  padding: 14px 14px;
  height: 100%;
  overflow: auto;
  .col {
    width: 48%;
    padding: 10px;
    background: #fff;
    margin-bottom: 10px;
    .label {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
  }
}
#video {
  width: 100%;
  height: 150px;
  img {
    display: block;
    margin: 0;
    padding: 0;
  }
}
.uploadBtn {
  transform: translateY(-16px) translatex(12px);
  color: #fff;
}
.img_box {
  position: relative;
  .start_icon {
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.pop_content {
  padding: 20px;
  .item {
    display: flex;
    margin-bottom: 10px;
    .label {
      color: #127bff;
    }
    .value {
      color: #444;
    }
  }
}
.loading_box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
</style>