<!--  -->
<template>
<view class="asp-mp-progress">
  <view class="asp-mp-progress__line" :style="{ width: getWidth }">
    <view class="asp-mp-progress__line-fill" :style="{ width: percentage+'%', background: statusMap[status].color }">
      <view v-if="showData" class="item">{{percentage}}%</view>
      <view v-if="showData" class="triangle"></view>
    </view>
  </view>
  <view v-if="!showData" class="asp-mp-progress__count">
    <asp-mp-icons v-if="statusMap[status].type" :type="statusMap[status].type" :color="statusMap[status].color" size="18"></asp-mp-icons>
    <view v-else>{{percentage}}%</view>
  </view>
</view>
</template>

<script>
export default {
  name: 'asp-mp-progress',
  props: {
    percentage: {
      type: [String, Number],
      default: 0,
      required: true,
      validator: val => val >= 0 && val <= 100
    },
    status: {
      type: String,
      default: 'pending',
      validator: val => ['pending', 'error', 'done', 'wait', 'pause', 'disable'].indexOf(val) > -1
    },
    showData: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getWidth () {
      if (this.showData) return '100%'
      return '90%'
    }
  },
  data () {
    return {
      statusMap: {
        pending: {
          color: '#1372F0',
          type: ''
        },
        error: {
          color: '#F62C30',
          type: 'clear'
        },
        done: {
          color: '#12C789',
          type: 'checkbox-filled'
        },
        wait: {
          color: '#1372F0',
          type: 'circle-filled'
        },
        pause: {
          color: '#B8E0FF'
        },
        disable: {
          color: '#D9D9D9'
        }
      }
    }
  }
}
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
@import './asp-mp-progress.scss'
</style>