<template>
  <!-- 用户类型选择器组件 -->
  <div class="user-type-selector">
    <el-radio-group
      v-model="selectedType"
      size="large"
      class="type-radio-group"
      @change="handleTypeChange"
    >
      <!-- 客户选项 -->
      <el-radio-button value="customer" class="type-option customer-option">
        <div class="option-content">
          <el-icon class="option-icon"><User /></el-icon>
          <span class="option-text">客户登录</span>
          <p class="option-desc">浏览餐厅，下单用餐</p>
        </div>
      </el-radio-button>

      <!-- 商户选项 -->
      <el-radio-button value="manager" class="type-option merchant-option">
        <div class="option-content">
          <el-icon class="option-icon"><Shop /></el-icon>
          <span class="option-text">商户登录</span>
          <p class="option-desc">管理餐厅，处理订单</p>
        </div>
      </el-radio-button>

      <!-- 管理员选项 -->
      <el-radio-button value="admin" class="type-option admin-option">
        <div class="option-content">
          <el-icon class="option-icon"><Setting /></el-icon>
          <span class="option-text">管理员</span>
          <p class="option-desc">系统管理，数据统计</p>
        </div>
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { User, Shop, Setting } from '@element-plus/icons-vue'
import type { UserType } from '@/types/auth'

// 定义组件属性
interface Props {
  modelValue: UserType
}

// 定义组件事件
interface Emits {
  (e: 'update:modelValue', value: UserType): void
  (e: 'change', value: UserType): void
}

// 接收属性和事件
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const selectedType = ref<UserType>(props.modelValue)

// 监听外部值变化
watch(
  () => props.modelValue,
  (newValue) => {
    selectedType.value = newValue
  },
)

// 处理类型变化
const handleTypeChange = (value: UserType) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped lang="scss">
.user-type-selector {
  margin-bottom: 20px;
}

.type-radio-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;

  :deep(.el-radio-button) {
    width: 100%;
    margin: 0;

    .el-radio-button__inner {
      width: 100%;
      padding: 0;
      border: 2px solid #e4e7ed;
      border-radius: 12px;
      background: #fff;
      transition: all 0.3s ease;

      &:hover {
        border-color: #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
      }
    }

    &.is-active .el-radio-button__inner {
      border-color: #409eff;
      background: linear-gradient(135deg, #409eff 0%, #667eea 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }
}

.type-option {
  .option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    text-align: center;

    .option-icon {
      font-size: 28px;
      margin-bottom: 8px;
      color: #409eff;
    }

    .option-text {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: #2c3e50;
    }

    .option-desc {
      font-size: 12px;
      color: #7f8c8d;
      margin: 0;
      line-height: 1.4;
    }
  }

  &.is-active .option-content {
    .option-icon,
    .option-text,
    .option-desc {
      color: #fff;
    }
  }
}

// 不同用户类型的主题色
.customer-option {
  &.is-active :deep(.el-radio-button__inner) {
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
    border-color: #67c23a;
  }
}

.merchant-option {
  &.is-active :deep(.el-radio-button__inner) {
    background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
    border-color: #e6a23c;
  }
}

.admin-option {
  &.is-active :deep(.el-radio-button__inner) {
    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
    border-color: #f56c6c;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .type-radio-group {
    gap: 8px;
  }

  .type-option .option-content {
    padding: 12px;

    .option-icon {
      font-size: 24px;
      margin-bottom: 6px;
    }

    .option-text {
      font-size: 14px;
    }

    .option-desc {
      font-size: 11px;
    }
  }
}
</style>
