<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="demo">
      <hello-world :msg="model.count"></hello-world>
      <u-button type="primary" :loading="$wait.is('*/incr')" @click="model.incr(1)"> Click </u-button>
      <u-button type="warning" @click="switchLanguage()">
        {{ $i18n.locale === 'en' ? '中/EN' : 'EN/中' }}
      </u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
import model from './model';

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  /**
   * 页面Module
   */
  model = model;

  title = 'Hello';

  /**
   * 切换语言
   */
  switchLanguage(): void {
    this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en';
  }

  onLoad(): void {
    console.log('Page onLoad()...');
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx auto;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .demo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 300rpx;
  }
}
</style>
