text: // 表示する項目
  var targets = ['Target', 'Focus', 'Hover', 'Anchor', 'TargetOfTarget'];
  
  // 項目のタイトル
  var titles = {
    Target: 'ターゲット',
    Focus: 'フォーカス',
    Hover: 'ホバー',
    Anchor: 'アンカー',
    TargetOfTarget: 'TT'
  };
  
  Vue.filter('hpcolor', function (t) {
    if (t.HPPercent > 75) return "green";
    if (t.HPPercent > 50) return "yellow";
    if (t.HPPercent > 25) return "orange";
    return "red";
  });
  
  // データ処理
  var targetinfo = new Vue({
    el: '#targetinfo',
    data: {
      updated: false,
      locked: false,
      collapsed: false,
      targets: [],
    },
    attached: function () {
      document.addEventListener('onOverlayDataUpdate', this.update);
      document.addEventListener('onOverlayStateUpdate', this.updateState);
    },
    detached: function () {
      document.removeEventListener('onOverlayStateUpdate', this.updateState);
      document.removeEventListener('onOverlayDataUpdate', this.update);
    },
    methods: {
      update: function (e) {
        this.updated = true;
        this.targets = [];
        for (var k of targets) {
          var t = e.detail.Enmity[k];
          if (t == null) {
            t = {};
            t.Name = 'none';
            t.MaxHP = 0;
            t.CurrentHP = 0;
            t.HPPercent = 0;
            t.Distance = 0;
            t.EffectiveDistance = 0;
            t.HorizontalDistance = 0;
          }
          t.Key = titles[k];
          this.targets.push(t);
        }
      },
      updateState: function (e) {
        this.locked = e.detail.isLocked;
      },
      toggleCollapse: function () {
        this.collapsed = !this.collapsed;
      }
    }
  });
  