<template>
  <div class="hello-world">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-icon><Star /></el-icon>
          <span>Hello World 组件</span>
        </div>
      </template>
      
      <div class="content">
        <h3>{{ title }}</h3>
        <p>{{ description }}</p>
        
        <el-divider />
        
        <div class="counter-section">
          <h4>计数器示例</h4>
          <div class="counter">
            <el-button type="primary" :icon="Minus" @click="decrement" :disabled="count <= 0"></el-button>
            <el-input-number v-model="count" :min="0" :max="100" style="margin: 0 10px;"></el-input-number>
            <el-button type="primary" :icon="Plus" @click="increment" :disabled="count >= 100"></el-button>
          </div>
          <el-progress :percentage="count" :color="progressColor" style="margin-top: 20px;"></el-progress>
        </div>
        
        <el-divider />
        
        <div class="theme-section">
          <h4>主题切换</h4>
          <el-radio-group v-model="theme" @change="handleThemeChange">
            <el-radio-button label="light">浅色主题</el-radio-button>
            <el-radio-button label="dark">深色主题</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Star, Plus, Minus } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  title: {
    type: String,
    default: '欢迎使用 Vue 3 + Element Plus'
  },
  description: {
    type: String,
    default: '这是一个可复用的组件示例，展示了 Vue 3 Composition API 的强大功能。'
  }
})

// 响应式数据
const count = ref(0)
const theme = ref('light')

// 计算属性
const progressColor = computed(() => {
  if (count.value < 30) return '#f56c6c'
  if (count.value < 70) return '#e6a23c'
  return '#67c23a'
})

// 方法
const increment = () => {
  if (count.value < 100) {
    count.value++
    if (count.value === 100) {
      ElMessage.success('恭喜！达到最大值！')
    }
  }
}

const decrement = () => {
  if (count.value > 0) {
    count.value--
    if (count.value === 0) {
      ElMessage.info('已归零')
    }
  }
}

const handleThemeChange = (value) => {
  ElMessage.success(`已切换到${value === 'light' ? '浅色' : '深色'}主题`)
}

// 暴露给父组件的方法
defineExpose({
  reset: () => {
    count.value = 0
    theme.value = 'light'
    ElMessage.success('组件已重置')
  }
})
</script>

<style scoped>
.hello-world {
  margin: 20px 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.content h3 {
  color: #409eff;
  margin-bottom: 12px;
}

.content p {
  color: #606266;
  line-height: 1.6;
}

.counter-section,
.theme-section {
  text-align: center;
}

.counter-section h4,
.theme-section h4 {
  color: #303133;
  margin-bottom: 16px;
}

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>