<template>
  <Dialog 
    v-model:visible="dialogVisible" 
    modal 
    header="系统设置"
    :style="{ width: '500px' }"
    @hide="handleClose"
  >
    <div class="settings-content">
      <div class="settings-section">
        <h4 class="section-title">应用设置</h4>
        <div class="setting-item">
          <label>自动启动</label>
          <InputSwitch v-model="settings.autoStart" @change="handleSettingChange('autoStart', $event)" />
        </div>
        <div class="setting-item">
          <label>开机自启</label>
          <InputSwitch v-model="settings.startOnBoot" @change="handleSettingChange('startOnBoot', $event)" />
        </div>
      </div>
      
      <div class="settings-section">
        <h4 class="section-title">通知设置</h4>
        <div class="setting-item">
          <label>启用通知</label>
          <InputSwitch v-model="settings.enableNotifications" @change="handleSettingChange('enableNotifications', $event)" />
        </div>
        <div class="setting-item">
          <label>声音提醒</label>
          <InputSwitch v-model="settings.soundAlert" @change="handleSettingChange('soundAlert', $event)" />
        </div>
      </div>
    </div>
    
    <template #footer>
      <Button label="取消" severity="secondary" @click="handleClose" />
      <Button label="保存" @click="handleSave" />
    </template>
  </Dialog>
</template>

<script>
import { Dialog, Button, InputSwitch } from '../components/PrimeVue';
import logMixin from '../mixins/logMixin.js';

export default {
  name: 'SettingsDialog',
  mixins: [logMixin],
  components: {
    Dialog,
    Button,
    InputSwitch
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        if (!value) {
          this.handleClose();
        }
      }
    }
  },
  computed: {
    settings: {
      get() {
        return this.$store.state.config.appSettings;
      },
      set(value) {
        this.$store.dispatch('config/updateAppSettings', value);
      }
    }
  },
  methods: {
    handleSettingChange(key, value) {
      // InputSwitch 的 change 事件传递的是布尔值
      const boolValue = typeof value === 'boolean' ? value : value.value;
      this.$store.dispatch('config/updateAppSetting', { key, value: boolValue });
    },
    handleSave() {
      // 设置已保存在 store 中，不需要额外操作
      this.addLog('success', '设置已保存');
      this.$emit('save', this.settings);
      this.handleClose();
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="less" scoped>
.settings-content {
  padding: 10px 0;
}

.settings-section {
  margin-bottom: 25px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
}
</style>

