<template>
  <div class="login">
    <!-- 1#主变 油色谱 -->
    <!-- 标题和内容 -->
    <div class="pageCardTitle" v-show="hideSwitchShow">
      {{ pageCardTitle }}
      <div class="iconSvg closeSvg" @click="changeStatus(true)">
        <svg-icon slot="prefix" icon-class="close" className="svg" />
      </div>
    </div>
    <div
      class="pageCard backgroundTitle"
      :style="'background-image:url(' + oilChromatography + ');'"
      v-show="cardShow"
    >
      <!-- tendencyChart文字标题 -->
      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
      <div class="cardTitle">
        {{ pageCardTitle }}
        <div class="iconSvg" @click="changeStatus(false)">
          <svg-icon slot="prefix" icon-class="open" className="svg" />
        </div>
      </div>
      <div class="cardContent">
        <div class="">
          <el-row>
            <el-col
              :span="8"
              v-for="(item, key) in oilChromatographyData"
              :key="key"
            >
              <div class="project">
                <span class="projectVal">{{ item.value }}uL/L</span>
                <span class="projectLable">{{ item.lable }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="cardDate" style="border: none">
          采样时间 {{ samplingDate }}
        </div>
        <div class="cardTab">
          <el-tabs
            :tab-position="tabPosition"
            v-model="activeName"
            @tab-click="handleChangeChart"
          >
            <el-tab-pane
              v-for="(item, index) of oilChromatographyLableData"
              :key="index"
              :label="item.lable"
              :name="item.id"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const defaultText = "- - ";
import {
  oilChromaControllerTable,
  oilChromaControllerLine,
  getLxId,
  getEqmId,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
import oilChromatography from "@/assets/page_left/oilChromatography.png";
export default {
  name: "Login",
  data() {
    return {
      activeName: "",
      dataId: "",
      loading: false,
      // 左边
      oilChromatography: oilChromatography,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      tendencyChartTitle: "1#主变 油色谱",
      pageCardTitle: "1#主变 油色谱",
      oilChromatographyData: [
        {
          value: defaultText,
          lable: "甲烷",
          field: "ch4ppm",
        },
        {
          value: defaultText,
          lable: "乙烯",
          field: "c2h4ppm",
        },
        {
          value: defaultText,
          lable: "乙烷",
          field: "c2h6ppm",
        },
        {
          value: defaultText,
          lable: "乙炔",
          field: "c2h2ppm",
        },
        {
          value: defaultText,
          lable: "氢气",
          field: "h2ppm",
        },
        {
          value: defaultText,
          lable: "一氧化碳",
          field: "coppm",
        },
        {
          value: defaultText,
          lable: "二氧化碳",
          field: "co2ppm",
        },
        {
          value: defaultText,
          lable: "微水",
          field: "h2oppm",
        },
        {
          value: defaultText,
          lable: "总烃",
          field: "totalhydrocarbon",
        },
      ],
      samplingDate: "2021-10-11 15:15:30",
      // 趋势图信息
      legendData: [],
      xAxisData: [],
      seriesData: [],
      // websocket信息
      requestPath: "",
      socket: "",
      oilChromatographyLableData: [],
      EqmId: "",
    };
  },
  created() {
    // 表格数据
    this.tableData();
    // 初始化websocket
    // this.init();
  },
  methods: {
    // // 初始化webscoket
    // init: function () {
    //   if (typeof WebSocket === "undefined") {
    //     alert("您的浏览器不支持socket");
    //   } else {
    //     // 实例化socket
    //     this.socket = new WebSocket(this.requestPath);
    //     // 监听socket连接
    //     this.socket.onopen = this.open;
    //     // 监听socket错误信息
    //     this.socket.onerror = this.error;
    //     // 监听socket消息
    //     this.socket.onmessage = this.getMessage;
    //   }
    // },
    // open: function () {
    //   console.log("socket连接成功");
    //   this.send()
    // },
    // error: function () {
    //   console.log("连接错误");
    // },
    // getMessage: function (msg) {
    //   console.log(msg.data, "socket返回数据=========");
    // },
    send() {
      // websocket请求无法设置请求头，在此采用建立连接之后主动推送token和userId给后端
      // sessionStorage.getItem("userName")
      const token = this.$cookies.get("token");
      const userId = this.$cookies.get("username");
      this.socket.send(
        JSON.stringify({
          auth: token,
          user_id: userId,
          params: {
            headers: {
              Connection: "upgrade", // 此处看后端要求
            },
          },
        })
      );
    },
    // 初始化数据
    tableData() {
      let lableArr = [];
      getLxId(1, 1)
        .then((response) => {
          const { code, data, msg } = response;
          this.loading = false;
          if (code === 200) {
            this.activeName = data[0].lxid;
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              if (index <= 5) {
                lableArr.push({
                  lable: index + 1 + "#",
                  id: element.lxid,
                });
              }
            }
            this.oilChromatographyLableData = lableArr;
            getEqmId(1, this.activeName, 1).then((response) => {
              const { code, data, msg } = response;
              this.loading = false;
              if (code === 200) {
                this.EqmId = data[0].id;
                this.getData();
              }
            });
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    getData() {
      oilChromaControllerTable(this.EqmId)
        .then((response) => {
          const { code, data, msg } = response;
          this.loading = false;
          if (code === 200 && data) {
            console.log("dddddddddddddddddddddddddddddddddddddddddd");
            console.log(data);
            this.samplingDate = data.dtime;
            for (const key in data) {
              for (
                let index = 0;
                index < this.oilChromatographyData.length;
                index++
              ) {
                if (this.oilChromatographyData[index].field === key) {
                  console.log(this.oilChromatographyData[index].field);
                  this.oilChromatographyData[index].value = data[key]
                    ? data[key]
                    : defaultText;
                }
              }
            }
          } else {
            this.oilChromatographyData.forEach((element) => {
              element.value = defaultText;
            });
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
      oilChromaControllerLine(this.EqmId)
        .then((response) => {
          const { code, data, msg } = response;
          this.loading = false;
          const arr = [];
          if (code === 200) {
            console.log(data);
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              this.legendData.push(element.gas);
              arr.push({
                name: element.gas,
                data: echartData(element.currentVals),
              });
              this.seriesData = arr;
            }
            this.xAxisData = data[0].dtimes;
            this.tendencyChartChange();
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    // 点击标签页
    handleChangeChart(tab) {
      this.tendencyChartTitle = tab.label + "主变 油色谱";
      this.pageCardTitle = tab.label + "主变 油色谱";
      getEqmId(1, tab.name, 1).then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          this.EqmId = data[0].id;
          this.getData();
        } else {
          this.msgError(msg);
        }
      });
    },
    // 点击开关
    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() {
      //   通知home页图标数据处理
      this.$emit(
        "dataDispose",
        this.legendData,
        this.xAxisData,
        this.seriesData,
        this.tendencyChartTitle
      );
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/stylesheet/card";
</style>
