<template>
  <n-button type="primary" @click="showSetModal">温湿度上下限设置</n-button>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="dialog"
    title="温湿度上下限设置"
    positive-text="确认"
    negative-text="取消"
    @positive-click="submitCallback"
  >
    <n-form :model="formValue" label-width="auto" show-require-mark>
      <n-divider title-placement="center"> 温度 </n-divider>
      <n-form-item label="上限" path="value">
        <n-input v-model:value="formValue.tTop" />
      </n-form-item>
      <n-form-item label="下限" path="value">
        <n-input v-model:value="formValue.tBottom" />
      </n-form-item>
      <n-divider title-placement="center"> 湿度 </n-divider>
      <n-form-item label="上限" path="value">
        <n-input v-model:value="formValue.hTop" />
      </n-form-item>
      <n-form-item label="下限" path="value">
        <n-input v-model:value="formValue.hBottom" />
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<script setup>
import { useStore } from 'vuex';
import emitter from "@/plugin/bus";
const emit = defineEmits(['submit']);
import {onMounted} from 'vue'

const store = useStore()


const submitCallback = () => {
  emitter.emit("onMessage",formValue);
  store.commit('setplotData',formValue)  
  // emit('submit', formValue);
};

// 是否展示 Modal
const showModal = ref(false);

// 表单数据
const formValue = reactive({
  tTop: null,
  tBottom: null,
  hTop: null,
  hBottom: null,
});
// onMounted(()=>{
//   emitter.emit("onMessage",formValue);
// })
// 显示设置
const showSetModal = () => {
  showModal.value = true;
  // Object.keys(formValue).forEach((key) => (formValue[key] = null));
};
</script>

<style lang="scss" scoped></style>
