import Emiter from "@/sdk/utils/Emiter";
import { convertJQHotspot } from './hotspot'
import browser from "@/utils/browser";
export default class Tags extends Emiter {
  constructor(app) {
    super();
    this.app = app;
  }


  /**
 * 打开热点链接
 */

  linkopen(sceneCode, id, hid) {
    this.emit('clickHotspot', { sceneCode, id })
  }


  /**
   * 编码转换
   */
  htmlEncode(str) {
    var s = "";
    if (str.length == 0) return "";
    s = str.replace(/\'/g, "&#39;");
    s = s.replace(/\"/g, "&quot;");
    s = s.replace(/\(/g, "（");
    s = s.replace(/\)/g, "）");
    s = s.replace(/,/g, "，");
    return s;
  }

  addhotspot1(param, type) {
    let ath = this.app.krpanoDom.get("curscreen_ath");
    let atv = this.app.krpanoDom.get("curscreen_atv");

    this.app.krpanoDom.call(`addImgTextHotSpot(
        ${param.img.replace('static/', 'showviewer/').replace('.svg', '.png').replace('@2x', '')},
        ${param.name},
        ${this.htmlEncode(param.hotspotTitle)},
        ${param.ath != '' ? param.ath : ath},
        ${param.atv != '' ? param.atv : atv},
        ${param.secne ? param.secne.sceneCode : 'notjump'},
        ${type},
        ${param.link},
        ${true},
        ${param.visible},
        ${(param.size * 50) || 1},
        ${Number(param.fontSize)})`);
  }
  addhotspot(param, type) {
    /**
     * type: 0,系统图标 , 1.自定义图际. 2.序列帧  3.个性标签
     */
    try {
      // krpano.set("curscreen_x", krpano.get('stagewidth') / 2);
      // krpano.set("curscreen_y", krpano.get('stageheight') / 2);
      // let ath = this.app.krpanoDom.get("curscreen_ath");
      // let atv = this.app.krpanoDom.get("curscreen_atv");
      // krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
      const hotspot = convertJQHotspot(param);
      if (!hotspot) return;
      // debugger;
      const hotspotStyle = Object.values(hotspot.style);
      const hotspotString = hotspotStyle.join('|');
      let hotspotSize
      if (browser.isMobile()) {
        hotspotSize = (Number(hotspot.size) || 1) * 30;
        console.log(`当前${hotspot.id}基础热点大小`, 30);
      } else {
        hotspotSize = (Number(hotspot.size) || 1) * 40;
        console.log(`当前${hotspot.id}基础热点大小`, 40);
      }

      const ath = hotspot.ath != '' ? hotspot.ath : this.app.krpanoDom.get("curscreen_ath");
      const atv = hotspot.atv != '' ? hotspot.atv : this.app.krpanoDom.get("curscreen_atv");
      let icon = hotspot.icon.replace(/,/g, '|');

      const callString = `addJQHotspot(
        ${hotspot.id},
        ${hotspot.type},
        ${hotspot.title},
        "${icon.replace('static/', 'showviewer/').replace('.svg', '.png').replace('@2x', '')}",
        ${ath},
        ${atv},
        "${hotspot.link}",
        ${hotspotSize},
        ${hotspot.visible},
        "${hotspotString}",
        "${param.secne ? param.secne.sceneCode : 'notjump'}",
        )`;
      // console.log('callString',callString); 
      this.app.krpanoDom.call(callString);
    } catch (error) {
      console.error('error', error);
    }

    // 设置热点图片默认的偏移值
    // let offset = '-130%'
    // if (param.size < 1) {
    //   offset = '-200%'
    // }
    // if (param.size > 1) {
    //   offset = '-100%'
    // }
    // krpano.set('layer[tooltip_' + param.name + '].y', `${offset}`)

  }




  /**
  * 初始化
  */

  initHotspot(hotspots, type) {
    hotspots.forEach(item => {
      this.addhotspot(item, type)
    });
  }


  /**
   * 显示隐藏热点
   */

  toggleHotspot(toggle) {
    try {
      this.app.krpanoDom.call(`set_hotspot_visible(${toggle})`);
    } catch (e) {
      e
    }
  }

}
