<template>
  <BaseSameLayer
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/midea-iotlinkvideo-view"
    :defaultWidth="300"
    :defaultHeight="300"
  ></BaseSameLayer>
</template>

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

export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  name: 'MideaIotlinkvideoView',
  components: {
    BaseSameLayer,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
    url: {
      type: String,
      default: '',
    },
    videoResize: {
      // videoResize?: 0 | 1 | 2; // 0=Aspect,1=AspectFill,2=Resize（容器表现）
      type: Number,
      default: '',
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    videoCover: {
      type: String,
      default: '',
    },
    bottomShadow: {
      type: Object,
      default: () => {},
    },
    isSupportScale: {
      type: Boolean,
      default: false,
    },
    controls: {
      type: Boolean,
      default: false,
    },
    topShadow: {
      type: Object,
      default: () => {},
    },
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        data: this.data,
        src: this.src,
        url: this.url,
        videoResize: this.videoResize,
        autoplay: this.autoplay,
        videoCover: this.videoCover,
        bottomShadow: this.bottomShadow,
        isSupportScale: this.isSupportScale,
        controls: this.controls,
        topShadow: this.topShadow,
        hosUniqueProps: this.hosUniqueProps,
        onPlayerClick: this.onPlayerClick,
        onMoveControl: this.onMoveControl,
        onScaleControl: this.onScaleControl,
        onMoveEnd: this.onMoveEnd,
        onStatePrepared: this.onStatePrepared,
        onAutoCompletion: this.onAutoCompletion,
        onStateAutoComplete: this.onStateAutoComplete,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },
  watch:{
    url(newV){
      console.log('cdj-------------url',newV)
    }
  },  
  methods: {
    captureImage(params,callback) {
      delete params.refId
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'captureImage',
          name: this.embedId,
          params
        },
        callback
      );
    },
    switchVideoQuality(params,callback) {
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'switchVideoQuality',
          name: this.embedId,
          params
        },
        callback
      );
    },
    getVideoNetworkSpeed(params,callback) {
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'getVideoNetworkSpeed',
          name: this.embedId,
          params
        },
        callback
      );
    },
    startRecord(params,callback) {
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'startRecord',
          name: this.embedId,
          params
        },
        callback
      );
    },
    stopRecord(params,callback) {
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'stopRecord',
          name: this.embedId,
          params
        },
        callback
      );
    },
    changeAudioStatus(params,callback){
      weexModule.callNative(
        'iotLinkApi',
        {
          method: 'changeAudioStatus',
          name: this.embedId,
          params
        },
        callback
      );
    },
    // 自定义拓展其它逻辑
    onPlayerClick(res) {
      this.$emit('onPlayerClick', res);
    },

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

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

    onMoveEnd(res) {
      this.$emit('onMoveEnd', res);
    },
    onStatePrepared() {
      this.$emit('onStatePrepared');
    },
    onAutoCompletion() {
      this.$emit('onAutoCompletion');
    },
    onStateAutoComplete() {
      this.$emit('onStateAutoComplete');
    },
  },
};
</script>
