<template>
  <BaseSameLayer
    :hosSameLayerArgs="hosSameLayerArgs"
    ref="sameLayer"
    embedType="native/midea-ijkplayer-view"
    :defaultWidth="'100%'"
    :defaultHeight="'100%'"
    :embedWidth="embedWidth"
    :embedHeight="embedHeight"
    :style="
      embedPosition !== 'fixed'
        ? { position: embedPosition }
        : {
            position: embedPosition,
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 1
          }
    "
  ></BaseSameLayer>
</template>

<script>
import BaseSameLayer from './baseSameLayer.vue';
const weexModule = weex.requireModule('weexModule');

export default {
  data() {
    return {
      width: 0,
      height: 0,
      embedWidth: '100%',
      embedHeight: '100%',
      embedPosition: 'static',
      defaultWidth: '100%',
      defaultHeight: '100%',
    };
  },
  name: 'MideaIjkplayerView',
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    config: {
      type: Object,
      default() {
        return {};
      },
    },
    muted: {
      type: Boolean,
      default: false,
    },
    playStatus: {
      type: String,
      default: 'normal',
    },
    needDownload: {
      type: Boolean,
      default: false,
    },
    isSupportScale: {
      type: Boolean,
      default: false,
    },
    videoResize: {
      type: Number,
      default: 0,
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    videoCover: {
      type: String,
      default: '',
    },
    uiVisible: {
      type: Object,
      default() {
        return {
          voiceBtnVisible: true,
          speedBtnVisible: true,
          captureBtnVisible: true,
          downloadBtnVisible: true,
          batteryTimeLayoutVisible: false,
        };
      },
    },
    speedList: {
      type: Array,
      default() {
        return ['0.5', '1', '1.5', '2'];
      },
    },
    extraInfo: {
      type: String,
      default: '',
    },
    deleteBtnVisible: {
      type: Number,
      default: 0,
    },
    downloadDir: {
      type: String,
      default: '',
    },
    albumName: {
      type: String,
      default: '',
    },
    src: {
      type: String,
      default: '',
    },
    isShowTopRightViewOnPortrait: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        onFullscreenChange: this.onFullscreenChange,
        // 视频播放器相关属性
        config: this.config,
        muted: this.muted,
        playStatus: this.playStatus,
        needDownload: this.needDownload,
        isSupportScale: this.isSupportScale,
        videoResize: this.videoResize,
        autoplay: this.autoplay,
        videoCover: this.videoCover,
        uiVisible: this.uiVisible,
        speedList: this.speedList,
        extraInfo: this.extraInfo,
        deleteBtnVisible: this.deleteBtnVisible,
        downloadDir: this.downloadDir,
        albumName: this.albumName,
        data: this.data,
        src: this.src,
        isShowTopRightViewOnPortrait: this.isShowTopRightViewOnPortrait,

        // 事件回调
        onProgress: this.onProgress,
        onStart: this.onStart,
        onPause: this.onPause,
        finish: this.finish,
        onFail: this.onFail,
        onReadyToPlay: this.onReadyToPlay,
        deleteVideo: this.deleteVideo,
        onDownloadSuccess: this.onDownloadSuccess,
        onStartDownload: this.onStartDownload,
        onPreviewImageClick: this.onPreviewImageClick,
        onCaptureCompletion: this.onCaptureCompletion,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
    this.windowWidth = window.innerWidth;
    this.windowHeight = window.innerHeight;
    this.$nextTick(() => {
      this.defaultWidth = this.$refs.sameLayer.$el.clientWidth;
      this.defaultHeight = this.$refs.sameLayer.$el.clientHeight;
      this.defaultPosition =
        this.$refs.sameLayer.$el.style.position || 'static';
    });
  },
  methods: {
    captureImage(params,callback) {
      delete params.refId
      weexModule.callNative(
        'ijkLinkApi',
        {
          method: 'captureImage',
          name: this.embedId,
          params
        },
        callback
      );
    },
    finishFullScreen(){
      try{
        this.$bridge.setPageOrientation({ orientation: 0 })
      }catch(e){
      }
      this.embedPosition = this.defaultPosition;
      this.embedHeight = this.windowHeight;
      this.embedWidth = this.windowWidth;
    },
    disabledEvent(){
      document.body.style.pointerEvents = 'none'
      setTimeout(()=>{
        document.body.style.pointerEvents = 'auto'
      },1000)
    },
    onFullscreenChange(isFullScreeen) {
      this.disabledEvent()
      if (isFullScreeen.flag) {
        this.embedPosition = 'fixed';
        this.embedHeight = this.windowWidth;
        this.embedWidth = this.windowHeight;
      } else {
        this.embedPosition = this.defaultPosition;
        this.embedHeight = this.defaultHeight;
        this.embedWidth = this.defaultWidth;
      }
    },
    // 自定义拓展其它逻辑
    onProgress(res) {
      this.$emit('onProgress', res);
    },

    onStart(res) {
      this.$emit('start', res);
    },

    onPause(res) {
      this.$emit('Pause', res);
    },

    finish(res) {
      this.$emit('finish', res);
    },

    onFail(res) {
      this.$emit('fail', res);
    },

    onReadyToPlay(res) {
      this.$emit('readyToPlay', res);
    },

    deleteVideo(res) {
      this.$emit('deleteVideo', res);
    },

    onDownloadSuccess(res) {
      this.$emit('onDownloadSuccess', res);
    },

   onStartDownload(res) {
      this.$emit('onStartDownload', res);
    },

    onPreviewImageClick(res) {
      this.$emit('onPreviewImageClick', res);
    },
    onCaptureCompletion(res){
      this.$emit('onCaptureCompletion', res);
    }
  },
  destroy(){
      this.embedPosition = this.defaultPosition;
      this.embedHeight = this.defaultHeight;
      this.embedWidth = this.defaultWidth;
      document.body.style.pointerEvents = 'auto'
  }
};
</script>
