<template>
  <view class="xd-nodata" :style="{height: uiHeight}">
    <view class="xd-nodata-box">
      <view class="xd-nodata-image" :style="[imgWrapStyleComp]" v-if="icon">
        <image :src="iconUrl"></image>
      </view>
      <view :style="{color:color}">
        <slot>当前界面无更多数据了</slot>
      </view>
    </view>
  </view>
</template>

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

  export default {
    name: "XdNoData",
    components:{
      XdFontIcon
    },
    props: {
      height:{
        type: String,
        default: '40vh'
      },
      hasImg:{
        type:Array,
        default(){
          return []
        },
      },

      icon: {
        type: Boolean,
        default: true
      },

      color: {
        type: String,
        default: '#999'
      },

      iconType:{
        type: String,
        default: 'empty'
      },
      //放大倍数
      scaleSize: {
        type: Number,
        default: 1
      }
    },
    computed:{
      iconUrl(){
        if(this.type === '') return '';
        return `${this.baseUrl}${this.type}.png?version=${this.version}`
      },
      imgWrapStyleComp(){
        return {
          width: `${this.scaleSize * 200}rpx`,
          height: `${this.scaleSize * 200}rpx`
        }
      }
    },

    data(){
      return {
        uiHeight: 0,
        version: 12345,
        // #ifdef H5
        baseUrl: '//img3.jufubao.cn/common/empty/',
        //#endif
        //#ifdef MP-WEIXIN
        baseUrl: 'https://img2.jufubao.cn/common/empty/',
        //#endif
        type:'',

        defHasImages:['empty','loadFail','notFind','category','search','cinema','film','shop', 'play', 'product','health','travel']
      }
    },

    created() {
      if(this.defHasImages.concat(this.$xdUniHelper.cloneDeep(this.hasImg)).includes(this.iconType)) {
        this.type = this.iconType
      }
      else this.type = 'empty';

      if(this.height) {
        this.uiHeight = this.height;
      }else{
        this.uiHeight = (getApp().globalData.$systemInfo['safeArea']['height'] - 44) + 'px';
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: unit(28,rpx);

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

    &-image {
      display: flex;
      justify-content: center;
      align-items: center;

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