/**
 * 视频上传组件
 * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
 *
 * */
import Editor from '@/webPublic/zyd_public/WangEditor/includes/wangEditor.min';
import { message } from 'antd';
import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import videoSvg from './video.svg';

const E = Editor;
const { BtnMenu } = E;
window.message = message;

export default class VideoMenu extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class='w-e-menu' data-title='Alert' style='position: relative;'>
<img src='${videoSvg}' alt='video' style='width: 18px;height: 18px;'/>
</div>`,
    );
    super($elem, editor);
  }

  // 菜单点击事件
  clickHandler() {
    // 做任何你想做的事情
    // 可参考【常用 API】文档，来操作编辑器
    let dom = document.createElement('input');
    dom.accept = '.MP4,.Ogg,.WebM,.WAV';
    dom.type = 'file';
    dom.onchange = (v) => {
      if (dom.files && dom.files.length) {
        window.message.info('正在上传文件, 请耐心等待');
        const file = dom.files[0];
        const fileName = file.name;
        uploadFile(file).then((res) => {
          if (res && res.length > 10) {
            let url = queryApiActionPath() + res;
            setTimeout(()=>{
              window.message.success('上传成功');
              this.editor.txt.append(`
<p class='wangEditor-videoReader' style='text-align: center;'>
<video
      src='${url}'
      style='max-height: 500px; max-width:100%; text-align: center;'
      controls='true'
      controlsList="nodownload noplaybackrate"
      disablePictureInPicture='true'
  />
</p>
<p class='wangEditor-aHref'><a href='${url}' target='_blank' download='${fileName}'>${fileName}</a></p>`);
            }, 2000);

          }
        });
      }
    };
    dom.click();
  }

  // 菜单是否被激活（如果不需要，这个函数可以空着）
  // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
  // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
  tryChangeActive() {
    // 激活菜单
    // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
    // 2. this.this.isActive === true
    this.active();

    // // 取消激活菜单
    // // 1. 菜单 DOM 节点会删掉 .w-e-active
    // // 2. this.this.isActive === false
    // this.unActive()
  }
}