<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-range-picker
          separator="至"
          :placeholder="['开始日期', '结束日期']"
          :defaultValue="datetimeRange"
          @change="dateRangeChange"
        ></a-range-picker>
      </a-col>
      <a-col :span="12">
        <a-select
          v-model="device"
          placeholder="请选择"
          @change="onDeviceChange"
         
        >
          <a-select-option
            v-for="item in deviceList"
            :key="item._id"
           
            :value="item._id"
          > {{item.device_name}} </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
    <a-row>
      <SZJCChart :dataRow="waterData" :labelMap="labelMap"></SZJCChart>
    </a-row>
    </a-spin>
  </div>
</template>

<script>
import SZJCChart from "./SZJCChart";
import { getData, URL_MAP } from "@/utils/http";
import Moment from 'moment'
import { processWater } from '@/utils/water'
export default {
  components: {
    SZJCChart,
  },
  data() {
    return {
      datetimeRange: [Moment('2020-10-01'), Moment('2020-12-31')],
      update: false,
      device: "",
      deviceList: [],
      deviceInstance: {},
      labelMap: {},
      waterData: [],
      loading: false,
    };
  },
  watch: {
    device: function (old, newVal) {
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i]._id === newVal) {
          this.deviceInstance = this.deviceList[i];
          break;
        }
      }
    },
  },
  methods: {
    async initSeting() {
      let sensors = (await getData(URL_MAP.SENSOR_LIST)).data
      const labelMap = {}
      sensors.forEach(s => labelMap[s.param_key] = s.param_name)
      this.labelMap = labelMap
    },

    async initDevice() {
      const device_ = (await getData(URL_MAP.DEVICE_LIST)).data;
      try {
        const device = device_.filter((item) => item.state == 1);
        this.deviceList = device;
        device.forEach((item) => {
          Object.keys(this.labelMap).forEach((k) => {
            if (item[k + "_factor"] === undefined) {
              item[k + "_factor"] = 1;
            }
          });
        });
        this.device = device[0]._id
      } catch (e) {
        console.log(e);
      }
    },

    async getData() {
      this.loading = true
      try {
        const params = {
          'data__collect_time__gte':this.datetimeRange[0].toDate().getTime(),
          'data__collect_time__lte':this.datetimeRange[1].toDate().getTime(),
          'device_id':this.device
        }
        let data = await getData(URL_MAP.WATER_LIST, params)
        // console.log(data)
        this.waterData = processWater(data.data, Object.keys(this.labelMap))
        // console.log(this.waterData)
      } catch (e) {
        console.log(e);
        this.waterData = [];
      }
      finally{
        this.loading = false
      }
    },

    onDeviceChange(value) {
      this.device = value
      this.getData();
    },

    dateRangeChange(dates, dateStrings) {
      this.datetimeRange = dates;
      console.log(this.datetimeRange)
      this.getData();
    },
  },

  async mounted() {
    await this.initSeting();
    await this.initDevice();
    this.getData();
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>