<!-- START -->
<link rel="stylesheet" href="/static/prj/dist/css/lead-calc.css">
<div id="omr-lead-calc">
  <div class="-block">
    <div class="-title">
      Сколько у вас подписчиков в соцсетях?
    </div>
    <in-row label="YouTube"   v-model="yt"></in-row>
    <in-row label="Инстаграм" v-model="ig"></in-row>
    <in-row label="FaceBook"  v-model="fb"></in-row>
    <in-row label="Pinterest" v-model="pi"></in-row>
    <in-row label="Twitter"   v-model="tw"></in-row>
    <in-row label="Другие"    v-model="other"></in-row>
    <div class="-in is-total">
      <label>Всего</label>
      <div class="-sum">
        {{ this.total }}
      </div>
    </div>
  </div>

  <div class="-block">
    <div class="-title">
      Всего в соцсетях {{inSN}} млрд. пользователей
    </div>
    <div class="-in">
      <div class="-sum">
        У вас {{this.yourPercent}}% от мирового объёма
      </div>
    </div>
  </div>

  <div class="-block">
    <div class="-title">
      Сколько лидов вы можете получить, если
    </div>
    <in-row label="Конверсия в лиды (%)" v-model="conv" max="100"></in-row>
    <div class="-in is-total">
      <label>Лидов</label>
      <div class="-sum">
        {{ this.leads }}
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/static/prj/dist/js/lead-calc.js"></script>
<script>
  const internetUsersBillions = 3.94;
  const InRow = {
    props: ['label', 'modelValue', 'max'],
    emits: ['update:modelValue'],
    template: `
      <div class="-in">
        <label>{{ label }}</label>
        <input :class="classComputed" type="number" min="0" v-model="value" :max="maxComputed">
      </div>`,
    data() {
      return {
        isError: false,
      };
    },
    computed: {
      classComputed() {
        if (this.isError) {
          return 'input is-danger';
        }
        return 'input';
      },
      maxComputed() {
        if (this.max !== '') {
          return this.max;
        }
        return '';
      },
      value: {
        get() {
          return this.modelValue < 1 ? 0 : this.modelValue;
        },
        set(v) {
          if (v === '') {
            this.isError = false;
            this.$emit('update:modelValue', 0);
            return;
          }
          const iv = parseInt(v);
          if (iv === NaN || iv < 0) {
            this.isError = true;
            return;
          }
          this.$emit('update:modelValue', iv);
        }
      },
    },
  };

  const OmrLeadCalc = {
    data() {
      return {
        ig: 0,
        yt: 0,
        fb: 0,
        pi: 0,
        tw: 0,
        other: 0,
        conv: 2,
      };
    },
    computed: {
      leads() {
        return Math.floor(this.conv / 100 * this.total).toFixed(0);
      },
      inSN() {
        return internetUsersBillions.toFixed(2);
      },
      yourPercent() {
        const rounded = (this.total * 100 / (internetUsersBillions * 1000 * 1000 * 1000));
        return rounded < 0.00000001 ? 0 : rounded.toFixed(8);
      },
      total() {
        return this.ig
          + this.yt
          + this.fb
          + this.tw
          + this.pi
          + this.other;
      },
    }
  };

  const app = Vue.createApp(OmrLeadCalc);
  app.component('in-row', InRow);
  app.mount('#omr-lead-calc');
</script>
<!-- END -->