<template>
  <view class="modal" v-if="visible">
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">环境参数设置</text>
        <text class="close-button" @click="closeModal">×</text>
      </view>
      <view class="popup-body">
        <view class="setting-group">
          <text class="setting-label">温度阈值 (°C)</text>
          <input type="number" class="setting-input" v-model="tempThreshold" />
        </view>
        <view class="setting-group">
          <text class="setting-label">湿度阈值 (%)</text>
          <input type="number" class="setting-input" v-model="humidityThreshold" />
        </view>
      </view>
      <view class="popup-footer">
        <button class="popup-button cancel-button" @click="closeModal">取消</button>
        <button class="popup-button save-button" @click="saveSettings">保存</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible', 'save']);

// 设置参数
const tempThreshold = ref(25);
const humidityThreshold = ref(45);
const cleanlinessThreshold = ref(100);

// 报警选项
const alarmOptions = ref(['全部启用', '仅温度', '仅湿度', '仅洁净度', '全部禁用']);
const alarmIndex = ref(0);

// 报警选项变更
const onAlarmChange = (e) => {
  alarmIndex.value = e.detail.value;
};

// 关闭弹窗
const closeModal = () => {
  emit('update:visible', false);
};

// 保存设置
const saveSettings = () => {
  // 创建设置对象
  const settings = {
    tempThreshold: tempThreshold.value,
    humidityThreshold: humidityThreshold.value,
    cleanlinessThreshold: cleanlinessThreshold.value,
    alarmOption: alarmOptions.value[alarmIndex.value]
  };
  
  // 发送保存事件
  emit('save', settings);
  
  // 关闭弹窗
  closeModal();
  
  // 显示保存成功提示
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  });
};
</script>

<style lang="scss">
/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background-color: white;
  padding: 30rpx;
  border-radius: 20rpx;
  width: 600rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-button {
  font-size: 40rpx;
  cursor: pointer;
}

.popup-body {
  margin-bottom: 30rpx;
}

.setting-group {
  margin-bottom: 20rpx;
}

.setting-label {
  display: block;
  margin-bottom: 10rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.setting-input {
//   width: 100%;
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.picker-value {
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.popup-button {
  padding: 15rpx 30rpx;
  border: none;
  border-radius: 10rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.cancel-button {
  background-color: #f0f0f0;
}

.save-button {
  background-color: #3f51b5;
  color: white;
}
</style>