<script>
import KeyEventCatcher from './KeyEventCatcher.vue';
import resImage from '../assets/pngNoAlphaDemo.png';
import { ref } from 'vue';

// 打开注释为只在开发环境下生效
// if(process.env.NODE_ENV == 'development') {
  await import('./mock/index.js')
// }

export default {
  components: {
    KeyEventCatcher,
  },
  data() {
    const defName = "这是Mock前的本地数据"
    return {
      index: 0,
      defName: defName,
      name: ref(defName),
      resImage: resImage,
    }
  },
  mounted() {
    setInterval(async () => {
      this.index = (this.index + 1) % 3

      let url = null;
      switch(this.index) {
        case 0: 
          this.name = this.defName;
          break;
        case 1: 
          url = '/api/testData';
          break;
        case 2: 
          url = 'http://test.com/api/testData';
          break;
      }
      if (url) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => {
          try {
            const jsonData = JSON.parse(xhr.responseText);
            this.name = jsonData.data.name;
          } catch(ex) {
            console.error('Failed to get data from mockjs', ex)
          }
        };
        xhr.send();
      }
    }, 3000)
  }
}

</script>

<template>
  <KeyEventCatcher/>
  <div :style="{left:450, top:200, width:800,
     fontSize: 50, color: '#6688FF'}">
    {{ name }}
  </div>
  <img :src="resImage" :style="{left:100, top:100, width: 300}" />
</template>

<style scoped>
</style>