<template>
  <div
    class="el-empty"
    :class="{ 'el-empty--left-right':  position === 'left-right'}"
  >
    <div
      class="el-empty__img"
      :style="{ width: `${width || statusObj[type].width}px`, height: `${height || statusObj[type].height}px` }"
    >
      <slot name="img">
        <img :src="type ? statusObj[type].url : imgUrl">
      </slot>
    </div>
    <div class="el-empty__text">
      <slot name="label">
        <span>{{ type ? statusObj[type].label : label }}</span>
      </slot>
    </div>
  </div>
</template>

<script>

const oldStyleAttr = {
  width: 180,
  height: 100
};

const newStyleAttr = {
  width: 140,
  height: 140
};

export default {
  name: 'ElEmpty',
  props: {
    // type为空是显示
    imgUrl: {
      type: String,
      default: ''
    },
    // 空状态的类型auth、data、list、room, imgUrl不为空时显示type中的类型
    type: {
      type: String,
      default: ''
    },
    // 提示文本
    label: {
      type: String,
      default: ''
    },
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    position: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 状态list
      statusObj: {
        auth: {
          url: 'https://static.dingdandao.com/4e42d564ebb923e20cc121d12c491cdf',
          label: '暂无权限',
          ...oldStyleAttr
        },
        data: {
          url: 'https://static.dingdandao.com/612007ba2dc43b5c6646f19fe54a4206',
          label: '暂未相关数据～',
          ...oldStyleAttr
        },
        list: {
          url: 'https://static.dingdandao.com/5748b5c2412b05ecd2d05764a5efdf03',
          label: '列表为空',
          ...oldStyleAttr
        },
        room: {
          url: 'https://static.dingdandao.com/2a9d07e7c6be08858871432cb241ba50',
          label: '暂无相关房型～',
          ...oldStyleAttr
        },
        empty: {
          url: 'https://js.dingdandao.com/library/cdnImage/common/empty.png',
          label: '暂无数据',
          ...newStyleAttr
        },
        error: {
          url: 'https://js.dingdandao.com/library/cdnImage/common/error.png',
          label: '加载失败',
          ...newStyleAttr
        },
        wait: {
          url: 'https://js.dingdandao.com/library/cdnImage/common/wait.png',
          label: '请稍等...',
          ...newStyleAttr
        }
      }
    };
  }
};
</script>
