<template>
  <div class="weui_progress">
    <div class="weui_progress_bar">
      <div
        class="weui_progress_inner_bar"
        :style="{width: percent + '%'}"
      />
    </div>
    <a
      v-show="showCancel"
      href="javascript:;"
      class="weui_progress_opr"
    >
      <i
        class="weui_icon_cancel"
        @click="cancel"
      />
    </a>
  </div>
</template>

<script>
import Base from '../../libs/base'
export default {
  name: 'XProgress',
  mixins: [Base],
  props: {
    percent: {
      type: Number,
      default: 0
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    cancel () {
      this.$emit('on-cancel')
    }
  }
}
</script>
