<template>
    <div class="ht-base-circle-component-demo">
      <ht-base-circle :percent="percent" :stroke-color="color">
        <ht-base-icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></ht-base-icon>
        <span v-else style="font-size:24px">{{ percent }}%</span>
    </ht-base-circle>
    <ht-base-button-group size="large">
        <ht-base-button icon="ios-add" @click="add"></ht-base-button>
        <ht-base-button icon="ios-remove" @click="minus"></ht-base-button>
    </ht-base-button-group>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseCircleComponentDemo',
    data () {
          return {
              percent: 0
          }
      },
      computed: {
          color () {
              let color = '#2db7f5';
              if (this.percent == 100) {
                  color = '#5cb85c';
              }
              return color;
          }
      },
      methods: {
          add () {
              if (this.percent >= 100) {
                  return false;
              }
              this.percent += 10;
          },
          minus () {
              if (this.percent <= 0) {
                  return false;
              }
              this.percent -= 10;
          }
      }
  }
</script>
<style lang="less">
    .ht-base-circle-component-demo {

    }
</style>

