import { CustomVideo, CATEGORIES } from '../../configuration/constants'

export default {

  // 组件名称
  name: CustomVideo,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${CustomVideo}" class="${CustomVideo}" />
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${CustomVideo} {
          width: 400px;
          height: 300px;
          border-width: 1px;
          border-style: solid;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.MEDIA,
      label: `
        <svg t="1588074045716" class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="gjs-block-svg-path" d="M918.613333 305.066667a42.666667 42.666667 0 0 0-42.666666 0L725.333333 379.306667A128 128 0 0 0 597.333333 256H213.333333a128 128 0 0 0-128 128v256a128 128 0 0 0 128 128h384a128 128 0 0 0 128-123.306667l151.893334 75.946667A42.666667 42.666667 0 0 0 896 725.333333a42.666667 42.666667 0 0 0 22.613333-6.4A42.666667 42.666667 0 0 0 938.666667 682.666667V341.333333a42.666667 42.666667 0 0 0-20.053334-36.266666zM640 640a42.666667 42.666667 0 0 1-42.666667 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V384a42.666667 42.666667 0 0 1 42.666666-42.666667h384a42.666667 42.666667 0 0 1 42.666667 42.666667z m213.333333-26.453333l-128-64v-75.093334l128-64z" p-id="2386"></path></svg>
        <div class="gjs-block-label">视频</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '视频',
      icon: 'globe',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      docUrl: "https://xuelangyun.yuque.com/docs/share/004cfb69-f48c-4889-9e39-57ed1ecb9a97?# 《视频组件》",
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: CustomVideo,
      droppable: false,
      draggable: true,
      dmode: 'absolute',
      resizable: true,
      disableChildEdit: true,
      highlightable: false,
      traits: [{
        name: 'defaultSrc',
        label: '视频源',
        changeProp: 1,
      },{
        name: 'autoplay',
        label: '自动播放',
        changeProp: 1,
        type: 'checkbox'
      },{
        name: 'controls',
        label: '视频控件',
        changeProp: 1,
        type: 'checkbox'
      },{
        name: 'loop',
        label: '循环播放',
        changeProp: 1,
        type: 'checkbox'
      },{
        name: 'muted',
        label: '静音',
        changeProp: 1,
        type: 'checkbox'
      },{
        type: 'color',
        name: 'bgColor',
        label: '背景色',
        changeProp: 1,
      }, {
        name: 'borderColor',
        label: '边框色',
        changeProp: 1,
        type: 'color',
      }, {
        name: 'borderRadius',
        label: '圆角(px)',
        type: 'number',
        min: 0,
        step: 1,
        changeProp: 1
      },{
        name: 'objectFit',
        label: 'video填充',
        changeProp: 1,
        type: 'select',
        options: [{id: 'contain', name: '包含(保持长宽比)'}, {id: 'cover', name: '覆盖(保持长宽比)'}, {id: 'fill', name: '填充(打破长宽比)'}]
      }],
      "defaultSrc": '',
      "autoplay": true,
      "controls": true,
      "loop": true,
      "muted": true,
      "bgColor": 'transparent',
      "borderRadius": 0,
      "borderColor": 'transparent',
      "objectFit":'fill',
    }
  },

  onModelScript() {
    const defaultSrc = '{[ defaultSrc ]}';
    const autoplay = Boolean('{[ autoplay ]}');
    const controls = Boolean('{[ controls ]}');
    const loop = Boolean('{[ loop ]}');
    const muted = Boolean('{[ muted ]}');

    const bgColor = '{[ bgColor ]}';
    const borderColor = '{[ borderColor ]}';
    const borderRadius = Number('{[ borderRadius ]}');
    const objectFit = '{[ objectFit ]}';

    const self = this;
    const $video = $(self).find('video');
    Boolean(defaultSrc) ? $video.attr('src', defaultSrc) : $video.attr('src', '#')
    if(autoplay) {
      $video.attr('autoplay', 'autoplay')
    } else {
      $video.removeAttr('autoplay')
    }
    if(controls) {
      $video.attr('controls', 'controls')
    } else {
      $video.removeAttr('controls')
    }
    if(loop) {
      $video.attr('loop', 'loop')
    } else {
      $video.removeAttr('loop')
    }
    if(muted) {
      $video.attr('muted', 'muted')
    } else {
      $video.removeAttr('muted')
    }

    $(self).css({'background-color': bgColor, 'border-color': borderColor, 'border-radius': borderRadius})
    $video.css({ 'background-color': bgColor, 'border-radius': borderRadius, 'object-fit': objectFit, width: '100%', height: '100%'})

    if (window.spSocket) {
      if(window.spNewVideo === undefined) {
        window.spNewVideo = window.sp({
          url: location.protocol + "//" + window.appConfig.dashboardHost,
          path: '/socket/' + window.appConfig.id,
          oss: {
            type: window.appConfig.ossType,
            tokenServer: location.origin
          }
        });
      }
      var eventName = `call-` + self.getAttribute('id');
      // let CurrfileKey = '';
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let value = _data.data.in1;
          console.log("in1:value",value)
          window.spNewVideo.oss.listObject(value).then(function (res) {
            console.log("listObject",res)
            if(res.Contents.length > 0) {
              const fileKey = res.Contents[0].Key
              // if (CurrfileKey !== fileKey) {
              //  CurrfileKey = fileKey;
                window.spNewVideo.oss.getSignedUrl(fileKey).then(function(url) {
                  console.log("getSignedUrl",url)
                  $video.attr('src', url)
                })
              //}
            }
          })
        }
      });
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
      <video src="#" />
      `)
    }
    const evn = `
      change:autoplay
      change:controls
      change:loop
      change:muted
      change:defaultSrc
      change:bgColor
      change:borderColor
      change:objectFit
      change:borderRadius`
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
