var api = require('../../utils/api'), report = require('../../utils/report-model'), config = require('../../config');
Page({
  data: { total: null, skinAge: null, ageNote: '', dims: [], focusName: '', focusSlogan: '',
    views: [], viewIndex: 0, frontPhoto: '', activeLayers: [], careAdvice: [], product: null, sideViews: [] },
  onLoad: function () {
    this.alive = true; this.visible = true;
    this.ownerId = api.user() && api.user().id;
    var gd = getApp().globalData;
    if (!gd.payload || !gd.payload.result) { my.redirectTo({ url: '/pages/splash/splash' }); return; }
    this.payload = gd.payload; this.photos = gd.photos || [];
    try { this.setData(report.model(this.payload, this.photos, gd.profile || {})); }
    catch (_) { my.showToast({ content: '报告生成失败，请重新检测', type: 'none' }); }
    this.renderSides(this.payload.wrinkle_views);
  },
  onReady: function () { this.ready = true; this.drawRing(this.data.total); this.loadSides(); },
  onShow: function () {
    if (!api.user() || this.ownerId !== api.user().id) {
      this.onHide(); this.setData({ frontPhoto: '', views: [], sideViews: [], careAdvice: [], product: null });
      my.redirectTo({ url: '/pages/splash/splash' }); return;
    }
    this.visible = true; if (this.ready) this.loadSides();
  },
  onHide: function () { this.visible = false; if (this.signal) this.signal.canceled = true; },
  onUnload: function () { this.onHide(); this.alive = false; this.photos = []; this.payload = null; },
  onTabChange: function (e) {
    var i = Number(e.currentTarget.dataset.tab), view = this.data.views[i];
    if (!view) return;
    this.setData({ viewIndex: i, activeLayers: report.layers(this.payload.result, view.key) });
  },
  onPhotoLoad: function (e) {
    var i = Number(e.currentTarget.dataset.index), view = this.data.views[i];
    if (!view || !this.payload) return;
    var points = report.marks(this.payload.result, view.key, e.detail.width, e.detail.height);
    var patch = {}; patch['views[' + i + '].marks'] = points; this.setData(patch);
  },
  renderSides: function (views) {
    var that = this;
    this.setData({ sideViews: ['left', 'right'].map(function (key, i) {
      var item = views && views[key] || {}, layer = report.mapURL(item.result && item.result.face_maps && item.result.face_maps.texture_enhanced_lines);
      return { key: key, title: i ? '右脸皱纹' : '左脸皱纹', photo: that.photos[i + 1] || '', layer: layer,
        loading: item.status === 'pending', note: item.status === 'unavailable' ? '侧脸标注暂不可用' : '' };
    }) });
  },
  loadSides: function () {
    var that = this, job = this.payload && this.payload.wrinkle_job;
    if (!job || job.status === 'complete' || !this.visible || this.loadingSides) return;
    this.loadingSides = true; this.signal = { canceled: false }; var signal = this.signal;
    api.wrinkleViews(job.token, signal).then(function (data) {
      if (!that.alive || !that.visible || signal.canceled) return;
      that.payload.wrinkle_views = data.wrinkle_views; job.status = 'complete'; that.renderSides(data.wrinkle_views);
    }).catch(function () {
      if (that.alive && that.visible && !signal.canceled) that.renderSides({ left: { status: 'unavailable' }, right: { status: 'unavailable' } });
    }).then(function () { that.loadingSides = false; if (signal.canceled && that.alive && that.visible) that.loadSides(); });
  },
  drawRing: function (total) {
    var ctx = my.createCanvasContext('score-ring'), ratio = total == null ? 0 : Math.max(0, Math.min(100, total)) / 100;
    ctx.clearRect(0, 0, 120, 120); ctx.setLineWidth(8);
    ctx.beginPath(); ctx.arc(60, 60, 52, 0, 2 * Math.PI); ctx.setStrokeStyle('#E5E5E5'); ctx.stroke();
    if (total != null) {
      ctx.beginPath(); ctx.arc(60, 60, 52, -Math.PI / 2, -Math.PI / 2 + ratio * 2 * Math.PI);
      ctx.setStrokeStyle('#F5F078'); ctx.setLineCap('round'); ctx.stroke();
    }
    ctx.draw();
  },
  onMore: function () {
    var id = this.data.product && config.productItemIds[this.data.product.tier];
    if (!id) return;
    if (my.tb && my.tb.openDetail) my.tb.openDetail({ itemId: String(id) });
  },
  onHistory: function () { my.navigateTo({ url: '/pages/history/history' }); }
});