<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 15:25:33
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-14 11:30:52
 * @Description: 应用展示  视频播放
-->
<template>
  <div class="application-presentation" v-if="flag">
    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
    <div
      class="main"
      :style="`${img}background-position:center;background-size:cover;`"
    >
      <!-- <a-image :src="img"></a-image> -->
      <div class="play" @click="showModal"></div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="视频预览"
      :width="750"
      destroyOnClose
    >
      <template #footer></template>
      <div style="width: 100%; display: flex; justify-content: center">
        <div style="width: 100%; height: 100%">
          <vue3VideoPlay v-bind="options" />
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
  import { ref, reactive, defineProps, watch } from 'vue'
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const visible = ref(false)
  const options = reactive({
    width: '7.00rem', //播放器宽度
    height: '4.00rem', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ], //显示所有按钮,
  })
  const showModal = () => {
    visible.value = true
  }
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const flag = ref(true)
  const img = ref({})
  console.log('111111111111111111111,', props.dataList)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '组件视频介绍'
    )[0]
    console.log('视频==============>', obj)
    if (!obj) {
      flag.value = false
    } else {
      let imgindex = props.dataList.infoList.filter(
        (item) => item.attrType === '组件图片'
      )[0]
      options.src = obj.attrValue
      if (imgindex) {
        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
      }
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter(
          (item) => item.attrType === '组件视频介绍'
        )[0]
        console.log('视频==============>', obj)
        if (!obj) {
          flag.value = false
        } else {
          let imgindex = props.dataList.infoList.filter(
            (item) => item.attrType === '组件图片'
          )[0]
          options.src = obj.attrValue
          if (imgindex) {
            img.value =
              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
          }
        }
      }
    }
  )
</script>
<style lang="less" scoped>
  .application-presentation {
    padding: 0.8rem 3rem 0;
    .main {
      height: 3.4rem;
      border-radius: 0.1rem;
      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
      background-size: 100%;
      margin-top: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .play {
        width: 0.96rem;
        height: 0.96rem;
        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
        background-size: 100%;
        cursor: pointer;
      }
    }
  }
</style>
