<!--
 * async await return
  -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';

const primeNum = ref(1000000);
const msg = ref('');
const requestMsg = ref('');

onMounted(() => {
  fun();
});
function getMag(name: any) {
  return `Hello, my name is ${name}.`;
}
function fun() {
  const name = '张三';
  const msg = getMag(name);
  console.log(msg); // Hello, my name is 张三.
}

// 生成素数
function generatePrimes() {
  function isPrime(n: any) {
    // Math.sqrt() 函数返回一个数的平方根
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
        return false;
      }
    }
    return true;
  }

  let primes: number[] = [];
  const maximum = 1000000;
  while (primes.length < primeNum.value) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }
  msg.value = `已生成素数${primes.length}个`;
}

function xhrClick() {
  requestMsg.value = '';
  const xhr = new XMLHttpRequest();
  xhr.addEventListener('loadend', () => {
    requestMsg.value = `${requestMsg.value}完成！状态码：${xhr.status}`;
  });
  xhr.open(
    'GET',
    'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json'
  );
  xhr.send();
  requestMsg.value = '请求已发起\n';
}
function heavyLoad() {
  document.location.reload();
}

function fetchApi() {
  const fetchPromise = fetch(
    'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
  );

  console.log(fetchPromise);

  fetchPromise.then((response) => {
    console.log(`已收到响应：${response.status}`);
  });

  console.log('已发送请求……');
}
</script>
<template>
  <div class="fit">
    <div class="q-mb-md">async await return</div>
    <div class="content q-gutter-md">
      <q-card class="my-card bg-primary text-white">
        <q-card-section>
          <div class="q-mb-md q-gutter-sm">
            <q-btn
              color="white"
              text-color="primary"
              label="生成素数"
              @click="generatePrimes"
            />
          </div>
          <div>
            <q-input
              dark
              filled
              label-color="white"
              v-model="primeNum"
              label="素数个数"
            />
          </div>
          <div>{{ msg }}</div>
        </q-card-section>
      </q-card>

      <q-card class="my-card bg-orange-4 text-white">
        <q-card-section>
          <div class="q-mb-md q-gutter-sm">
            <q-btn
              color="white"
              text-color="orange-4"
              label="点击发起请求"
              @click="xhrClick"
            />
            <q-btn outline text-color="white" label="重载" @click="heavyLoad" />
          </div>
          <div>{{ requestMsg }}</div>
        </q-card-section>
      </q-card>

      <q-card class="my-card bg-purple-3 text-white">
        <q-card-section>
          <div class="q-mb-md q-gutter-sm">
            <q-btn
              no-caps
              color="white"
              text-color="purple-3"
              label="fetch API"
              @click="fetchApi"
            />
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.my-card {
  width: 300px;
}
</style>
