<template>
  <div class="progress-integration">
    <div>
      <hive-button
        type="primary"
        @click="setRandomValue"
      >Random Value
      </hive-button>
    </div>

    <div>
      <hive-progress
        :value="value"
        :inline="inline"
      >
      </hive-progress>
    </div>
    <div>
      <hive-progress
        :value="value"
        :inline="inline"
        :size="size"
      >
      </hive-progress>
    </div>
    <div>
      <hive-progress
        :value="value"
        :inline="inline"
        :size="size"
        :type="type"
      >
      </hive-progress>
    </div>
    <div>
      <hive-progress
        :value="value"
        :inline="inline"
        :size="size"
        :type="type"
        :status="status"
      >
        <hive-icon icon="male"></hive-icon>
      </hive-progress>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0.6,
        inline: true,
        size: 'large',
        type: 'circle',
        status: 'custom',
      };
    },
    methods: {
      setRandomValue() {
        this.value = Math.random();
      },
    },
  };
</script>
