<div id="app" class="my-4">
    <div class="container">
        <header class="mb-4">
            <h1>夏木樂 影音流量計算器</h1>
        </header>

        <div class="row row-cols-md-3">
            <div class="form-group">
                <label class="form-label">
                    影片位元率
                </label>
                <div class="input-group">
                    <input type="number" class="form-control"
                        step="0.01"
                        v-model="bitRate"
                    />
                    <div class="input-group-text">
                        Mbps
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">
                    影片總長度
                </label>
                <div class="input-group">
                    <input type="number" class="form-control"
                        step="0.01"
                        v-model="totalLength"
                    />
                    <select v-model="lengthUnit" class="form-select" style="flex: 0 0 auto; width: 40%;">
                        <option value="second">秒鐘</option>
                        <option value="minute">分鐘</option>
                        <option value="hour">小時</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">
                    人數
                </label>
                <div class="input-group">
                    <input type="number" class="form-control"
                        v-model="people"
                    />
                    <div class="input-group-text">
                        人
                    </div>
                </div>
            </div>
        </div>

        <table class="table table-bordered mt-4">
            <tbody>
            <tr>
                <th style="width: 150px" class="text-nowrap">
                    每秒影片大小 (MB)
                </th>
                <td>
                    {{ secondSize }} MB
                </td>
            </tr>
            <tr>
                <th class="text-nowrap">
                    每秒影片大小 (KB)
                </th>
                <td>
                    {{ secondSize * 1024 }} KB
                </td>
            </tr>

            <tr>
                <th class="text-nowrap">
                    影片總秒數
                </th>
                <td>
                    {{ totalSeconds }} 秒
                </td>
            </tr>
            <tr>
                <th class="text-nowrap">
                    1人總流量
                </th>
                <td>
                    {{ round(totalSizePerPerson / 1024) }} GB / {{ totalSizePerPerson }} MB / {{ totalSizePerPerson * 1024 }} KB
                </td>
            </tr>
            <tr>
                <th class="text-nowrap">
                    每月總流量
                </th>
                <td>
                    {{ round(totalSize / 1024 / 1024) }} TB / {{ round(totalSize / 1024) }} GB / {{ totalSize }} MB
                </td>
            </tr>
            </tbody>
        </table>
      
        <div class="mt-4">
          <div class="mb-2">
            來源文章：  
            <a href="https://simular.co/blog/post/54-%E5%A6%82%E4%BD%95%E5%A3%93%E7%B8%AE%E5%BD%B1%E9%9F%B3%E8%87%B3%E9%81%A9%E5%90%88%E6%92%AD%E6%94%BE%E7%9A%84%E5%A4%A7%E5%B0%8F" target="_blank">【小編教室】什麼是位元率 (Bitrate)? 如何壓縮影音至適合上傳網站的大小
            </a>
          </div>
          <div>
            Copyright &copy; {{ year }} - 
            <a href="https://simular.co/" target="_blank">
              夏木樂創意設計
            </a>
          </div>
        </div>
    </div>
 
</div>

import { createApp, ref, reactive, onMounted, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.min.js';

const app = createApp({
  name: 'VideoCalc',
  setup() {
    const bitRate = ref(10); // Mbps
    const totalLength = ref(10);
    const lengthUnit = ref('hour');
    const people = ref(10);
    const year = new Date().getFullYear();

    const secondSize = computed(() => bitRate.value / 8);
    const totalSeconds = computed(() => {
      if (lengthUnit.value === 'hour') {
        return totalLength.value * 60 * 60;
      }

      if (lengthUnit.value === 'minute') {
        return totalLength.value * 60;
      }

      return totalLength.value;
    });
    const totalSizePerPerson = computed(() => {
      return totalSeconds.value * secondSize.value;
    })
    const totalSize = computed(() => {
      return totalSizePerPerson.value * people.value;
    });

    function round(num) {
      return Math.round(num * 100) / 100;
    }

    return {
      bitRate,
      totalLength,
      lengthUnit,
      people,

      secondSize,
      totalSeconds,
      totalSizePerPerson,
      totalSize,
      year,

      round
    };
  }
});

app.mount('#app');