<template>
  <div class="lyf-ui-empty">
    <div class="lyf-ui-empty-img-box">
      <slot name="pic">
          <img class="lyf-ui-empty-img" :src="src" />
      </slot>
    </div>
    <div class="lyf-ui-empty-text-box" v-if="(status || tip)">
      <div class="lyf-ui-empty-text lyf-ui-empty-status" v-if="status">{{ status }}</div>
      <div class="lyf-ui-empty-text lyf-ui-empty-tip" v-if="tip">{{ tip }}</div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { staticHost, staticImgPath } from '@/assets/localData/index'

export default {
  name: 'LyfEmpty',
  props: {
    // 空态类型: network || card || notice || collection || failed || delete || server || login || search || error || list || location || box || message
    type: {
      type: String,
      default: 'box'
    },
    status: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: ''
    }
  },
  computed: {
    src() {
      let src = `${staticHost}${staticImgPath}`
      switch (this.type) {
        case 'card': src += '/868d6ced2fda4ebd86966e66a16b59dd.png'
          break
        case 'collection': src += '/41e7751bc3574379b4649bcd584afa67.png'
          break
        case 'delete': src += '/cd596c950156450a9ffd41f876b02072.png'
          break
        case 'error': src += '/8d4ff90224da46a1bc505e09636892d7.png'
          break
        case 'failed': src += '/81c06a87fd3c4f9c944715e6dba63a17.png'
          break
        case 'list': src += '/2291bce212e94c2ba01caf474e3ecc65.png'
          break
        case 'location': src += '/2a68484cc5994bc1a71af32a46a1c683.png'
          break
        case 'login': src += '/a6799e065820483ba9f916716928911f.png'
          break
        case 'message': src += '/8b22f44db8f14161bdaa282bc5b94c26.png'
          break
        case 'network': src += '/bc72243b9f194519b6fdc25a7303de80.png'
          break
        case 'notice': src += '/c0118a380f2e456cb3b89144e55e56c2.png'
          break
        case 'search': src += '/02e6033060714331823f73fead9bd3b4.png'
          break
        case 'server': src += '/3b4f4c454188457daf954d1190513c49.png'
          break
        default:
          src += `/d01ca73bd0004a098072a4edbf81b864.png`
          break
      }
      return src
    }
  }
}
</script>
<style scoped>
.lyf-ui-empty .lyf-ui-empty-img-box {
  display: flex;
  justify-content: center;
}
.lyf-ui-empty .lyf-ui-empty-img-box img {
  width: 216px;
  max-width: 100%;
  height: 172px;
}
.lyf-ui-empty .lyf-ui-empty-img {
  display: block;
  width: 216px;
  max-width: 100%;
  height: 172px;
  margin: 0 auto;
}

.lyf-ui-empty .lyf-ui-empty-text-box {
  margin-top: var(--space_16);
}

.lyf-ui-empty .lyf-ui-empty-text-box .lyf-ui-empty-text {
  padding: 0 var(--space_16);
  line-height: 16px;
  text-align: center;
}

.lyf-ui-empty .lyf-ui-empty-text-box .lyf-ui-empty-status {
  color: var(--font-color_1);
  font-size: 14px;
  font-weight: 500;
}

.lyf-ui-empty .lyf-ui-empty-text-box .lyf-ui-empty-tip {
  margin-top: var(--space_8);
  color: var(--font-color_3);
  font-size: 12px;
}

.lyf-ui-empty .lyf-ui-button {
  margin: 0 auto;
  margin-top: var(--space_16);
}</style>