// pages/home/body-model/body-model.ts
const Size = [542, 568];
const Scale = 0.78
interface Rect {
  width: number;
  height: number;
}
Component({
  lifetimes: {
    attached() { setTimeout(() => this._getContainerRef(), 300); }
  },
  properties: {
    dataset: { type: Object },
  },
  data: {
    container: { width: 0, height: 0 },
    model: { width: 0, height: 0 },
  },
  observers: {
    'container.**'(container) { this._positioning(container); }
  },
  methods: {
    onBodyModel(event: WechatMiniprogram.TouchEvent) {
      const position = event.mark?.position
      if (position) this.triggerEvent('position', { position });
    },
    _getContainerRef() {
      this.createSelectorQuery().select('.body-model-wrapper').boundingClientRect().exec(res => {
        const { width: cw } = res[0];
        const mw = Math.round(cw * Scale);
        const ch = Math.round(mw * Size[1] / Size[0]);
        this.setData({
          'container.width': cw,
          'container.height': ch,
          'model.width': mw,
          'model.height': ch,
        })
      })
    },
    _positioning(container: Rect) {
      const halfW = container.width / 2;
      const halfH = container.height / 2;

      this.setData({
        LT: { left: `${halfW - 60 * Scale}px`, top: `${32 * Scale}px` },
        LB: { left: `${halfW - 90 * Scale}px`, top: `${halfH + 30 * Scale}px` },
        RT: { left: `${halfW + 40 * Scale}px`, top: `${30 * Scale}px` },
        RB: { left: `${halfW + 30 * Scale}px`, top: `${halfH + 5 * Scale}px` },
      })
    }
  }
})