<script>
import TitleBlock from "@/components/TitleBlock.vue";
import TimePicker from "@/components/TimePicker.vue";
import ThresholdPicker from "@/components/ThresholdPicker.vue";

import axios from "axios";
export default {
  name: "SettingsView",
  components: {TimePicker, TitleBlock, ThresholdPicker},
  created() {
    this.getSettings();
  },
  data() {
    return {
      timeSettings:{
        times_Power: {
          times:{
            PowerOn: "12:00",
            PowerOff: "12:30"
          },
          enable_boot: false,
        },
        times_Humidity: {
          times:{
            HumidityOn: "12:00",
            HumidityOff: "12:30",
          },
          enable_boot: false,
        },
      },
      thresholdSettings:{
        Threshold_Humidity:{
          thresholds: {
            min: 20,
            max: 80,
          },
          enable_boot: false,
        },
        Threshold_Temperature:{
          thresholds: {
            min: 20,
            max: 26,
          },
          enable_boot: false,
        },
      },
      loaded: true
    }
  },
  methods: {
    save() {
      this.postSettings();
    },
    cancel() {
      window.location.reload();
    },
    getSettings() {
      axios.get("http://locahost/getSetting.php").then(response => {
        console.log(response.data);
        this.timeSettings.times_Power = {
          times: {
            PowerOn: response.data[0].boot,
            PowerOff: response.data[0].shutdown,
          },
          enable_boot: response.data[0].enable_boot == 1,
        }
        console.log(this.timeSettings.times_Power);
        this.timeSettings.times_Humidity = {
          times: {
            HumidityOn: response.data[0].start,
            HumidityOff: response.data[0].end,
          },
          enable_boot: response.data[0].enable_humidify == 1,
        }
        this.thresholdSettings.Threshold_Humidity = {
          thresholds: {
            min: response.data[0].min_humidity,
            max: response.data[0].max_humidity,
          },
          enable_boot: response.data[0].enable_humi_threshold == 1,
        }
        this.thresholdSettings.Threshold_Temperature = {
          thresholds: {
            min: response.data[0].min_temperature,
            max: response.data[0].max_temperature,
          },
          enable_boot: response.data[0].enable_temp_threshold == 1,
        }
        this.loaded = true;
      }).catch(error => {
        console.log(error);
      });
    },
    postSettings() {
      axios.post("http://locahost/postSetting.php", {
        boot: this.timeSettings.times_Power.times.PowerOn,
        shutdown: this.timeSettings.times_Power.times.PowerOff,
        start: this.timeSettings.times_Humidity.times.HumidityOn,
        end: this.timeSettings.times_Humidity.times.HumidityOff,
        min_humidity: this.thresholdSettings.Threshold_Humidity.thresholds.min,
        max_humidity: this.thresholdSettings.Threshold_Humidity.thresholds.max,
        min_temperature: this.thresholdSettings.Threshold_Temperature.thresholds.min,
        max_temperature: this.thresholdSettings.Threshold_Temperature.thresholds.max,
        enable_boot: this.timeSettings.times_Power.enable_boot? 1 : 0,
        enable_humidify: this.timeSettings.times_Humidity.enable_boot? 1 : 0,
        enable_humi_threshold: this.thresholdSettings.Threshold_Humidity.enable_boot? 1 : 0,
        enable_temp_threshold: this.thresholdSettings.Threshold_Temperature.enable_boot? 1 : 0,
      }).then(response => {
        console.log(response);
        this.loaded = false;
      }).catch(error => {
        console.log(error);
        this.loaded = true;
      });
    }
  }
}
</script>

<template>
  <div v-if="loaded">
<TitleBlock title="设置" />
    <span hidden>{{timeSettings.times_Power.times.PowerOn}}</span>
    <span hidden>{{timeSettings.times_Power.times.PowerOff}}</span>
    <span hidden>{{timeSettings.times_Humidity.times.HumidityOn}}</span>
    <span hidden>{{timeSettings.times_Humidity.times.HumidityOff}}</span>
    <span hidden>{{thresholdSettings.Threshold_Humidity.thresholds.min}}</span>
    <span hidden>{{thresholdSettings.Threshold_Humidity.thresholds.max}}</span>
    <span hidden>{{thresholdSettings.Threshold_Temperature.thresholds.min}}</span>
    <span hidden>{{thresholdSettings.Threshold_Temperature.thresholds.max}}</span>

    <div class="ms-5 mt-2 fs-5 ">
    <TimePicker :pickers="timeSettings.times_Power.times"  v-model="timeSettings.times_Power" :title="'定时开关机'" :enable="timeSettings.times_Power.enable_boot"  />
  </div>

  <div class="ms-5 mt-2 fs-5 ">
    <TimePicker v-model="timeSettings.times_Humidity" :title="'定时加湿'" :enable="timeSettings.times_Humidity.enable_boot" :pickers=timeSettings.times_Humidity.times  />
  </div>

  <div class="ms-5 mt-2 fs-5 ">
    <ThresholdPicker v-model="thresholdSettings.Threshold_Temperature" :title="'温度阈值'" :enable="thresholdSettings.Threshold_Temperature.enable_boot" :Thresholds=thresholdSettings.Threshold_Temperature.thresholds  />
  </div>
  <div class="ms-5 mt-2 fs-5 ">
    <ThresholdPicker v-model="thresholdSettings.Threshold_Humidity" :title="'湿度阈值'" :enable="thresholdSettings.Threshold_Humidity.enable_boot" :Thresholds=thresholdSettings.Threshold_Humidity.thresholds />
  </div>
  <div class="mt-5">
    <button class="btn btn-secondary ms-5 mt-2 fs-5" @click="save">保存</button>
    <button class="btn btn-secondary ms-5 mt-2 fs-5" @click="cancel">重置</button>
  </div>
  </div>
</template>

<style scoped>

</style>