
<template>
  <div class="index-box scada-display-plugin">
    <div class="head">
      <el-checkbox v-model="contemporaneous" class="contemporaneous">同期数据叠加</el-checkbox>
      <div class="date-container">
        <span class="demonstration">时间段</span>
        <el-date-picker
          v-model="datetime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
      </div>
      <el-button @click="getHistoryData" type="primary" size="mini" style="margin-left:10px;">查询</el-button>
      <el-radio-group
        @change="changeShortcutDate"
        v-model="shortcutDate"
        class="shortcut-date-container"
      >
        <el-radio :label="0">日</el-radio>
        <el-radio :label="1">周</el-radio>
        <el-radio :label="2">月</el-radio>
      </el-radio-group>
      <el-button
        @click="openOverView"
        size="mini"
        id="over-view-bt"
        class="over-view-bt icon-more icon-yilantu"
        icon="el-icon-s-grid"
        type="primary"
      >一览</el-button>
      <i @click="close()" class="el-icon-close close-chart"></i>
    </div>
    <div class="main-container">
      <div class="aside">
        <ScadaTree :httpProp="httpProp" ref="scadaTree" :checkedProp="checkedProp"></ScadaTree>
      </div>
      <div class="charts">
        <Charts :httpProp="httpProp" ref="charts" @deleteFun="deleteFun" v-loading="loading"></Charts>
      </div>
    </div>
    <div class="over-screen" v-if="ScadaGlanceShow">
      <ScadaGlance
        :wsSocket="wsSocket"
        :httpProp="httpProp"
        v-if="ScadaGlanceShow"
        :ScadaGlanceShow="ScadaGlanceShow"
        @closeOverView="ScadaGlanceShow = false"
      ></ScadaGlance>
    </div>
  </div>
</template>

<script>
import ScadaTree from "./ScadaTree.vue";
import ScadaGlance from "./ScadaGlance.vue";
import Charts from "./Charts.vue";
import moment from "moment";
import Api from "./common/apiUtils";

export default {
  name: "scadaDisplay",
  components: {
    ScadaTree,
    Charts,
    ScadaGlance
  },
  props: {
    httpProp: {
      default: ""
    },
    wsSocket:{
      default: "ws://192.168.7.188:25097/"
    },
    checkedProp: {
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      ScadaGlanceShow: false,
      loading: false,
      checkedNodes: [],
      contemporaneous: "",
      datetime: [
        // moment().subtract(7,"days").format("YYYY-MM-DD HH:mm:ss"),
        moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "当日",
            onClick(picker) {
              const end = new Date();
              const start = moment().startOf('day').toDate();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              const start = moment().startOf('week').toDate();
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              const start = moment().startOf('month').toDate();
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      shortcutDate: 0
    };
  },
  created() {
    this.apiUtil = new Api(this.httpProp);
  },
  mounted() {
    // this.checkedChange(this.checkedProp);
    this.getHistoryData(this.checkedProp)
  },
  methods: {
    changeShortcutDate(val) {
      if (val === 0) {
        this.datetime = [
          // moment().subtract(1,"days").format('YYYY-MM-DD HH:mm:ss'),
          moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss')
        ];
      } else if (val === 1) {
        this.datetime = [
          // moment().subtract(1,"weeks").format('YYYY-MM-DD HH:mm:ss'),
          moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss')
        ];
      } else if (val === 2) {
        this.datetime = [
          // moment().subtract(1,"months").format('YYYY-MM-DD HH:mm:ss'),
          moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss')
        ];
      }
    },
    async getHistoryData(tags) {
      let url = "/api/scada/his";
      let stime = this.datetime[0];
      let etime = this.datetime[1];
      let scada_ids = await this.$refs.scadaTree.getChecked();
      this.checkedNodes = scada_ids;
      let arr = [];
      for (var i in scada_ids) {
        arr.push(scada_ids[i].TAG);
      }
      scada_ids = (tags&&Array.isArray(tags))?tags.join(","):arr.join(",");
      let fmt = "YYYY-MM-DD HH:mm:ss";
      let seconds = moment(etime, fmt).diff(moment(stime, fmt), "seconds");
      let hours = seconds / 3600;
      var type;
      // 根据选择的事件段获取步长
      if (hours <= 24) {
        type = "300";
      } else if (hours <= 24 * 7) {
        type = "300";
      } else {
        type = "3600";
      }
      url += `?stime=${stime}&etime=${etime}&ids=${scada_ids}&type=${type}`;
      this.loading = true;
      let scadaDatas = (await this.apiUtil.getData(url)).data;
      this.$refs.charts.updateCurve(scadaDatas);
      this.loading = false;
      // console.log(this.checkedNodes)
    },
    openOverView() {
      this.ScadaGlanceShow = true;
      console.log(this.ScadaGlanceShow);
    },
    checkedChange(nodes) {
      this.$refs.scadaTree.setCheckedNodes(nodes);
    },
    deleteFun(node) {
      // this.checkedNodes.splice(index, 1);
      this.checkedNodes = this.checkedNodes.filter(item => !item.children && item.ZBNAME !== node.name)
      // console.log(this.checkedNodes)
      this.checkedChange(this.checkedNodes);
      this.getHistoryData();
    },
  }
};
</script>

<style scoped>
.app {
  display: block !important;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #2d677b;
  background: grey;
  z-index: 1000;
}
.head {
  position: relative;
  height: 53px;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  background: var(--colorOne);
  padding: 0 38px;
}
.aside {
  border-right: 1px solid black;
  background: var(--colorOne);
  width: 600px;
  height: 100%;
  overflow-x: hidden;
}
.chart-container {
  border-left: 1px solid #000;
}
.main-container {
  display: flex;
  height: calc(100% - 54px);
  position: relative;
}

.charts {
  width: calc(100% - 400px);
  height: 100%;
}
.chart-container::-webkit-scrollbar {
  display: none;
}
.close-chart {
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.over-view-bt {
  position: absolute;
  top: 14px;
  right: 70px;
}
.over-view {
  position: absolute;
  width: 100%;
  height: calc(100% - 30px);
  top: 53px;
  left: 0;
}
.contemporaneous {
}
.contemporaneous .el-checkbox__label {
  color: #fff !important;
}
.date-container {
  margin-left: 50px;
}
.demonstration {
  color: #fff;
  margin-right: 7px;
  font-size: 14px;
}
.date-container .el-input__inner {
  width: 270px;
  height: 24px;
}
.date-container .el-date-editor .el-range__icon {
  line-height: 16px;
}
.date-container .el-date-editor .el-range__close-icon {
  line-height: 18px;
}
.date-container .el-range-editor .el-range-input {
  background: transparent;
}
.shortcut-date-container {
  margin-left: 50px;
}
.shortcut-date-container .el-radio .el-radio__label {
  color: #fff;
}
.shortcut-date-container .el-radio.is-checked .el-radio__label {
  color: #04b2f6;
}
.index-box {
  height: 100%;
  color: white !important;
}

.color-one {
  color: var(--colorOne);
}
.color-two {
  color: var(--colorTwo);
}
.color-three {
  color: var(--colorThree);
}
.over-screen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
