<template>
  <div class="container">
    <Header title="课程详情" />
    <div class="main" style="background-color: #f7f8fa">
      <ul>
        <li>
          <span>标题</span>
          <span> {{ detail.courseTitle?detail.courseTitle:"-" }} </span>
        </li>
        <li>
          <span>课件名称</span>
          <span> {{ detail.coursewareName?detail.coursewareName:"-" }} </span>
        </li>
        <li>
          <span>作者</span>
          <span> {{ detail.categoriesAuthor?detail.categoriesAuthor:"-" }} </span>
        </li>
        <li>
          <span>简介</span>
          <span> {{ detail.categoriesBriefIntroduction?detail.categoriesBriefIntroduction:"-" }} </span>
        </li>
        <li>
          <span>主讲老师</span>
          <span> {{ detail.categoriesLecturer?detail.categoriesLecturer:"-" }} </span>
        </li>
        <li>
          <span>重要内容</span>
          <span> {{ detail.importantContent?detail.importantContent:"-" }} </span>
        </li>
        <li>
          <span>课件地址</span>
          <span style="color: #4000ee;" @click="gotoUrl(detail.coursewareUrl)"> {{ detail.coursewareName }} </span>
        </li>
        <div style="height: 30vh; margin-top: 15px">
          <vueMiniPlayer
            v-if="isLookMp4"
            ref="vueMiniPlayer"
            :video="video"
            :mutex="true"
            @fullscreen="handleFullscreen"
          />
          <van-popup v-model="show1" round closeable  :style="{ height: '100%',width:'100%',background:'#f2f2f2' }">
    <PreviewpdfH5 ref="previewPdfh5"/>
      </van-popup>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import PreviewpdfH5 from '@/components/pdfh5/PreviewpdfH5'
import { mapState } from 'vuex'
import { convertImageToBase64Str } from '@/api/trainList/index.js'
export default {
  name: 'TrainList',
  components: {
    PreviewpdfH5
  },
  data () {
    return {
      show1: false,
      isLoading: false,
      detail: {},
      video: {
        url: '',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      },
      isLookMp4: false,
      isLookPdf: false
    }
  },
  computed: {
    ...mapState('baseUrl', ['baseUrl']),

    // 视频组件
    $video () {
      return this.$refs.vueMiniPlayer.$video
    }
  },
  mounted () {
    this.detail = this.$route.query.item
  },

  methods: {
    handleFullscreen () {},
    gotoUrl (url) {
      console.log(url)
      if (url.split('.')[url.split('.').length - 1] === 'mp4') {
        this.video.url = this.baseUrl + url
        this.isLookMp4 = true
      } else if (url.split('.')[url.split('.').length - 1] === 'pdf') {
        this.pdfLook(url)
      } else {
        Android.downloadFile(url)
      }
    },
    pdfLook (url) {
      convertImageToBase64Str(url).then(res => {
        console.log(res, 'res')
        if (res.data.code !== 200) {
          this.$notify({
            type: 'danger',
            message: res.data.msg,
            duration: 1000
          })
          return
        }
        this.show1 = true
        this.$nextTick(() => {
          console.log(res.data.msg, '数据返回了！')
          this.$refs.previewPdfh5.openPdf(res.data.msg)
        })
      })
    },
    // 固定写法
    dataURLtoBlob (dataurl) {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      // eslint-disable-next-line no-plusplus
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    downloadFile (url, name) {
      const a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      const clickEvent = document.createEvent('MouseEvents')
      clickEvent.initEvent('click', true, true)
      a.dispatchEvent(clickEvent)
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  height: auto;

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 0.1rem;
    border: 1px solid #f5f6f7;
    min-height: 1rem;
    padding: 0 0.2rem;

    span:nth-child(1) {
      flex: 3;
      text-align: left;
    }
    span:nth-child(2) {
      flex: 9;
      text-align: right;
      color: #969799;
    }
  }
}
</style>
