<template>
  <div id="player"></div>
</template>

    <script src="http://superapi.51aes.com/dist/superAPI.min.js"></script>

<script>
import CloudRenderer from '51superapi'
export default {
  mounted () {
    function myHandleResponseFunction (data) {
      console.log('收到的事件: ' + data)
      const jsonObject =
        typeof data === 'object'
          ? JSON.parse(JSON.stringify(data))
          : JSON.parse(data)
      switch (jsonObject.func_name) {
        case 'beginPlay':
          // 云渲染连接成功 do Something
          break
        case 'APIAlready':
          // 陈强强：实际根据删选调用，这个接口你在加载页面的时候已经读过，直接调用里面数据，根据需求筛选就行
          fetch(`https://hjsk.guangchuan.org/api/fxyp/zhyp`)
            .then((res) => res.json())
            .then((res) => res.data)
            .then((res) => {
              const filterName = ['水平位移']
              const filterStatus = ['正常']

              let JsonData1 = {
                action: 'open', // 打开透明大坝 open ,关闭透明大坝 close
                rate: '10', // 透明大坝显示速率
              }
              cloudRender.SuperAPI('DamLucencyControl', JsonData1)
              res.total.forEach((sensor) => {
                if (
                  !(
                    filterName.includes(sensor.type) &&
                    filterStatus.includes(sensor.totalList[0].resultColor)
                  )
                ) {
                  return
                }
                //加载点
                let JsonData = {
                  type: 'single', // 按组控制监测设备 group; 单个设备控制 single
                  hide: 'false', // 是否隐藏监测设备 true / false
                  //     "equipment_type":"1", // 设备类型 1 坝体渗流；2 防渗墙应力应变；3 绕坝渗流；4 垂直位移；5 水平位移； (参数type 为 group 时有效)
                  equipment_names: [sensor.infoName], // 设备名称列表(参数type 为 single 时有效)
                }
                cloudRender.SuperAPI('HideEquipment', JsonData)
                //配置颜色
                let colorIndex
                switch (sensor.totalList[0].resultColor) {
                  case '黄色预警':
                    colorIndex = '0'
                    break
                  case '红色预警':
                    colorIndex = '2'
                    break
                  case '正常':
                    colorIndex = '3'
                    break
                  default:
                    colorIndex = '1'
                }
                let JsonData2 = {
                  type: 'single', // 按组控制监测设备 group; 单个设备控制 single
                  color: colorIndex, // 设置测点状态颜色
                  // "equipment_type": "1", // 设备类型 1 坝体渗流；2 防渗墙应力应变；3 绕坝渗流；4 垂直位移；5 水平位移； (参数type 为 group 时有效)
                  equipment_names: [sensor.infoName], // 设备名称列表(参数type 为 single 时有效)
                }
                cloudRender.SuperAPI('SetEquipmentColor', JsonData2)
                //配置弹窗
                let JsonData3 = {
                  name: sensor.infoName, // 设备名称
                  url: `file:///D:/hjsk/51_pages/pages/home/dbaq.html`, // url
                  size: '800,350', // 标签大小
                  offest: '10,10', // 标签位移
                }
                cloudRender.SuperAPI('SetWebConfig', JsonData3)
              })
              const names = res.total
                .filter(
                  (a) =>
                    filterName.includes(a.type) &&
                    filterStatus.includes(res.totalList[0].resultColor)
                )
                .map((a) => a.infoName)
                .join(',')
              res.totalList.forEach((sensor) => { })
            })
          break
        case 'OnAddPathSuccess':
          // 添加路径成功 do Something
          break
        case 'OnAddPathFailed':
          // 添加路径失败 do Something
          break
        case 'OnUpdatePathCoordSuccess':
          // 更新路径数据点成功 do Something
          break
        case 'OnUpdatePathCoordFailed':
          // 更新路径数据点失败 do Something
          break
        case 'OnFocusPathEnd':
          // 聚焦路径结束 do Something
          break
        case 'OnPathClick':
          // 点击路径 do Something
          break
        case 'OnSuperAPI_Error_Catch':
          // 错误捕捉 do Something
          // "args": {
          //   "error_type": "SuperAPI JSon Body Field Error",
          //   "error_information": "id"
          // }
          break
        //更多func_name类型 回调通知, 详见各API事件
      }
      return data
    }
    var cloudRender = new CloudRenderer('player', 0)
    let cloudurl = 'https://51.guangchuan.org:8889', //云渲染服务地址, 8889:固定端口
      orderID = '88c65cCE' //渲染口令, 在云渲染客户端上获得
    fetch(`${cloudurl}/Renderers/Any/order`, {
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      body: JSON.stringify({
        order: orderID,
        width: window.innerWidth,
        height: window.innerHeight,
      }),
      //① order 渲染口令必填; ② width, height: 设置云渲染输出分辨率(此设置为固定分辨率,可选; 默认以云渲染客户端设置的分辨率输出)
    })
      .then((res) => {
        if (!res.ok) {
          throw Error(res.statusText)
        }
        return res.json()
      })
      .then((json) => {
        if (json.url) {
          //启动云渲染
          cloudRender.SuperAPI('StartRenderCloud', json.url)

          //事件注册
          cloudRender.SuperAPI(
            'RegisterCloudResponse',
            myHandleResponseFunction
          )
        }
      })
      .catch((error) => {
        console.error('Error: ', error)
      })
  }

}
</script>

<style lang="scss" scoped>
</style>
