<template>
  <div class="default-progress-box cube-common-box" :style="proxy_params|filterMargin" v-if="dataBody.length>0  && proxy_params!='{}'">
    <p class="title">{{proxy_params.title}}</p>
    <div class="content" :style="{background:proxy_params.background}">
      <strong class="target-value" v-html="proxy_progress_data"></strong>
      <span class="target-name">{{proxy_params.targetName}}</span>
      <div class="bar-box">
        <div class="bar-outer" :style="{height:proxy_params.strokeWidth/10+'em'}">
          <div class="bar-inner" :style="{width:left_proxy('achieve'),background:color_proxy}">
            <span class="icon-style" :class="icon_proxy" :style="{bottom:(proxy_params.strokeWidth+2)/10+'em',left:left_proxy('achieve')}">
              {{left_proxy('achieve')}}
            </span>
          </div>
          <span class="icon-style time-icon" :style="{left:left_proxy('time')}">
            {{left_proxy('time')}}
          </span>
        </div>
        <div class="legend">
          <span v-for="(item,index) in legend" :key="item">
            <em class="circle" :style="{background:legend_color_proxy(index)}"></em>
            <font>{{item}}</font>
          </span>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import myMixin from '../../mixin';
export default {
  name: 'cube-progress',
  mixins:[myMixin],
  props: {
    params: {
      default: function () {
        return {
          title: '',
          background: '#f8f8f8',
          marginTB: 0,
          marginLR: 1,
          targetName: '目标销售额(万元)',
          values: [{
            format: 'original',
            fixed: 2,
            addColor: false,
            colorNumber: 0
          }],
          strokeWidth: 6,
          excessColor: '#d53535',
          lackColor: '#81c9ac',
          timeColor: 'rgb(234, 178, 79)',
        }
      }
    }
  },
  data() {
    return {
      legend: ["完成进度(达标)", '完成进度(未达标)', '时间进度']
    }
  },
  filters: {
    filterMargin: function (v) {
      return "margin:" + v.marginTB + 'em ' + v.marginLR + 'em'
    }
  },
  computed: {
    proxy_progress_data: function () {
      if(this.dataBody && this.dataBody.length>0 && this.dataBody[0].length>0)
       return this.filterValue(this.dataBody[0][1], this.proxy_params.values[0])
    },
    left_proxy: function () {
      return function (type) {
        //四舍五入
        let current_num = parseFloat(this.dataBody[0][3]);
        let time_num = parseFloat(this.dataBody[0][2]);
        let typeName = (type === 'time' ? time_num : current_num)
        if (typeName < 0) {
          return '0%'
        } else if (typeName > 1) {
          return '100%'
        } else {
          return (typeName * 100).toFixed(0) + '%';
        }
      }
    },
    color_proxy: function () {
      if (this.dataBody[0].length > 0) {
        return ((parseFloat(this.dataBody[0][2]) > parseFloat(this.dataBody[0][3])) ? this.proxy_params.excessColor : this.proxy_params.lackColor)
      }
    },
    icon_proxy: function () {
      if (this.dataBody[0].length > 0) {
        return (parseFloat(this.dataBody[0][2]) < parseFloat(this.dataBody[0][3])) ? 'excess-icon' : 'lack-icon'
      }
    },
    legend_color_proxy: function () {
      return function (index) {
        switch (index) {
          case 0:
            return this.proxy_params.lackColor
            break;
          case 1:
            return this.proxy_params.excessColor
            break;
          case 2:
            return this.proxy_params.timeColor
            break;
          default:
            return this.proxy_params.excessColor
        }
      }
    },

  }
}
</script>
<style lang="scss" scoped>
.default-progress-box {
  font-size: 1.2em;
  color: #333;
  .title {
    padding: 1em 0;
  }
  .content {
    width: 100%;
    border-radius: 0.4em;
    padding: 1em 1.5em;
    text-align: center;
    .target-value {
      font-size: 2em;
    }
    .target-name {
      display: block;
      color: #999;
    }
    .bar-box {
      .bar-outer {
        margin: 3em 0;
        background: #ebeef5;
        border-radius: 10em;
        position: relative;
      }
      .bar-inner {
        height: inherit;
        border-radius: 20em;
      }
      .icon-style {
        text-align: center;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
        display: inline-block;
        color: #fff;
        width: 3.2em;
        position: absolute;
        transform: translateX(-50%);
      }
      .lack-icon {
        background-image: url("../../assets/imgs/no-rea.png");
        height: 1.6em;
        line-height: 1.45em;
      }
      .excess-icon {
        background-image: url("../../assets/imgs/reached.png");
        height: 1.6em;
        line-height: 1.45em;
      }
      .time-icon {
        background-image: url("../../assets/imgs/time.png");
        height: 2.6em;
        line-height: 3.6em;
        top: 0;
      }

      .legend {
        display: flex;
        justify-content: space-between;
        color: #999;
        padding-bottom: 0.5em;
        span {
          .circle {
            width: 1em;
            height: 1em;
            border-radius: 50%;
            display: inline-block;
            background: red;
            transform: scale(0.5);
            transform-origin: left;
            vertical-align: middle;
          }
          font {
            vertical-align: middle;
            margin-left: -0.4em;
          }
        }
      }
    }
  }
}
</style>
    