<template>
    <div
        v-if="propsData.pullDownRefresh"
        class="cube-pulldown-wrapper"
        :style="propsData.pullDownStyle">
    <div
        v-show="propsData.beforePullDown"
        class="before-trigger"
        :style="{paddingTop: propsData.bubbleY + 'px'}">
        <span :class="{rotate: propsData.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
    </div>
    <div class="after-trigger" v-show="!propsData.beforePullDown">
        <div v-show="propsData.isPullingDown" class="loading">
        <Loading></Loading>
        </div>
        <div v-show="!propsData.isPullingDown" class="text"><span class="refresh-text">数据已更新</span></div>
    </div>
    </div>
</template>

<script>
import {Style, Loading} from 'cube-ui';
export default {
  name: 'pull-down',
  props: {
      propsData: {
          type: Object,
          default: {}
      },
      pullDownRefreshThreshold: {
          type: Number,
          default: 0
      }
  },
    components: {
        Style,
        Loading
    }
};
</script>

<style lang="scss" scoped>
.cube-pulldown-wrapper {
    .before-trigger {
      font-size: 30px;
      line-height: 30px;
      align-self: flex-end;
      span {
        display: inline-block;
        transition: all 0.3s;
        color: #999;
        &.rotate {
          transform: rotate(180deg);
        }
      }
    }
    .after-trigger {
      .refresh-text {
        color: #999;
      }
    }
}
</style>