"use script"; //开发环境建议开启严格模式

//对应widget.js中MyWidget实例化后的对象
var thisWidget;

//当前页面业务
function initWidgetView(_thisWidget) {
  thisWidget = _thisWidget;

  // $(window).resize(refHeight)
  // refHeight()

  //获取台风列表
  queryTyphoonList().then(function (arr) {
    //启动正在发送的台风
    arr.forEach((item) => {
      if (item.state == "start") {
        item.show = true;
        selectOneTyphoon(item);
      }
    });
    showTyphoonTable(arr);
  });
}

//显示台风列表
function showTyphoonTable(data) {
  $("#listTable").bootstrapTable({
    data: data,
    height: 390,
    pagination: false,
    singleSelect: false,
    checkboxHeader: false,
    columns: [
      {
        title: "是否显示",
        field: "show",
        align: "center",
        checkbox: true,
        with: 50,
      },
      {
        title: "台风编号",
        field: "typnumber",
        align: "center",
      },
      {
        title: "台风名（中文）",
        field: "name_cn",
        align: "center",
      },
      {
        title: "台风名（英文）",
        field: "name_en",
        align: "center",
      },
    ],
    onCheck: function (row) {
      selectOneTyphoon(row);
    },
    onUncheck: function (row) {
      unSelectOneTyphoon(row);
    },
    onClickRow: function (row) {
      if (typhoonListObj[row.id] && typhoonListObj[row.id].show) {
        selectOneTyphoon(row);
      }
    },
  });

  $("#btnPlay").click(function () {
    if (!selectTF) {
      return;
    }

    if (selectTF.playTyphoon?.isStart) {
      stopTyphoon();
    } else {
      startTyphoon();
    }
  });
}

function startTyphoon() {
  $("#btnPlay").html('<span class="fa fa-stop" aria-hidden="true"></span> 停止');

  thisWidget.startTyphoon(selectTF);
}

//停止播放
function stopTyphoon() {
  $("#btnPlay").html('<span class="fa fa-play" aria-hidden="true"></span> 播放');
  thisWidget.stopTyphoon(selectTF);
}

var typhoonListObj = {};

//取消勾选台风
function unSelectOneTyphoon(row) {
  let typhoon = typhoonListObj[row.id];
  if (typhoon) {
    typhoon.show = false;
  }
  if (typhoon == selectTF) {
    stopTyphoon();
    $("#typhoonPath").hide();
  }
}

//勾选了台风
function selectOneTyphoon(row) {
  $("#typhoonPath").show();
  $("#lblName").html("[" + row.typnumber + "]" + "" + row.name_cn);
  stopTyphoon();

  if (typhoonListObj[row.id]) {
    let typhoon = typhoonListObj[row.id];
    typhoon.show = true;
    typhoon.flyTo();
    showPathTable(typhoon); //已有的，直接展示
  } else {
    queryTyphoonItem(row.id).then(function (newData) {
      let typhoon = thisWidget.createTyphoon({
        ...row,
        ...newData,
      });
      typhoon.flyTo();

      showPathTable(typhoon);

      typhoonListObj[row.id] = typhoon; //绑定到数据中，方便使用
    });
  }
}

let selectTF;

//台风路径表格的显示
function showPathTable(typhoon) {
  selectTF = typhoon;

  $("#pathTable").bootstrapTable("destroy");
  $("#pathTable").bootstrapTable({
    height: getHeight(),
    pagination: false,
    singleSelect: true,
    data: typhoon.options.path,
    columns: [
      {
        title: "时间",
        field: "time_str",
        align: "center",
      },

      {
        title: "风速",
        field: "centerSpeed",
        align: "center",
        formatter: function (value, row, index) {
          return value + "m/s";
        },
      },
      {
        title: "移向",
        field: "moveTo_str",
        align: "center",
      },
      {
        title: "强度",
        field: "level_str",
        align: "center",
      },
    ],
    onClickRow: function (row) {
      typhoon.showPointFQ(row);
      let graphic = typhoon.getPointById(row.id);
      if (graphic) {
        graphic.flyTo({
          radius: 1600000,
          complete() {
            graphic.openTooltip();
          },
        });
      }
    },
  });
}

function getHeight() {
  return $(window).height() - 450;
}

//访问后端接口，取台风列表数据
function queryTyphoonList() {
  return new Promise(function (resolve, reject) {
    function typhoon_jsons_list_default(data) {
      var arr = [];
      data.typhoonList.forEach((item) => {
        arr.push({
          id: item[0],
          name_en: item[1],
          name_cn: item[2],
          typnumber: item[3],
          state: item[7],
        });
      });
      resolve(arr);
    }
    window.typhoon_jsons_list_default = typhoon_jsons_list_default;

    $.ajax({
      // url: './data/typhoon/list_2020.json',
      url: "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default", //在线实时接口
      type: "GET",
      dataType: "jsonp",
      data: {
        t: new Date().getTime(),
        callback: "typhoon_jsons_list_default",
      },
      success: typhoon_jsons_list_default,
      error: function (data) {
        console.log("台风列表数据获取失败", data);
        // haoutil.msg('台风列表数据获取失败！')
        reject(data);
      },
    });
  });
}

