<template>
  <div class="message-send-method-selector">
    <div class="method-option">
      <label class="method-label">
        <input
          type="checkbox"
          value="system"
          :checked="selectedMethods.includes('system')"
          @change="toggleMethod('system')"
          :disabled="disabled"
        />
        <span class="method-text">
          <i class="el-icon-message"></i>
          系统消息
        </span>
      </label>
      <span class="method-desc">在系统内推送消息通知</span>
    </div>

    <div class="method-option">
      <label class="method-label">
        <input
          type="checkbox"
          value="email"
          :checked="selectedMethods.includes('email')"
          @change="toggleMethod('email')"
          :disabled="disabled"
        />
        <span class="method-text">
          <i class="el-icon-message-solid"></i>
          邮件通知
        </span>
      </label>
      <span class="method-desc">发送到用户邮箱</span>
    </div>

    <div class="method-option">
      <label class="method-label">
        <input
          type="checkbox"
          value="sms"
          :checked="selectedMethods.includes('sms')"
          @change="toggleMethod('sms')"
          :disabled="disabled"
        />
        <span class="method-text">
          <i class="el-icon-phone"></i>
          短信通知
        </span>
      </label>
      <span class="method-desc">发送到用户手机</span>
    </div>

    <div v-if="error" class="error-tip">
      {{ error }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  /** 已选择的发送方式列表 */
  modelValue: string[];
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否必须至少选择一个 */
  required?: boolean;
}

interface Emits {
  (e: 'update:modelValue', value: string[]): void;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  required: true
});

const emit = defineEmits<Emits>();

const selectedMethods = computed(() => props.modelValue);

const error = computed(() => {
  if (props.required && selectedMethods.value.length === 0) {
    return '请至少选择一种发送方式';
  }
  return '';
});

/** 切换发送方式 */
function toggleMethod(method: string) {
  if (props.disabled) return;

  const methods = [...selectedMethods.value];
  const index = methods.indexOf(method);

  if (index > -1) {
    // 如果是必选且只剩一个，不允许取消
    if (props.required && methods.length === 1) {
      return;
    }
    methods.splice(index, 1);
  } else {
    methods.push(method);
  }

  emit('update:modelValue', methods);
}
</script>

<style lang="scss" scoped>
.message-send-method-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .method-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
      background-color: #f9f9f9;
      border-color: #c8232c;
    }

    .method-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;

      input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;

        &:disabled {
          cursor: not-allowed;
        }
      }

      .method-text {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        color: #333;

        i {
          font-size: 16px;
        }
      }
    }

    .method-desc {
      margin-left: 24px;
      font-size: 12px;
      color: #999;
    }
  }

  .error-tip {
    font-size: 12px;
    color: #c00;
    margin-top: 4px;
  }
}
</style>
