<template>
  <view class="ml-progress-bar" :class="className">
    <view v-if="showHeader || title" class="progress-bar-header">
      <slot name="header">
        <view v-if="title" class="progress-header-title" :class="{'is-underline': titleUnderline}">{{ title }}</view>
        <view v-if="showTitleNum" class="progress-header-num">{{ titleNum || (`${percNum}${unit || ''}`) }}</view>
      </slot>
    </view>
    <view class="progress-bar-chart" @click="barClick">
      <view v-if="showBarTitle" class="progress-bar-left" :style="barLeftStyle">
        <slot name="bar_title">
          <text>{{ barTitle || '' }}</text>
        </slot>
      </view>
      <view class="progress-bar-content">
        <progress
        :percent="percNum"
        :activeColor="activeColor || '#1890FF'"
        :backgroundColor="backgroundColor"
        :strokeWidth="strokeWidth"
        :fontSize="fontSize"
        :border-radius="borderRadius" />
        <view v-if="showBarRatio" class="progress-bar-ratio">{{ barRatio || `${value}/${max}` }}</view>
      </view>
      <view v-if="showBarNum" class="progress-bar-right">
        <slot name="bar_num">
          <text>{{ barNum || (`${percNum}${unit || ''}`) }}</text>
        </slot>
      </view>
    </view>
    <view class="progress-bar-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  name: 'MlProgressBar',
  options: {
    virtualHost: true
  },
  props: {
    value: [Number, String],
    max: {
      type: Number,
      default: 100
    },
    title: String,
    titleUnderline: Boolean,
    showHeader: Boolean,
    showBarTitle: Boolean,
    barTitle: String,
    barTitleWidth: [Number, String],
    strokeWidth: {
      type: [Number, String],
      default: 16
    },
    activeColor: String,
    fontSize: {
      type: String,
      default: '24rpx'
    },
    borderRadius: {
      type: String,
      default: '4rpx'
    },
    backgroundColor: String,
    showTitleNum: Boolean,
    titleNum: [Number, String],
    showBarNum: Boolean,
    barNum: Boolean,
    showBarRatio: Boolean,
    barRatio: Boolean,
    unit: String,
    className: String
  },
  computed: {
    barLeftStyle () {
      let stys = ''
      if (this.barTitleWidth) {
        stys = `width: ${XEUtils.isString(this.barTitleWidth) ? this.barTitleWidth : `${this.barTitleWidth}rpx`}`
      }
      return stys
    },
    percNum () {
      return Math.ceil(XEUtils.toNumber(this.value) / (Math.max(1, XEUtils.toNumber(this.max)) / 100))
    }
  },
  methods: {
    barClick () {
      this.$emit('bar-click')
    }
  }
}
</script>

<style lang="scss">
.ml-progress-bar {
  font-size: $ml-base-font-size;
  .progress-bar-header {
    display: flex;
    flex-direction: row;
    text-align: left;
  }
  .progress-bar-chart {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 12rpx 0;
    .progress-bar-left,
    .progress-bar-right {
      flex-shrink: 0;
      font-size: 24rpx;
      line-height: 28rpx;
      padding: 0 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .progress-bar-left {
      width: 80rpx;
    }
    .progress-bar-right {
      width: 120rpx;
    }
    .progress-bar-content {
      flex-grow: 1;
      overflow: hidden;
      position: relative;
    }
    .progress-bar-ratio {
      position: absolute;
      top: 0;
      left: 4rpx;
      font-size: 24rpx;
      line-height: 28rpx;
      color: #fff;
    }
  }
  .progress-header-title {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.85);
    &.is-underline {
      text-decoration: underline;
    }
  }
  .progress-header-num {
    flex-shrink: 0;
  }
}
</style>
