<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <view class="u-demo-title">演示效果</view>
      <view class="u-demo-area">
        <u-toast ref="uToast"></u-toast>
        <view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
        <view class="count-to-demo">
          <u-count-to
            class="count-to"
            :useEasing="useEasing"
            ref="uCountTo"
            :autoplay="autoplay"
            :startVal="startVal"
            :endVal="endVal"
            :duration="duration"
            :decimals="decimals"
            :fontWeight="fontWeight"
            @end="end"
          ></u-count-to>
        </view>
      </view>
    </view>
    <view class="u-config-wrap">
      <view class="u-config-title u-border-bottom">参数配置</view>
      <view class="u-config-item">
        <view class="u-item-title">状态</view>
        <u-subsection
          vibrateShort
          :current="current"
          :list="['启动', '暂停', '继续', '重置']"
          @change="statusChange"
        ></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">目标值</view>
        <u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">滚动时间</view>
        <u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">显示小数</view>
        <u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">字体加粗</view>
        <u-subsection
          vibrateShort
          current="1"
          :list="['normal', 'bold', 'bolder','lighter']"
          @change="fontWidthChange"
        ></u-subsection>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startVal: 0,
      endVal: 608,
      separator: ",",
      decimals: 0,
      duration: 2000,
      autoplay: false,
      useEasing: true,
      current: 3,
      isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
      fontWeight: 400
    };
  },
  methods: {
    endValChange(index) {
      this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
      this.reset();
      this.start();
    },
    durationChange(index) {
      this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
    },
    fontWidthChange(index) {
      let arr = ["normal", "bold", "bolder", "lighter"];
      this.fontWeight = arr[index];
    },
    decimalsChange(index) {
      this.decimals = index == 0 ? 2 : 0;
    },
    statusChange(index) {
      this.current = index;
      if (index == 0) {
        this.start();
      } else if (index == 1) {
        this.stop();
      } else if (index == 2) {
        this.resume();
      } else {
        this.reset();
      }
    },
    end() {
      this.current = 3;
      this.$refs.uToast.show({
        type: "warning",
        title: "滚动结束"
      });
    },
    start() {
      this.current = 0;
      this.isStop = true;
      this.$refs.uCountTo.start();
    },
    stop() {
      this.$refs.uCountTo.stop();
    },
    resume() {
      if (!this.isStop) {
        this.$refs.uToast.show({
          type: "error",
          title: "请开始并暂停后才能继续"
        });
        this.$nextTick(() => {
          this.current = 3;
        });
        return;
      }
      this.$refs.uCountTo.resume();
    },
    reset() {
      this.$refs.uCountTo.reset();
    }
  }
};
</script>

<style lang="scss" scoped>
.count-to-demo {
  text-align: center;
}
</style>
