<template>
  <div class="login">
    <!-- 1#主变 油色谱 -->
    <!-- 标题和内容 -->
    <div class="pageCardTitle" v-show="hideSwitchShow">
      <div><span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span></div>
      <div class="iconSvg closeSvg" @click="changeStatus(true)">
        <svg-icon slot="prefix" icon-class="close" className="svg" />
      </div>
    </div>
    <div
      class="pageCard backgroundTitle monitoringDevice"
      :style="'background-image:url(' + monitoringDevice + ');'"
      v-show="cardShow"
    >
      <div class="cardTitle">
        <div>
          <span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span>
        </div>
        <div class="iconSvg" @click="changeStatus(false)">
          <svg-icon slot="prefix" icon-class="open" className="svg" />
        </div>
      </div>
      <div class="cardContent">
        <Tablemodule
          :table-loading="loading"
          :option="tableData.column"
          :data="tableData.data"
        ></Tablemodule>
      </div>
    </div>
  </div>
</template>

<script>
import { getEquNum } from "@/api/home/home";
// 左边
import monitoringDevice from "@/assets/page_right/monitoringDevice.png";
// 引入table组件
import Tablemodule from "@/components/Tablemodule/index";
export default {
  name: "Login",
  components: {
    Tablemodule,
  },
  data() {
    return {
      loading: false,
      // 左边
      monitoringDevice: monitoringDevice,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      pageCardTitle: "",
      tableData: {
        column: [
          {
            label: "主设备类型",
            prop: "type",
          },
          {
            label: "装置数量(个)",
            prop: "num",
          },
        ],
        data: [
          {
            type: "变压器",
            num: '0',
            prop: "byqNum",
          },
          {
            type: "GIS",
            num: '0',
            prop: "gisNum",
          },
          {
            type: "避雷器",
            num: '0',
            prop: "blqNum",
          },
          {
            type: "开关柜",
            num: '0',
            prop: "cwNum",
          },
          {
            type: "电缆",
            num: '0',
            prop: "dlNum",
          },
          {
            type: "发电机",
            num: '0',
            prop: "otherNum",
          },
        ],
      },
      samplingDate: "2021-10-11 15:15:30",
      number: {},
    };
  },
  created() {
    this.getEquNum();
  },
  methods: {
    // 点击开关
    changeStatus: function ($event) {
      if (!$event) {
        this.cardShow = false;
        this.hideSwitchShow = true;
        this.switchValue = false;
      } else {
        this.cardShow = true;
        this.hideSwitchShow = false;
        this.switchValue = true;
      }
    },
    tendencyChartChange(type) {
      let unit = "mA";
      let legendData = ["铁芯泄露电流", "夹件泄漏电流"];
      let xAxisData = ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06"];
      let seriesData = [
        { name: "铁芯泄露电流", data: [10, 25, 2, 100, 59, 78, 36] },
      ];
      this.$emit("dataDispose", unit, legendData, xAxisData, seriesData);
    },
    // 获取数量
    getEquNum() {
      this.loading=true
      getEquNum().then((response) => {
        const { code, data, msg } = response;
        if (code === 200) {
          this.number = data;
          const arr = this.tableData.data;
          for (let index = 0; index < arr.length; index++) {
            const element = arr[index];
            for (const key in data) {
              if (element.prop === key) {
                arr[index].num = data[key].toString();
              }
            }
          }
        } else {
          this.msgError(msg);
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/stylesheet/card";
// 开光样式
.pageCard {
  //  min-height: 370px!important;
  .cardTitle {
    padding: 0px 30px 0px 20px;
  }
  .cardTitle span {
    // padding: 0 5px;
    box-sizing: border-box;
  }
}

.pageCard .cardContent {
  padding: 30px !important;
  box-sizing: border-box;
}
</style>