<template>
  <div class="xd-nodata" :style="{height: uiHeight + 'px'}">
    <div class="xd-nodata-box">
      <div class="xd-nodata-image" v-if="icon">
        <img :src="image">
      </div>
      <div :style="{color:color}">
        <slot>暂无数据</slot>
      </div>
    </div>
  </div>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon";

  /**
   * @description 无数据提示
   * 依赖于 element-ui
   * 参考网站如下：
   *
   * @property {String|Number} height 无数据插件高度  默认：200
   * @property {Boolean} icon 是否显示ICON  默认: true
   * @property { String} color 文字颜色 默认: #999
   */

  export default {
    name: "XdNoData",
    components:{
      XdFontIcon
    },
    props: {
      height:{
        type: String,
        default: '200'
      },
      icon: {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: '#999'
      },
    },

    data(){
      return {
        uiHeight: 0,
        image: 'data:image/png;base64,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',
      }
    },

    created() {
      if(this.height) {
        this.uiHeight = this.height;
      }
    }
  }
</script>

<style scoped lang="scss">
  .xd-nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;

    &-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    &-image {
      width: 86px;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;


      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
