<template>
  <div v-if="hasResultPage" class="ibps-list-result-page">
    <div
      v-if="resultType==='init'"
      class="ibps-init-text"
    />
    <div
      v-else-if="resultType==='finished'"
      class="ibps-finished-text"
    >
      {{ finishedText || $t('components.resultPage.finished') }}
    </div>

    <van-empty
      v-else
      :image="resultImage"
      :description="resultMessage|| $t('components.resultPage.'+resultType) "
    />
  </div>
</template>

<script>

/**
 * 目前list 状态
  *1、 init 展示初始列表
   2、 finished 加载完成
   3、 empty  没有数据
   4、 error  异常
   5、 未加载完成的 null
 */
export default {
  name: 'ibps-list-result-page',
  props: {
    finished: {
      type: Boolean
    },
    finishedText: {
      type: String
    },
    resultType: {
      type: String
    },
    resultMessage: {
      type: String
    }
  },
  computed: {
    hasResultPage() {
      return this.resultType
    },
    resultImage() {
      return `./images/result-page/${this.resultType}.png`
    }
  }
}
</script>
<style lang="scss">
.ibps-list-result-page{
  .ibps-finished-text {
    display: table;
    white-space: nowrap;
    height: auto;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    padding: 10px 0;
    font-size:13px;
    color: #999;
  }
  .ibps-finished-text:after,
  .ibps-finished-text:before {
    content: '';
    display: table-cell;
    position: relative;
    top: 50%;
    width: 50%;
  }
  .ibps-finished-text:before {
    background-position: right 1em top 50%
  }
  .ibps-finished-text:after {
    background-position: left 1em top 50%
  }

}
</style>

