<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="progress-div">
          <el-progress :percentage="data.echartsData.seriesData[index]" :color="{remouldAfter:'#2d74e7',remouldAfterTarget:'#0cc96e',remouldBefore:'#05cad7'}[item]" :show-text="false" :stroke-width="15"></el-progress>
        </div>
        <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>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</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: 14px;
        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% - 240px);
        margin-bottom: 15px;
        .el-progress {
          >>> .el-progress-bar__outer {
            border-radius: 0;
            background-color: transparent;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
      &:last-child {
        .progress-div {
          margin-bottom: 0px;
        }
      }
      .zb-des {
        float: left;
        width: 240px;
        font-size: 14px;
        text-align: right;
        color: #333333;
      }
    }
  }
}
</style>