<template>
  <div class="nodata">
    <div :style="style" class="nodata_image">
      <img src="../../assets/logo/nodata.png" alt="" srcset="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoData',
  props: {
    imageWidth: {
      type: [String, Number],
      default: 460
    },
    imageHeight: {
      type: [String, Number],
      default: 320
    }
  },
  computed: {
    style () {
      const that = this
      const style = {
        width: typeof that.imageWidth === 'number' ? that.imageWidth + 'px' : that.imageWidth,
        height: typeof that.imageHeight === 'number' ? that.imageHeight + 'px' : that.imageHeight
      }
      return style
    }
  }
}
</script>

<style lang="scss" scoped>
.nodata {
  height: 100%;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  .nodata_image {
    overflow: hidden;
    img {
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
