<template>
  <div class="coulometric-analysis">
    <tab @select="selectionItemClick" />
    <row>
      <Col :span="12">
        <div class="coulometric-info">
          <svg-icon svgid="svg-arrow-up" class="icon green" />
          <span class="title gray">增发电量</span>
          <span class="value">{{ AddElectricity }}</span>
        </div>
        <percent-card :value="PromotionRate" color="green" title="提升率" />
        <card-1
          class="increase-info"
          title="及时并网增发电量"
          :value="IncreasePower"
        />
        <card-1
          class="increase-info"
          title="主动维护降低损失电量"
          :value="Maintenance"
        />
      </Col>
      <Col :span="12">
        <div class="coulometric-info">
          <svg-icon svgid="svg-arrow-down" class="icon yellow" />
          <span class="title gray">降低损失</span>
          <span class="value">{{ ReduceLosses }}</span>
        </div>
        <percent-card :value="ReductionRate" color="yellow" title="" />
        <div>
          <card-1
            class="increase-info"
            title="因偏航对风超出范围"
            :value="OutRange"
            :isIncrease="false"
          />
        </div>
        <div>
          <card-1
            class="increase-info"
            title="降出力运行"
            :value="ReducedOutput"
            :isIncrease="false"
          />
        </div>
      </Col>
    </row>
  </div>
</template>

<script>
import percentCard from "@/components/coms/cards/percent-card.vue";
import Col from "@/components/coms/grid/col.vue";
import Row from "@/components/coms/grid/row.vue";
import Tab from "@/components/coms/tabs/tab.vue";
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
import Card1 from "../../../components/coms/cards/card-1.vue";

export default {
  components: { percentCard, Row, Col, Tab, SvgIcon, Card1 },
  data() {
    // 电量分析
    return {
      // 增发电量
      AddElectricity: 30,
      // 降低损失
      ReduceLosses: 40,
      // 提升率
      PromotionRate: 25,
      // 降低率
      ReductionRate: 30,
      //及时并网增发电量
      IncreasePower: 123,
      //主动维护降低损失电量
      Maintenance: 123,
      //因偏航对风超出范围
      OutRange: 123,
      //降出力运行
      ReducedOutput: 123,
    };
  },
  methods: {
    selectionItemClick(item) {
      console.log(item);
    },
  },
};
</script>

<style lang="less">
.coulometric-analysis {
  padding: 0 1.481vh;

  .coulometric-info {
    margin-bottom: 2.222vh;
    .title {
      font-size: @fontsize;
      margin-right: 0.741vh;
    }
    .value {
      font-size: @fontsize;
    }
  }

  .increase-info {
    margin: 2.778vh 0;
  }

  .icon {
    width: 1.204vh;
    height: 1.204vh;
    margin-right: 0.741vh;

    &.green use {
      fill: @green;
    }

    &.yellow use {
      fill: @yellow;
    }
  }
}
</style>
