<template>
  <div class="app-demo">
    <button class="btn" type="button" @click="toggleDemoComponent">
      点击来{{ demoComponentVisible ? '隐藏' : '显示' }}demo组件
    </button>
    <Btn v-if="demoComponentVisible">zm btn</Btn>
    <M />
    <div class="safe-area-fixed-top">fixed top</div>
    <div class="safe-area-fixed-bottom">fixed bottom</div>
    <div class="safe-area-attached-bottom">attached bottom</div>
  </div>
</template>

<script>
import { call, urls, parseUrlQuery } from 'src/util'
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {}
  },

  computed: {
    ...mapState('home/demo', ['demoComponentVisible']),
  },

  mounted() {
    // mounted
    // eslint-disable-next-line no-console
    console.log('got query')
    // eslint-disable-next-line no-console
    console.log(parseUrlQuery())
  },

  methods: {
    ...mapActions('home/demo', ['doToggleDemoComponent']),
    toggleDemoComponent() {
      // eslint-disable-next-line no-console
      console.log('click btn')
      this.$ajax({
        ...urls.foo,
        method: 'post',
        trim: true,
        params: {
          timetag: +new Date(),
          trim: ' foo ',
        },
        data: {
          timetag: +new Date(),
          trim: ' foo ',
        },
      })
        .then(json => {
          // eslint-disable-next-line no-console
          console.log(json)
          this.doToggleDemoComponent()
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.log(err)
          // FIXME: 此代码如果没有跑 npm run anyproxy 的话, 请求会失败
          // 所以在 catch 里面也执行 doToggleDemoComponent, 仅做展示
          this.doToggleDemoComponent()
          call('showToast', {
            content: 'err',
          })
        })
    },
  },
}
</script>

<style lang='postcss'>
@import 'src/style/abstract/index.css';

.app-demo {
  /* place your css here */
  display: flex;
  flex-flow: column;
  margin: 30px;
  height: 20000px;
  border: 1px solid silver;

  .btn {
    @extend %ellipsis;

    font-size: 20px;
  }

  .safe-area-fixed-top,
  .safe-area-fixed-bottom {
    right: 0;
    font-size: 40px;
    color: red;
  }
}
</style>
