<!--
  @name: 空状态
  @description: -
  @author 张文
  @date: 2022-01-20
-->
<template>
  <div
    :class="[
      'ty-global-flex-center',
      animation ? 'ty-global-animation-out' : '',
      'ty-none-data'
    ]">

    <slot name="image">
      <img class="ty-not-data-img" :src="src" :alt="content">
    </slot>

    <slot name="content">
      <div
        class="ty-none-data-content"
        :style="{color:color}"
      >{{ content || $tyLanguage.get('wms_project.pda.component.notData.null', '空空如也') + '...' }}</div>
    </slot>

    <slot name="footer"></slot>
  </div>
</template>

<script>

export default {
  name: "tyNotData",
  props:{
    // 提示文字信息
    content: String,
    // 图片路径
    src:{
      type:String,
      default: require('../../assets/img/NotData/noneData.png')
    },
    // 是否需要进入动画
    animation:{
      type:Boolean,
      default: true
    },
    // 底部描述文字的颜色
    color:{
      type:String,
      default: '#969799'
    },
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-none-data{
  width: 100%;
  flex-direction: column;
  padding: 20px 0;

  .ty-not-data-img{
    width: 35%;
    max-width: 256px;
    max-height: 270px;
  }

  .ty-none-data-content{
    margin-bottom: 10px;
  }
}

</style>
