<template>
  <div class="m-no-data">
    <img class="empty-img" :src="imgSrc" />
    <span class="empty-text">{{ emptyText }}</span>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
  },
  computed: {
    imgSrc() {
      let t = this.type;
      if (
        this.type != "develop" &&
        this.type != "msg" &&
        this.type != "order" &&
        this.type != "search"
      ) {
        t = "default";
      }
      return require(`@/assets/img/no-data-${t}.png`);
    },
    emptyText() {
      if (this.text) {
        return this.text;
      } else if (this.type == "develop") {
        return "功能正在开发中...";
      } else if (this.type == "msg") {
        return "暂无消息~";
      } else if (this.type == "order") {
        return "暂无订单~";
      } else if (this.type == "search") {
        return "抱歉，没有找到相关的商品~";
      } else {
        return "空空如也~";
      }
    },
  },
};
</script>

<style lang="less">
.m-no-data {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 55px;
  align-items: center;
  .empty-img {
    width: 190px;
    margin-bottom: -12px;
  }
  .empty-text {
    font-size: 12px;
    color: #aeaeae;
  }
}
</style>
