<template>
  <div class="agc">
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
    </div>
    <div class="panel-groups">
      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></AgcPanel>
    </div>
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import AgcPanel from "./components/agc-panel.vue";
export default {
  // 名称
  name: "Agc",
  // 使用组件
  components: {
    BtnGroup2,
    AgcPanel,
  },
  // 数据
  data() {
    return {
      datas: [
        {
          title: "某某风电场",
          subTitle: "(调度名称)",
          icon: "fa fa-gears",
          color: "green",
        },
      ],
      btnGroups: [
        {
          icon: "fa fa-fire",
          btns: [
            {
              text: "某某风电场",
              code: "mmfdc1",
            },
            {
              text: "麻黄山风场",
              code: "mhsfc",
            },
            {
              text: "某某风电场",
              code: "mmfdc2",
            },
            {
              text: "某某风电场",
              code: "mmfdc3",
            },
            {
              text: "某某风电场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "fa fa-fire-extinguisher",
          btns: [
            {
              text: "某某光伏",
              code: "mmgf1",
            },
            {
              text: "某某光伏",
              code: "mmgf2",
            },
            {
              text: "某某光伏",
              code: "mmgf3",
            },
            {
              text: "某某光伏",
              code: "mmgf4",
            },
          ],
        },
      ],
    };
  },
  // 函数
  methods: {
    select: function(item) {
      console.log(item);
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    for (let i = 1; i < 12; i++) {
      this.datas.push(JSON.parse(JSON.stringify(this.datas[0])));
      if (i % 2 == 0) {
        this.datas[i].color = "red";
      }
    }
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
.agc {
  height: calc(100vh - 7.222vh);
  overflow: auto;
  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .panel-groups {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;

    .panel-item {
      width: calc(25% - 1.204vh);
      height: 26.852vh;
      margin-left: 1.481vh;
      margin-top: 1.481vh;

      &:nth-child(4n + 1) {
        margin-left: 0;
      }
    }
  }
}
</style>
