<template>
  <div class="page-progress">
    <co-header fixed title="Progress">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell title="默认" class="page-content-main">
        <co-progress></co-progress>
      </co-cell>

      <co-cell title="设置 value">
        <co-progress :value="20"></co-progress>
      </co-cell>

      <co-cell title="左右文字">
        <co-progress :value="40">
          <div slot="start">0%</div>
          <div slot="end">100%</div>
        </co-progress>
      </co-cell>

      <co-cell title="定义线宽">
        <co-progress :value="60" :bar-height="5"></co-progress>
      </co-cell>

      <div class="page-progress-wrapper">
        <co-button size="large" type="primary" @click.native="uploadFile">上传文件</co-button>
        <co-progress :value="value" v-if="progressVisible" transition="progress-fade">
          <div slot="end">{{ value }}%</div>
        </co-progress>
      </div>
    </div>
      
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        progressVisible: false,
        value: 0,
        uploading: false,
        timer: null
      };
    },

    watch: {
      value(val) {
        var self = this;
        if (val >= 100) {
          this.uploading = false;
          this.progressVisible = false;
          setTimeout(() => self.$toast({ message: '上传成功', position: 'bottom', duration: 1000 }), 200);
          clearTimeout(this.timer);
        }
      }
    },

    methods: {
      uploadFile() {
        if (!this.uploading) {
          this.value = 0;
          this.progressVisible = true;
          this.uploading = true;
          this.timer = setInterval(() => this.value++, 10);
        }
      }
    }
  };
</script>

<style lang="less">
  .page-progress {
    .co-cell-value {
      flex: 2.5;
    }

    .co-progress {
      width: 100%;
    }

    .page-progress-wrapper {
      padding: 0 .5rem;
      margin-top: 2rem;
      .co-button{
        height: 2.25rem;
      }
    }
  }
</style>
