<template>
  <div class="power-plan">
    <tab @select="selectionItemClick" :data="tabs" class="power-plan-tab" />
    <row>
      <Col :span="12">
        <percent-card-2 title="月计划完成率" TotalText="实际" ActualText="计划" :TotalValue="monthPlan.plan" :ActualValue="monthPlan.actual" />
      </Col>
      <Col :span="12">
        <percent-card-2 title="年计划完成率" TotalText="实际" ActualText="计划" :TotalValue="yearPlan.plan" :ActualValue="yearPlan.actual" />
      </Col>
    </row>
  </div>
</template>

<script>
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 PercentCard2 from "../../../components/coms/cards/percent-card-2.vue";
export default {
  components: { Row, Col, Tab, PercentCard2 },
  data() {
    return {
      // tab项
      tabs: [
        {
          id: "1",
          text: "风电",
        },
        {
          id: "2",
          text: "光电",
        },
        {
          id: "3",
          text: "总和",
        },
      ],
      // 月计划完成率
      monthPlan: {
        plan: 100,
        actual: 40,
      },
      // 年计划完成率
      yearPlan: {
        plan: 100,
        actual: 25,
      },
    };
  },
  methods: {
    selectionItemClick(item) {
      // 点击tab选项 模拟数据变化
      // 动态改变子组件数据变化
      this.monthPlan = {
        plan: 100,
        actual: 25,
      };
      this.yearPlan = {
        plan: 100,
        actual: 45,
      };
    },
  },
};
</script>

<style lang="less">
.power-plan {
  padding: 0 1.481vh;
  .power-plan-tab {
    margin-bottom: 2.222vh;
  }
}
</style>
