<template>
  <div class="settings-section">
    <div class="settings-form-horizontal">
      <div class="form-row">
        <div class="form-item">
          <label class="form-label">自动投递：</label>
          <ToggleSwitch v-model="config.autoDelivery" @change="updateConfig('autoDelivery', $event)" />
          <span class="switch-label">{{ config.autoDelivery ? '开启' : '关闭' }}</span>
        </div>

        <div class="form-item">
          <label class="form-label">投递开始时间：</label>
          <InputText type="time" :value="config.startTime" @input="updateConfig('startTime', $event.target.value)" class="form-input" />
        </div>

        <div class="form-item">
          <label class="form-label">投递结束时间：</label>
          <InputText type="time" :value="config.endTime" @input="updateConfig('endTime', $event.target.value)" class="form-input" />
        </div>

        <div class="form-item">
          <label class="form-label">是否仅工作日：</label>
          <Select
            v-model="config.workdaysOnly"
            :options="workdaysOptions"
            optionLabel="label"
            optionValue="value"
            @change="updateConfig('workdaysOnly', $event.value)"
            class="form-input"
          />
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import ToggleSwitch from 'primevue/toggleswitch';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import logMixin from '../mixins/logMixin.js';

export default {
  name: 'DeliverySettings',
  mixins: [logMixin],
  components: {
    ToggleSwitch,
    InputText,
    Select
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      workdaysOptions: [
        { label: '全部日期', value: false },
        { label: '仅工作日', value: true }
      ]
    };
  },
  methods: {
    ...mapActions('delivery', ['updateDeliveryConfig', 'saveDeliveryConfig']),
    updateConfig(key, value) {
      // ToggleSwitch 的 change 事件传递的是布尔值
      const boolValue = typeof value === 'boolean' ? value : (value?.value !== undefined ? value.value : value);
      this.updateDeliveryConfig({ key, value: boolValue });
    },
    async handleSave() {
      const result = await this.saveDeliveryConfig();
      if (result && result.success) {
        this.addLog('success', '投递配置已保存');
      } else {
        this.addLog('error', result?.error || '保存配置失败');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.settings-section {
  margin-bottom: 30px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.settings-form-horizontal {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .form-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
  }
  
  .form-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    
    &:focus {
      outline: none;
      border-color: #4CAF50;
    }
  }
  
  .switch-label {
    font-size: 14px;
    color: #666;
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-item {
    justify-content: space-between;
  }
}
</style>

