<script>
export default {
  name: "app",
  data() {
    return {
      times: 3,
      oneTime: 10,
      delay: 5000,
      onRunning: false,
      slowLoad: false,
      typeOn: "运行状态：<span style='color: green'>运行中</span>",
      typeOff: "运行状态：<span style='color: red'>已停止</span>",
      thread: null,
      command: { stop: false, slowLoad: false },
      task: async function(command) {
        const normalRandom = (mean, std) => {
          let u = 0.0, v = 0.0, w = 0.0, c = 0.0;
          do {
            //获得两个（-1,1）的独立随机变量
            u = Math.random() * 2 - 1.0;
            v = Math.random() * 2 - 1.0;
            w = u * u + v * v;
          } while (w === 0.0 || w >= 1.0);
          //Box-Muller转换
          c = Math.sqrt((-2 * Math.log(w)) / w);
          return mean + (u * c) * std;
        };

        this.onRunning = true;
        const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
        const search = () => {
          let time = Math.floor(Date.now()).toString();
          let search = "";
          for (let timeElement of time) {
            search += timeElement;
            search += " ";
          }
          return search;
        };
        if (command.slowLoad) {
          document.getElementById("iframes").innerHTML = "";
          for (let iframe = 1; iframe <= this.oneTime; iframe++) {
            document.getElementById("iframes").innerHTML += `<span id="${iframe}"></span>`;
          }
        }
        for (let time = 1; time <= this.times; time++) {
          if (command.stop) {
            return;
          }
          let innerHTML = "";
          if(!command.slowLoad) {
            document.getElementById("iframes").innerHTML = "";
          }
          for (let iframe = 1; iframe <= this.oneTime; iframe++) {
            if (command.slowLoad) {
              document.getElementById(iframe.toString()).innerHTML = `<iframe src="https://www.bing.com/search?q=${search()}"></iframe>`;
            } else {
              innerHTML += `<iframe src="https://www.bing.com/search?q=${search()}"></iframe>`;
            }
            if (command.stop) {
              return;
            }
            if (command.slowLoad) {
              await sleep(normalRandom(this.delay / this.times, this.delay / 5 / this.times));
            }else {
              await sleep(normalRandom(5, 3));
            }
            if (command.stop) {
              return;
            }
          }
          if(!command.slowLoad) {
            document.getElementById("iframes").innerHTML = innerHTML;
          }
          if (command.stop) {
            return;
          }
          if (time !== this.times) {
            if (command.slowLoad) {
              await sleep(normalRandom(this.delay / this.times, this.delay / 5 / this.times));
            } else {
              await sleep(normalRandom(this.delay, this.delay / 10));
            }
          }
          if (command.stop) {
            return;
          }
        }
        this.onRunning = false;
        document.getElementById("type").innerHTML = this.typeOff;
      }
    };
  },
  methods: {
    start: async function() {
      if (this.onRunning) {
        return;
      }
      this.command = { stop: false, slowLoad: this.slowLoad };
      this.thread = new Promise(() => this.task(this.command));
      document.getElementById("type").innerHTML = this.typeOn;
    },

    stop: function() {
      this.command.stop = true;
      this.thread = null;
      this.command = null;
      this.onRunning = false;
      document.getElementById("type").innerHTML = this.typeOff;
    }
  }
};
</script>

<template>
  <p>
    <span>运行次数：</span><input type="number" v-model="times"><br>
    <span>单次加载：</span><input type="number" v-model="oneTime"><br>
    <span>循环延时：</span><input type="number" v-model="delay"><br>
    <span>慢速加载 (BETA)：</span><input type="checkbox" v-model="slowLoad"><br>
    <button v-on:click="start">开始</button>
    <button v-on:click="stop">停止</button>
    <br><br>
    <span id="type">运行状态：<span style="color: orange">未运行</span></span>
  </p>
  <div id="iframes"></div>
    <div class="footer">Bing Point Getter: Jan 25 Version</div>
</template>

<style scoped>
.footer {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 9999;
}
</style>
