<template>
  <!-- 这里只做展示，文件上传里的进度条功能都在upload里实现 -->
  <div class="k-progress">
    <span class="icon-huixingzhen" v-if="type!=='upload'"></span>
    <span class="k-progress-name" v-if="type!=='upload'">{{filename}}</span>
    <div class="k-progress_outer">
      <div class="k-progress_in" :style="{width: strokeWidth}"></div>
    </div>
    <div class="k-percent" v-show="status">
      <span>{{percent}}%</span>
      <a href="javascript:;" class="icon-close" @click="close"></a>
    </div>

  </div>
</template>
<script>
export default {
  name: "YProgress",
  props: {
    percent: {
      type: Number,
      default: 0,
      required: true,
      validator: val => val >= 0 && val <= 100
    },
    status: {
      type: Boolean,
      default: true
    },
    filename: {
      type: String,
      default: '文件名.jpg'
    },
    type: { // 上传文件的传入upload
      type: String,
      default: ''
    }

  },
  computed: {
    strokeWidth () {
      return this.percent + '%'
    }
  },
  methods: {
    close () {
      console.log('do something')
      this.$emit('close')
    }
  }

};
</script>

