<template>
  <div class="my-container">
    <div class="table-page-search-wrapper">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-row :gutter="24">
        <a-col :md="6" :sm="8">
          <a-form-item label="设备名称">
            <j-select-device style="color:white" placeholder="请选择设备名称" :multiple="false" v-model="queryParam.deviceId" @change="deviceChange"/>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="7">
          <a-form-item label="传感器">
            <a-select
              placeholder="请选择传感器"
              :multiple="true"
              v-model="queryParam.sensorId"
              @change="numberChange"
              :filter-option="filterOption"
            >
              <a-select-option v-for="d in sensorDicDatas" :key="d.id" :value="d.id" >
                {{d.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="7">
          <a-form-item label="检测项">
            <a-select placeholder="请选择检测项"
                      :multiple="true"
                      v-model="selectedValues"
                      mode="multiple"
                      @change="itemChange"
                      :filter-option="filterOption"
                      style="height:100%;overflow-x: auto;"
            >
              <a-select-option v-for="d in itemDatas" :key="d.checkItem" :value="d.checkItem" >
                {{d.checkItem}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="7">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button  @click="searchQuery1">查询</a-button>
<!--              <a-button style="margin-left: 8px" @click="searchReset1">重置</a-button>-->
              </span>
        </a-col>
      </a-row>
    </a-form>

<!--    <dv-border-box-8>-->
    <div id="myChart" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:10px;" ></div>
<!--    </dv-border-box-8>-->
  </div>
  </div>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
import { getAction } from '@api/manage'
import JSelectSensor from '@comp/jeecgbiz/JSelectSensor'
import LineSmooth from "@comp/chart/LineSmooth";
import LineChartMultipleTwo from "@comp/chart/LineChartMultipleTwo";
export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    LineSmooth,
    JSelectDevice,
    LineChartMultipleTwo,
    JSelectSensor,
  },
  data() {
    return {
      url: {
        list: "/sensor/buSensorDeviceData/list",
        sensor: "/sensor/buSensorDeviceData/getSensorDatas",
        getOnlineSensorData: "/sensor/buSensor/getOnlineSensorData",
        itemData: "/sensor/buSensor/getItemData",
      },
      sensorDicDatas:[],
      selectedValues: [], // 已选择的值
      itemDatas:[],
      deviceId:"",
      sensorId: "",
    };
  },
  // mounted() {
  //   this.nowChart()
  // },
  methods: {
    nowChart(id,data,item){
      let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
      if (!myChart) {
        myChart = this.$echarts.init(document.getElementById("myChart"));
      }
      function functionXdata(data) {
        let xData = [];
        for (let a = 0; a < data["x"].length; a++) {
          xData.push(data["x"][a]);
        }
        return xData;
      }
      function functionCount(data) {
        let com = item.split(",");
        let ser = [];
        for (let i=0; i<data["y"].length; i++) {
          let yData= [];
          for (let j = 0; j < data["x"].length; j++) {
            yData.push(data["y"][i][j]);
          }
          let item = {name: com[i], data: yData, type: 'line', smooth: true}
          ser.push(item);
        }
        return ser;
      }
      // 指定图表的配置项和数据
      const myOptions = {
        title: {
          text: '实时数据曲线'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: functionXdata(data),
        },
        yAxis: {
          type: 'value',
          min: function (value) {
            return Math.floor(value.min - 1);
          },
        },
        series: functionCount(data)
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(myOptions);

      setInterval(function() {
        const deviceId = localStorage.getItem('deviceId');
        const checkItem = localStorage.getItem('checkItem');
        const sensorId = localStorage.getItem('sensorId');
        console.log("deviceId",deviceId)
        console.log("checkItem",checkItem)
        console.log("sensorId",sensorId)
        getAction("/sensor/buSensor/getOnlineSensorData", {deviceId: deviceId,checkItems: checkItem,sensorId:sensorId}, 'get').then((res) => {
          console.log("res.result",res.result)
          functionXdata(res.result)
          functionCount(res.result)
          myChart.setOption(myOptions);
        })

      }, 1000);
    },

    deviceChange: function (value){
      this.getSensorDatas(value);
    },
    getSensorDatas(deviceId){
      this.$http.get(this.url.sensor,{params:{deviceId:deviceId}})
        .then(res => {
          this.sensorDicDatas = res.result
        })
    },
    numberChange: function (value) {
      this.queryParam.sensorId = value;
      this.$http.get(this.url.itemData,{params:{sensorId: value}})
        .then(res => {
          this.itemDatas = res.result;
        })
      this.clearSelection()
    },
    clearSelection() {
      this.selectedValues = []; // 清空已选择的值
      this.selectFlag = true;
    },
    filterOption(input, option) {
      console.log(option);
      return (
        option.data.attrs.tag.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    itemChange: function (value) {
      this.checkItem = value.join(",");
      this.selectFlag = false;
    },
    searchQuery1() {
      localStorage.setItem('deviceId', this.queryParam.deviceId);
      localStorage.setItem('checkItem', this.checkItem);
      localStorage.setItem('sensorId', this.queryParam.sensorId);
      this.getSensorData({deviceId: this.queryParam.deviceId,checkItems: this.checkItem,sensorId:this.queryParam.sensorId});
    },
    getSensorData(param){
      getAction(this.url.getOnlineSensorData, param, 'get').then((res) => {
        this.nowChart("myChart",res.result,param.checkItems);
      })
    },
    searchReset1() {
      this.queryParam = {};
      this.selectedValues =[];
      this.selectFlag = true;
      this.loadData(1);
    },
  },
};
</script>
<style scoped>
@import '~@assets/less/common.less';
.nowEcharts {
  width: 100%;
  height: 350px;
}
</style>