<template>
  <div class="zb-item">
    <div class="zb-item-left">
      <div>{{data.ratio||''}}</div>
      <div>{{data.waterQualityIndex||''}}</div>
    </div>
    <div class="zb-item-right">
      <div class="progress-info" v-for="(item,index) in data.echartsData.xaxisData" :key="index">
        <!-- <div class="zb-des" v-if="item=='remouldAfter'">改造后：<span style="color:#2d74e7">{{data.remouldAfter||''}}</span></div>
        <div class="zb-des" v-else-if="item=='remouldAfterTarget'">预期目标：<span :style="{color:data.result=='达标'?'#0cc96e':'#f33d48'}">{{data.remouldAfterTarget||''}} {{data.result||''}}</span></div>
        <div class="zb-des" v-else-if="item=='remouldBefore'">改造前：<span style="color:#05cad7">{{data.remouldBefore||''}}</span></div> -->
        <div class="zb-des">{{`${{remouldAfter:'改造后',remouldAfterTarget:'预期目标',remouldBefore:'改造前'}[item]}：`}}</div>
        <div class="progress-div">
          <el-progress :percentage="getPercentage(data.echartsData.seriesData,index)" :color="{remouldAfter:'#2d74e7',remouldAfterTarget:'#0cc96e',remouldBefore:'#05cad7'}[item]" :text-inside="true" :stroke-width="15"
            :class="[getClass(item,data)]" :format="(value)=>{return progressText(item,data)}"></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    getPercentage(seriesData, index) {
      const max = Math.max(...seriesData) // 三个数中的最大值
      // 按照最大值的103%作为100%
      // const total = max * [1.01,1.02,1.03,1.04,1.05][Math.round(Math.random()*4)]
      const total = max * 1.03
      return (seriesData[index] / total) * 100
    },
    /**
     * 格式化显示文字
     */
    progressText(item, data) {
      if (item == 'remouldAfter') return data.remouldAfter || '';
      else if (item == 'remouldAfterTarget') return `${data.remouldAfterTarget || ''} ${data.result || ''}`;
      else if (item == 'remouldBefore') return data.remouldBefore || '';
    },
    /**
     * 自定义类
     */
    getClass(item, data) {
      if (item == 'remouldAfter') return 'remouldAfter';
      else if (item == 'remouldAfterTarget') return data.result == '达标' ? 'remouldAfterTarget-up' : 'remouldAfterTarget-down';
      else if (item == 'remouldBefore') return 'remouldBefore';
    }
  }
}
</script>

<style lang="scss" scoped>
.zb-item {
  padding: 30px 0;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  .zb-item-left {
    float: left;
    width: 90px;
    height: 75px;
    background-color: #e6eefc;
    > div {
      width: 100%;
      height: 50%;
      text-align: center;
      &:first-child {
        line-height: 280%;
        font-weight: 600;
        color: #2d74e7;
      }
      &:last-child {
        line-height: 150%;
        font-size: 12px;
        color: #333333;
      }
    }
  }
  .zb-item-right {
    float: left;
    margin-left: 20px;
    width: calc(100% - 110px);
    .progress-info {
      width: 100%;
      overflow: hidden;
      .progress-div {
        float: left;
        width: calc(100% - 160px);
        margin-bottom: 15px;
        .el-progress {
          >>> .el-progress-bar__outer {
            border-radius: 0;
            background-color: transparent;
            overflow: visible;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
          >>> .el-progress-bar__innerText {
            position: absolute;
            font-size: 14px;
          }
          &.remouldAfter {
            >>> .el-progress-bar__innerText {
              color: #2d74e7;
            }
          }
          &.remouldAfterTarget-up {
            >>> .el-progress-bar__innerText {
              color: #0cc96e;
            }
          }
          &.remouldAfterTarget-down {
            >>> .el-progress-bar__innerText {
              color: #f33d48;
            }
          }
          &.remouldBefore {
            >>> .el-progress-bar__innerText {
              color: #05cad7;
            }
          }
        }
      }
      &:last-child {
        .progress-div {
          margin-bottom: 0px;
        }
      }
      .zb-des {
        float: left;
        width: 70px;
        font-size: 14px;
        text-align: right;
        color: #333333;
      }
    }
  }
}
</style>