

/* 

window.courseware.getData(callback,key);  //用于获取数据
window.courseware.setData(data,callback,key);  //用于存储数据
var uploadUrl = window.courseware.uploadUrl();  //上传文件的路径
var uploadData = window.courseware.uploadData();  //上传文件必须要的参数 

*/

//对应模板的名称，这个可以不写，但是最好是能写上，同时开发多个模板的情况下如果不写这个，本地缓存可能会存在混乱
var key = "JMXS03";

var formView;

class FormView {

  data;

  init() {

    this.initDefaultData();

    this.initView();
  }

  initDefaultData() {

    if (!this.data) {
      this.data = {};
      this.save();
    }

    if (!this.data.videoArr) {
      this.data.videoArr = [];
      this.save();
    }

  }

  initView() {

    const _this = this;

    $("#title1").val(this.data.title1);

    $("#title2").val(this.data.title2);

    $("#title1").change(function () {
      _this.data.title1 = $(this).val();
      _this.save();
    })

    $("#title2").change(function () {
      _this.data.title2 = $(this).val();
      _this.save();
    });

    const videoArr = _this.data.videoArr;

    //循环设置video信息
    for (let i = 0; i < videoArr.length; ++i) {

      const videoPanel = addVideo();
      $(videoPanel).find(".video").attr('src', videoArr[i]).show();

    }
  }

  bindVideoUpload(dom) {

    const _this = this;

    dom.find("[name='video']").change(function () {
      const files = $(this).prop('files');
      $(this).attr("disabled", true);
      $(this).prev().text("上传中...");
      commonUploadFile(files[0], (data) => {
        $(this).attr("disabled", false);
        $(this).prev().text("上传视频");
        if (data) {
          const d = JSON.parse(data);

          const showVideo = $(this).attr('data-target');
          $(showVideo).attr("src", d.url).show();

          _this.setVideoArr();
        }
      });
    });
  }

  /**
   * 设置视频数组信息
   */
  setVideoArr() {

    const _this = this;

    let videoArr = [];

    //获取所有的url地址
    var items = $("#videoList").find(".video");
    $.each(items, function (i, item) {
      let videoUrl = $(item).attr("src");
      videoArr.push(videoUrl);
    });

    _this.data.videoArr = videoArr;

    _this.save();
  }

  saveTmsp = null;
  save() {
    if (this.saveTmsp) {
      return;
    }
    this.saveTmsp = setTimeout(() => {
      const saveData = this.data;
      console.log(saveData);
      window.courseware.setData(saveData, null, key);  //用于存储数据
      this.saveTmsp = null;
    }, 1000);
  }
}

$(function () {

  formView = new FormView();

  window.courseware.getData(function (data) {
    //数据加载完，才算页面加载完成
    console.log(data);
    formView.data = data;

    formView.init();

  }, key);
})

function commonUploadFile(file, callback) {
  const uploadUrl = window.courseware.uploadUrl();  //上传文件的路径
  const uploadData = window.courseware.uploadData();  //上传文件必须要的参数 

  const formData = new FormData();
  formData.append("file", file);
  for (const key in uploadData) {
    formData.append(key, uploadData[key]);
  }
  $.ajax({
    url: uploadUrl,
    type: "post",
    data: formData,
    dataType: 'text',
    contentType: false,
    processData: false,
    success: function (data) {
      callback && callback(data);
    },
    error: function (data) {
      console.error("文件上传失败", data);
      callback && callback(null);
    }
  });
}


//form索引
var _add_video_index = 0;

//form标题
var _add_video_title_index = 1;

/**
 * 添加vido
 */
function addVideo() {

  // 添加一个五要素
  $("#videoList").append($("#add_video").html());

  var videoPanel = $("#videoList").find("div[name='video_panel']");

  //绑定事件
  if (formView) {
    formView.bindVideoUpload(videoPanel);
  }

  //修改id值
  setAddVideoId(_add_video_index, _add_video_title_index);


  _add_video_index += 1;

  _add_video_title_index += 1;

  return videoPanel;
}

/**
 * 修改id值
 * @param index
 * @param titleIndex
 */
function setAddVideoId(index, titleIndex) {

  var video_panel = $("#videoList").find("div[name='video_panel']");

  //修改name值
  $(video_panel).attr("name", "video_panel" + index);

  //设置id值
  $(video_panel).attr("id", "video_panel" + index);

  //设置title值
  $(video_panel).find(".panel-title").append("<h5>视频" + titleIndex + "</h5>");

  //设置video显示位置
  $(video_panel).find("[name='video']").attr('data-target', "#showVideo_" + index)

  //设置组件id值
  var items = $(video_panel).find(".video");
  $.each(items, function (i, item) {
    $(item).attr("id", "showVideo_" + index);
  });
}

/**
 * 删除通讯配置项
 * @returns
 */
function delVideo(obj) {
  $(obj).parents("div[data-type=video_panel]").remove();

  _add_video_title_index--;

  //重新设置通讯配置项显示
  var addVideoTitles = $("#videoList").find(".panel-title");

  $.each(addVideoTitles, function (i, title) {

    $(title).empty();
    $(title).append("<h5>视频" + (i + 1) + "</h5>");
  });

  if (formView) {
    formView.setVideoArr();
  }
}