<template>
  <div class="image-wrap">
    9988
    <img
      v-if="name"
      class="img-style"
      :src="
        require('./images/' +
          `${name}` +
          (name === 'standard-shooting' ||
          name === 'cover-the-eyes' ||
          name === 'cover-the-face' ||
          name === 'cover-the-forehead'
            ? '.svg'
            : '.png'))
      "
      :alt="name"
    />

    <!-- :src="require('./images/' + `${name}` + '.png')" -->

    <div class="description">{{
      description === '' ? descriptionDefault : description
    }}</div>
  </div>
</template>

<script>

export default {
  name: 'k-illustration',
  props: {
    name: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imgInfoList: [
        {
          name: 'no-message',
          description: '暂时没有新消息',
        },
        {
          name: 'no-signal',
          description: '暂时没有信号',
        },
        {
          name: 'pay-loading',
          description: '支付处理中，请稍后…',
        },
        {
          name: 'no-parking-fee',
          description: '未查询到停车缴费信息',
        },
        {
          name: 'no-coupon',
          description: '您还没有卡券',
        },
        {
          name: 'standard-shooting',
          description: '标准拍摄',
        },
        {
          name: 'cover-the-forehead',
          description: '遮挡额头',
        },
        {
          name: 'cover-the-face',
          description: '遮挡面部',
        },
        {
          name: 'cover-the-eyes',
          description: '遮挡眼睛',
        },
        {
          name: '404',
          description: '网络目前处于故障中，请您稍后再来尝试…',
        },
        {
          name: '505',
          description: '系统目前处于故障中，请您稍后再来尝试…',
        },
        {
          name: 'retry',
          description: '网络不佳，点击屏幕重试',
        },
        {
          name: 'system-is-under-maintenance',
          description: '系统正在维护中…',
        },
        {
          name: 'lost',
          description: '系统开小差啦，稍后试试吧',
        },
        {
          name: 'network-break',
          description: '网络断开连接咯，稍后试试吧',
        },
        {
          name: 'empty',
          description: '这里空空如也哦，稍后试试吧',
        },
        {
          name: 'crowd',
          description: '当前访问太火爆了，稍后试试吧～',
        },
      ],
      descriptionDefault: '',
    };
  },
  created() {
    if (this.description === '') {
      console.log('this.namethis.namethis.namethis.name', this.name);
      this.descriptionDefault = this.getImageInfo(this.name);
    }
  },
  methods: {
    getImageInfo(name) {
      let des = this.imgInfoList.filter((res) => res.name === name);
      return des[0].description;
    },
  },
};
</script>

<style lang="less" scoped>
.image-wrap {
  .img-style {
    display: block;
    margin: 0 auto;
  }

  .description {
    margin: 15px auto;
    text-align: center;
    color: #919baa;
  }
}
</style>
