<template>
    <div class="components-container">
      <aside>
        <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
      </aside>
      <count-to
        ref="example"
        :start-val="_startVal"
        :end-val="_endVal"
        :duration="_duration"
        :decimals="_decimals"
        :separator="_separator"
        :prefix="_prefix"
        :suffix="_suffix"
        :autoplay="false"
        class="example"
      />
      <div style="margin-left: 25%;margin-top: 40px;">
        <label class="label" for="startValInput">startVal:
          <input v-model.number="setStartVal" type="number" name="startValInput">
        </label>
        <label class="label" for="endValInput">endVal:
          <input v-model.number="setEndVal" type="number" name="endVaInput">
        </label>
        <label class="label" for="durationInput">duration:
          <input v-model.number="setDuration" type="number" name="durationInput">
        </label>
        <div class="startBtn example-btn" @click="start">
          Start
        </div>
        <div class="pause-resume-btn example-btn" @click="pauseResume">
          pause/resume
        </div>
        <br>
        <label class="label" for="decimalsInput">decimals:
          <input v-model.number="setDecimals" type="number" name="decimalsInput">
        </label>
        <label class="label" for="separatorInput">separator:
          <input v-model="setSeparator" name="separatorInput">
        </label>
        <label class="label" for="prefixInput">prefix:
          <input v-model="setPrefix" name="prefixInput">
        </label>
        <label class="label" for="suffixInput">suffix:
          <input v-model="setSuffix" name="suffixInput">
        </label>
      </div>
      <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
        :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
        :autoplay=false&gt;</aside>
    </div>
  </template>
  
  <script>
  import countTo from 'vue-count-to'
  
  export default {
    name: 'CountToDemo',
    components: { countTo },
    data() {
      return {
        setStartVal: 0,
        setEndVal: 2017,
        setDuration: 4000,
        setDecimals: 0,
        setSeparator: ',',
        setSuffix: ' rmb',
        setPrefix: '¥ '
      }
    },
    computed: {
      _startVal() {
        if (this.setStartVal) {
          return this.setStartVal
        } else {
          return 0
        }
      },
      _endVal() {
        if (this.setEndVal) {
          return this.setEndVal
        } else {
          return 0
        }
      },
      _duration() {
        if (this.setDuration) {
          return this.setDuration
        } else {
          return 100
        }
      },
      _decimals() {
        if (this.setDecimals) {
          if (this.setDecimals < 0 || this.setDecimals > 20) {
            alert('digits argument must be between 0 and 20')
            return 0
          }
          return this.setDecimals
        } else {
          return 0
        }
      },
      _separator() {
        return this.setSeparator
      },
      _suffix() {
        return this.setSuffix
      },
      _prefix() {
        return this.setPrefix
      }
    },
    methods: {
      start() {
        this.$refs.example.start()
      },
      pauseResume() {
        this.$refs.example.pauseResume()
      }
    }
  }
  </script>
  
  <style scoped>
  .example-btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    padding: 4px 15px;
    font-size: 12px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    border-color: #d9d9d9;
  }
  
  .example-btn:hover {
    color: #4AB7BD;
    background-color: #fff;
    border-color: #4AB7BD;
  }
  .example {
    font-size: 50px;
    color: #F6416C;
    display: block;
    margin: 10px 0;
    text-align: center;
    font-size: 80px;
    font-weight: 500;
  }
  
  .label {
    color: #2f4f4f;
    font-size: 16px;
    display: inline-block;
    margin: 15px 30px 15px 0;
  }
  
  input {
    position: relative;
    display: inline-block;
    padding: 4px 7px;
    width: 70px;
    height: 28px;
    cursor: text;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  
  .startBtn {
    margin-left: 20px;
    font-size: 20px;
    color: #30B08F;
    background-color: #fff;
  }
  
  .startBtn:hover {
    background-color: #30B08F;
    color: #fff;
    border-color: #30B08F;
  }
  
  .pause-resume-btn {
    font-size: 20px;
    color: #E65D6E;
    background-color: #fff;
  }
  
  .pause-resume-btn:hover {
    background-color: #E65D6E;
    color: #fff;
    border-color: #E65D6E;
  }
  </style>