<template>
  <div>
    <div class="demo-title">
      局部布局（动态）
    </div>
    <bxs-default-page :type="dynamicType" />
    <div class="demo-title">
      局部布局（小图）
    </div>
    <bxs-default-page image-class="custom-image-class" />
    <div class="demo-title">
      局部布局（大图）
    </div>
    <bxs-default-page
      :large="!0"
      label="行动按钮"
      />
    <div class="demo-title">
      全屏遮罩
    </div>
    <bxs-cell-group>
      <bxs-cell
        title="通用空态"
        is-link
        @click="showError('empty')"
        />
      <bxs-cell
        title="通用空态（小图）"
        is-link
        @click="showSmall()"
        />
      <bxs-cell
        title="通用空态(自定义文案)"
        is-link
        @click="showError('empty', '自定义文案')"
        />
      <bxs-cell
        title="网络异常"
        is-link
        @click="showError('network')"
        />
      <bxs-cell
        title="加载失败"
        is-link
        @click="showError('loaded')"
        />
      <bxs-cell
        title="服务升级中"
        is-link
        @click="showError('upgrade')"
        />
      <bxs-cell
        title="没有消息"
        is-link
        @click="showError('message')"
        />
      <bxs-cell
        title="没有活动"
        is-link
        @click="showError('activity')"
        />
      <bxs-cell
        title="没有搜索结果"
        is-link
        @click="showError('search')"
        />
      <bxs-cell
        title="没有评论"
        is-link
        @click="showError('comment')"
        />
      <bxs-cell
        title="没有收藏"
        is-link
        @click="showError('collect')"
        />
      <bxs-cell
        title="没有地址"
        is-link
        @click="showError('address')"
        />
      <bxs-cell
        title="没有奖励券"
        is-link
        @click="showError('redpack')"
        />
    </bxs-cell-group>
  </div>
</template>

<script>
import defaultPageJson from '../default-page.json'

export default {
  data() {
    return {
      dynamicType: 'empty',
    }
  },
  methods: {
    showError(type, text) {
      this.$defaultPage[type](text)
      this.createHistoryBack(type)
    },
    showSmall() {
      this.$defaultPage.empty({
        text: '这是个小图',
        label: '行动按钮',
        large: false,
      })
      this.createHistoryBack('small')
    },
    createHistoryBack(type) {
      window.history.pushState(null, 'title', `#${type}`)
      window.addEventListener(
        'popstate',
        () => {
          this.$defaultPage.remove()
        },
        false,
      )
    },
    startDynamicType() {
      const keys = Object.keys(defaultPageJson)
      const maxNum = keys.length
      this.timer = window.setInterval(() => {
        const randomIndex = parseInt(Math.random() * maxNum, 10)
        this.dynamicType = keys[randomIndex]
      }, 1000)
    },
  },
  mounted() {
    this.startDynamicType()
  },
  destroyed() {
    window.clearInterval(this.timer)
    this.$defaultPage.remove()
  },
}
</script>

<style lang="css">
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}
</style>