//访问后端接口，取单个台风路径数据
function queryTyphoonItem(id) {
  return new Promise(function (resolve, reject) {
    function typhoon_jsons_view(res) {
      var newData = conversionPathData(res.typhoon); //在Typhoon.js中
      // console.log('台风数据==>', newData)
      resolve(newData);
    }
    window["typhoon_jsons_view_" + id] = typhoon_jsons_view;

    $.ajax({
      // url: 'data/typhoon/view_' + typId + '.json',
      url: "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/view_" + id, //在线实时接口
      type: "GET",
      dataType: "jsonp",
      data: {
        t: new Date().getTime(),
        callback: "typhoon_jsons_view",
      },
      success: function (res) {},
      error: function (data) {
        console.log("获取台风单个数据失败");
        reject(data);
      },
    });
  });
}

//转换数据,将后端接口数据转换为需要的格式
function conversionPathData(oldData) {
  var path = [];
  oldData[8].forEach((message) => {
    let circle7;
    let circle10;
    let circle12;
    message[10].forEach((level) => {
      let radiusObj = {
        speed: level[0],
        radius1: level[1],
        radius2: level[2],
        radius3: level[3],
        radius4: level[4],
      };

      if (level[0] == "30KTS") {
        circle7 = radiusObj;
      } else if (level[0] == "50KTS") {
        circle10 = radiusObj;
      } else if (level[0] == "64KTS") {
        circle12 = radiusObj;
      } else {
        console.log("未处理风圈", radiusObj);
      }
    });

    //预测路径
    let babj = message[11]?.BABJ;
    let arrForecast;
    if (babj) {
      arrForecast = [];
      babj.forEach((element) => {
        let newArr = {
          time: element[0], //几小时预报
          time_str: element[1],
          lon: element[2], //预报经度
          lat: element[3], //预报纬度
          strength: element[4], //中心气压
          centerSpeed: element[5], //最大风速  m/s
          level: element[7], //预报台风等级, 代码
          color: getColor(element[7]), //对应等级的颜色
        };
        arrForecast.push(newArr);
      });
    }

    let time = new Date(message[2]); //时间

    path.push({
      id: message[0], //唯一标识
      time: new Date(message[2]), //时间
      time_str: time.format("MM-dd HH:mm"), //时间格式化字符串

      level: message[3], //台风等级, 代码
      level_str: getLevelStr(message[3]),
      color: getColor(message[3]), //对应等级的颜色
      lon: message[4], //经度
      lat: message[5], //纬度
      strength: message[6], //中心气压,百帕
      centerSpeed: message[7], //最大风速,米/秒
      moveTo: message[8], //移动方向, 代码
      moveTo_str: getMoveToStr(message[8]),
      windSpeed: message[9], //移动速度,公里/小时

      circle7: circle7, //7级风圈, 对象
      circle10: circle10, //10级风圈, 对象
      circle12: circle12, //12级风圈, 对象
      forecast: arrForecast, //预测路径, 数组
    });
  });

  return {
    id: oldData[0],
    name_en: oldData[1], //台风名字,英文
    name_cn: oldData[2], //台风名字
    typnumber: oldData[3], //台风编号
    state: oldData[7],
    path: path,
  };
}

function getLevelStr(value) {
  switch (value) {
    default:
    case "TD":
      return "热带低压";
    case "TS":
      return "热带风暴";
    case "STS":
      return "强热带风暴";
    case "TY":
      return "台风";
    case "STY":
      return "强台风";
    case "SuperTY":
      return "超强台风";
  }
}

function getMoveToStr(value) {
  switch (value) {
    default:
    case "N":
      return "北";
    case "NNE":
      return "北东北";
    case "NE":
      return "东北";
    case "ENE":
      return "东东北";
    case "E":
      return "东";
    case "ESE":
      return "东东南";
    case "ES":
      return "东南";
    case "SSE":
      return "南东南";
    case "S":
      return "南";
    case "SSW":
      return "南西南";
    case "SW":
      return "西南";
    case "WSW":
      return "西西南";
    case "W":
      return "西";
    case "WNW":
      return "西北西";
    case "NW":
      return "北西";
    case "NNW":
      return "北西北";
  }
}

//不同等级的台风对应不同的颜色
function getColor(level) {
  switch (level) {
    default:
    case "TD": //热带低压
      return "rgb(238,209,57)";
    case "TS": //热带风暴
      return "rgb(0,0,255)";
    case "STS": //强热带风暴
      return "rgb(15,128,0)";
    case "TY": //台风
      return "rgb(254,156,69)";
    case "STY": //强台风
      return "rgb(254,0,254)";
    case "SuperTY": //超强台风
      return "rgb(254,0,0)";
  }
}