const ScreenWidthCache = 0;

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true,
    styleIsolation: 'shared',
  },

  properties: {
    text: String,
    width: String,
    background: String,
    color: String,
    mode: {
      type: String,
      value: 'default', // default or custom
    },
    icon: String,
  },

  data: {
    styleVars: '',
    show: true,
  },

  lifetimes: {
    attached() {
      this.setStyleVars();
    },
  },

  methods: {
    setStyleVars() {
      const { mode } = this.data;

      if (mode !== 'default') return;

      const rect = wx.getMenuButtonBoundingClientRect();
      const screenWidth = ScreenWidthCache || wx.getSystemInfoSync().screenWidth;
      // 获取气泡顶部距离 = 胶囊栏top + 胶囊栏heigth + 自定义间距
      const top = rect.top + rect.height + 16;
      // 获取气泡箭头位置 = 胶囊栏/2 + 胶囊右侧间隔 + 自定义间距(边框)
      const arrowRight = rect.width / 2 + (screenWidth - rect.right) + 2;

      this.setData({
        styleVars: `
        --bubble-top: ${top}px;
        --bubble-arrow-right: ${arrowRight}px;`,
      });
    },

    onClickClose(e: WechatMiniprogram.TouchEvent) {
      this.setData({ show: false });
      this.triggerEvent('close', e);
    },
  },
});