<template>
  <div class="Inverter-Info">
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
    </div>
    <div class="box-main">
      <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List>
      <div class="Inverter-Info-body">
        <div class="Inverter-Info-title">
          <div class="title">逆变室编号:28#</div>
          <div class="title-tools">
            <div class="previous">上一页</div>
            <div class="next">上一页</div>
            <div class="return">返回</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import List from "@com/coms/list/list.vue";
import util from "@/helper/util.js";
export default {
  // 名称
  name: "Box",
  // 使用组件
  components: {
    BtnGroup2,
    List,
  },
  // 数据
  data() {
    return {
      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",
            },
          ],
        },
      ],
      list: {
        title: "逆变器列表",
        datas: [
          {
            text: "1#逆变室",
            color: "blue",
          },
        ],
      },
      grid: {
        title: {
          show: true,
          icon: "fa fa-fire",
          text: "第一号小室",
        },
        subTitle: {
          show: true,
          text: "3#逆变室",
          subText: "逆变器型号：GBL-2000",
        },
        start: 0,
        limit: 20,
        column: [{ name: "汇流箱编号", field: "no", is_num: false, is_light: false }],
        data: {
          list: [],
          total: 160,
        },
      },
    };
  },
  // 函数
  methods: {
    selectList: function(item) {
      console.log(item);
    },
    select: function(item) {
      console.log(item);
    },
    onReturn: function() {
      console.log("return");
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    for (let i = 2; i <= 16; i++) {
      let t = {
        text: i + "#逆变室",
      };
      if (i <= 5) {
        t.color = "blue";
      } else if (i <= 6) {
        t.color = "green";
      } else if (i <= 8) {
        t.color = "red";
      } else {
        t.color = "yellow";
      }
      this.list.datas.push(t);
    }
    for (let i = 1; i <= 28; i++) {
      let temp = { name: i + "#", field: "n" + i, is_num: false, is_light: false };
      if (i == 11) {
        temp.is_light = true;
      }
      this.grid.column.push(temp);
    }
    for (let i = 1; i <= 12; i++) {
      let temp = {
        no: "第" + i + "支电流",
        is_light: false,
      };
      for (let i = 1; i <= 28; i++) {
        temp["n" + i] = 5.9;
      }
      this.grid.data.list.push(temp);
    }
    let temp = {
      no: "总路数",
      is_light: true,
    };
    for (let i = 1; i <= 28; i++) {
      temp["n" + i] = 8.0;
    }
    this.grid.data.list.push(temp);
    temp = {
      no: "总电流",
      is_light: false,
    };
    for (let i = 1; i <= 28; i++) {
      temp["n" + i] = 5.9;
    }
    this.grid.data.list.push(temp);
    temp = {
      no: "电压",
      is_light: false,
    };
    for (let i = 1; i <= 28; i++) {
      temp["n" + i] = 162.0;
    }
    this.grid.data.list.push(temp);
    temp = {
      no: "内部温度",
      is_light: false,
    };
    for (let i = 1; i <= 28; i++) {
      temp["n" + i] = 0.0;
    }
    this.grid.data.list.push(temp);
    temp = {
      no: "避雷信号",
      is_light: false,
    };
    for (let i = 1; i <= 28; i++) {
      temp["n" + i] = 0.0;
    }
    this.grid.data.list.push(temp);
    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
    this.grid.data.total = this.grid.data.list.length;
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
.state-green {
  width: 0.741vh;
  height: 0.741vh;
  background-color: @green;
}

.Inverter-Info {
  width: 100%;
  height: 100%;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

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

  .box-main {
    width: 100%;
    height: calc(100vh - 12.963vh);
    display: flex;
    flex-direction: row;
    margin-top: 1.481vh;

    .list {
      margin-right: 1.481vh;
      flex: 0 0 auto;
    }

    .Inverter-Info-body {
      flex: 1 0 auto;

      .Inverter-Info-title {
        position: relative;
        background: fade(@darkgray, 40);
        padding: 16px 20px;
        .title {
          font-size: @fontsize;
          color: @green;
        }

        .title-tools {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;

          & > div {
            padding: 16px;
          }

          .return {
            padding-left: 40px;
          }
        }
      }
    }
  }
}
</style>
