<template>
  <section class="sv-nodata-wrapper">
    <div class="sv-nodata-icon" :class="{'refreshing': refreshing}" @click="handleClick">
      <sv-icon :icon="icon" size="200"></sv-icon>
    </div>
    <div class="sv-nodata-text" :class="{'refreshing': refreshing}">
      <span v-if="refreshing">正在刷新...</span>
      <span v-else>刷新一下</span>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'svNodata',
    data () {
      return {
        icon: 'no-data',
        refreshing: false // 是否正在刷新
      }
    },
    props: {
      refreshCompleted: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      refreshCompleted (val) {
        if (val) {
          this.refreshing = false
          this.icon = 'no-data'
        }
      }
    },
    methods: {
      handleClick (event) {
        if (this.refreshing) return
        this.$emit('click', event)
        this.refreshing = true
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";

  .sv-nodata-wrapper{
    position: fixed;
    top: 30%;
    left:50%;
    transform: translate(-50%, -50%);
    .sv-nodata-icon{
      /*display: flex;*/
      /*justify-content: center;*/
      /*align-items: center;*/
      /*width: pxToRem(170px);*/
      /*height: pxToRem(170px);*/
      /*margin: 0 auto;*/
      /*border-radius: 50%;*/
      /*background: #e7e7e7;*/
    }
    .sv-nodata-text{
      text-align: center;
      font-size: pxToRem(28px);
      color: #999;
    }
  }
</style>
