<template>
  <view
    class="mix-empty"
    v-if="show"
    :style="{
      marginTop: marginTop + 'rpx'
    }"
  >
    <u-icon
      :name="src ? src : 'empty-' + mode"
      :custom-style="iconStyle"
      :label="text ? text : icons[mode]"
      label-pos="bottom"
      :label-color="color"
      :label-size="fontSize"
      :size="iconSize"
      :color="iconColor"
      :width="imgWidth"
      :height="imgHeight"
      margin-top="14"
    ></u-icon>
    <view class="mix-slot-wrap">
      <!-- @slot 默认插槽，给组件底部传入slot内容 -->
      <slot></slot>
    </view>
  </view>
</template>

<script>
/**
 * 内容为空
 *
 * 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
 * @since 0.0.1
 * @displayName Empty
 * @property {String} color 文字颜色（默认#c0c4cc）
 * @property {String} text 文字提示（默认“无内容”）
 * @property {String} src 图标名称或者图片路径(绝对路径)，如定义，mode参数会失效
 * @property {String} icon-color icon的颜色，字体图标时有效（默认#c0c4cc）
 * @property {String | Number} icon-size icon的大小，单位rpx（默认120）
 * @property {String | Number} font-size 提示文字的大小，单位rpx（默认28）
 * @property {String} mode 选择预置的图标类型，见下方说明
 * @property {String | Number} img-width 图标的宽度，单位rpx（默认120）
 * @property {String} img-height 图标的高度，单位rpx（默认auto）
 * @property {String | Number} margin-top 组件距离上一个元素之间的距离（默认0）
 * @property {Boolean} show 是否显示组件（默认true）
 * @property {Object} icon-style 图标的样式，可以设置字体大小，颜色等，对象形式，size和color优先级高于此参数
 */
export default {
  name: 'mix-empty',
  props: {
    /**
     * 图标名称或者图片路径(绝对路径)，如定义，mode参数会失效
     */
    src: {
      type: String,
      default: ''
    },
    /**
     * 文字提示
     */
    text: {
      type: String,
      default: '无内容'
    },
    /**
     * 文字颜色
     */
    color: {
      type: String,
      default: '#c0c4cc'
    },
    /**
     * icon的颜色，字体图标时有效
     */
    iconColor: {
      type: String,
      default: '#c0c4cc'
    },
    /**
     * icon的大小，单位rpx
     */
    iconSize: {
      type: [String, Number],
      default: 120
    },
    /**
     * 提示文字的大小，单位rpx
     */
    fontSize: {
      type: [String, Number],
      default: 28
    },
    /**
     * 选择预置的图标类型，见下方说明
     */
    mode: {
      type: String,
      default: 'data'
    },
    /**
     *  图标宽度，单位rpx
     */
    imgWidth: {
      type: [String, Number],
      default: 120
    },
    /**
     * 图标高度，单位rpx
     */
    imgHeight: {
      type: [String, Number],
      default: 'auto'
    },
    /**
     * 是否显示组件
     */
    show: {
      type: Boolean,
      default: true
    },
    /**
     * 组件距离上一个元素之间的距离
     */
    marginTop: {
      type: [String, Number],
      default: 0
    },
    /**
     * 图标的样式，可以设置字体大小，颜色等，对象形式，size和color优先级高于此参数
     */
    iconStyle: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      icons: {
        car: '购物车为空',
        page: '页面不存在',
        search: '没有搜索结果',
        address: '没有收货地址',
        wifi: '没有WiFi',
        order: '订单为空',
        coupon: '没有优惠券',
        favor: '暂无收藏',
        permission: '无权限',
        history: '无历史记录',
        news: '无新闻列表',
        message: '消息列表为空',
        list: '列表为空',
        data: '数据为空'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .u-icon__label {
  text-align: center;
  padding: 40rpx 50rpx 28rpx 50rpx;
}
</style>

<style scoped lang="scss">
@import '../../libs/css/style.components.scss';
.mix-empty {
  @include vue-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.mix-image {
  margin-bottom: 20rpx;
}
.mix-slot-wrap {
  @include vue-flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
</style>