<template>
  <div
    :class="{
      'bx-defaultpage-inline': inline,
      'bx-defaultpage-fixed': !inline,
      'bx-defaultpage-large': large
    }"
    v-if="visible"
    >
    <div
      class="bx-defaultpage-inner"
      :style="innerStyle"
      >
      <div
        class="bx-defaultpage-image"
        :class="imageClass"
        >
        <img
          class="img-responsive"
          ref="defaultpageImage"
          :src="imgData"
          >
      </div>
      <div
        class="bx-defaultpage-text"
        v-html="txtData"
        />
      <div
        class="bx-defaultpage-group"
        v-if="label"
        >
        <a
          class="bx-defaultpage-btn"
          @click="handleAction"
          >{{ label }}</a>
      </div>
    </div>
  </div>
</template>
<script>
import defaultPageJson from './default-page.json'
import { create } from '../utils/index'

export default create({
  name: 'default-page',
  props: {
    // 是否是局部布局
    inline: {
      type: Boolean,
      default: true,
    },
    // 是否是更大的
    large: {
      type: Boolean,
      default: false,
    },
    // 局部显示是否自适应
    responsive: {
      type: Boolean,
      default: true,
    },
    // 错误类型
    type: {
      type: String,
      default: 'empty',
    },
    // 错误图片
    image: {
      type: String,
      default: '',
    },
    imageClass: {
      type: String,
      default: '',
    },
    // 错误文案
    text: {
      type: String,
      default: '',
    },
    // 行动按钮文案
    label: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      visible: true,
      innerStyle: {},
      action: null,
    }
  },
  computed: {
    imgData() {
      return this.getImage()
    },
    txtData() {
      return this.getText()
    },
  },
  methods: {
    // 触发行动按钮事件
    handleAction() {
      if (this.action) {
        this.action()
      }
      this.$emit('action')
    },
    // 计算页面还留多少空白高度
    calculateBlank() {
      return new Promise(resolve => {
        // 图片loaded后再计算高度
        const $img = this.$refs.defaultpageImage
        $img.onload = () => {
          let blankHeight = 0
          // 查看body是否存在留白
          blankHeight = window.innerHeight - document.body.clientHeight
          if (blankHeight > 0) {
            resolve(blankHeight)
          }
          // 若body发现没有留白，再查找body下的第一个元素，查看是否存在留白
          const firstElement = document.body.firstElementChild
          // 第一个元素不是div，则不再处理
          if (firstElement.nodeName !== 'DIV') {
            resolve(0)
          }
          blankHeight = window.innerHeight - firstElement.clientHeight
          if (blankHeight > 0) {
            resolve(blankHeight)
          }
          // 未有留白统一返回0
          resolve(0)
        }
        $img.onerror = () => {
          resolve(0)
        }
      })
    },
    getImage() {
      if (this.image) {
        return this.image
      }
      const data = defaultPageJson[this.type]
      return data ? data.image : defaultPageJson.empty.image
    },
    getText() {
      if (this.text) {
        return this.text
      }
      const data = defaultPageJson[this.type]
      return data ? data.text : defaultPageJson.empty.text
    },
  },
  mounted() {
    if (this.inline && this.responsive) {
      this.$nextTick(() => {
        // 动态取paddingBottom的值
        let paddingBottom = window
          .getComputedStyle(this.$el.childNodes[0])
          .paddingBottom.replace('px', '')
        paddingBottom = parseInt(paddingBottom, 10)
        this.calculateBlank().then(height => {
          paddingBottom += height
          this.$set(this.innerStyle, 'paddingBottom', `${paddingBottom}px`)
        })
      })
    }
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
