<!-- EntityConfigPanel.vue - 实体配置面板组件 -->
<template>
  <div class="entity-config-panel">
    <div class="config-header">
      <h3>实体配置</h3>
      <el-button-group size="small">
        <el-button @click="resetConfig">重置</el-button>
        <el-button type="primary" @click="saveConfig">保存</el-button>
      </el-button-group>
    </div>
    
    <div class="config-content">
      <el-form :model="config" label-width="80px" size="small">
        <el-form-item label="实体类型">
          <el-select v-model="config.type" placeholder="选择实体类型">
            <el-option label="战斗机" value="fighter" />
            <el-option label="无人机" value="drone" />
            <el-option label="导弹" value="missile" />
            <el-option label="军舰" value="ship" />
            <el-option label="坦克" value="tank" />
            <el-option label="雷达" value="radar" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="所属阵营">
          <el-radio-group v-model="config.side">
            <el-radio-button label="red">红方</el-radio-button>
            <el-radio-button label="blue">蓝方</el-radio-button>
            <el-radio-button label="neutral">中立</el-radio-button>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="移动速度">
          <el-slider v-model="config.speed" :min="0" :max="1000" show-input />
        </el-form-item>
        
        <el-form-item label="武器系统">
          <el-checkbox-group v-model="config.weapons">
            <el-checkbox label="主炮">主炮</el-checkbox>
            <el-checkbox label="导弹">导弹</el-checkbox>
            <el-checkbox label="鱼雷">鱼雷</el-checkbox>
            <el-checkbox label="防空">防空</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 配置数据
const config = reactive({
  type: 'fighter',
  side: 'red',
  speed: 300,
  weapons: ['主炮', '导弹']
})

// 事件定义
const emit = defineEmits<{
  save: [config: typeof config]
  reset: []
}>()

// 方法
function resetConfig() {
  config.type = 'fighter'
  config.side = 'red'
  config.speed = 300
  config.weapons = ['主炮', '导弹']
  emit('reset')
}

function saveConfig() {
  emit('save', { ...config })
}
</script>

<style scoped lang="scss">
@use 'sass:color';
@import '@/styles/variables.scss';

.entity-config-panel {
  padding: $spacing-base;
  background: $bg-secondary;
  border-radius: $border-radius-base;
  border: 1px solid $border-light;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-base;
  padding-bottom: $spacing-sm;
  border-bottom: 1px solid $border-light;
  
  h3 {
    margin: 0;
    color: $text-primary;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
  }
}

.config-content {
  :deep(.el-form-item) {
    margin-bottom: $spacing-sm;
  }
  
  :deep(.el-form-item__label) {
    color: $text-regular;
    font-weight: $font-weight-medium;
  }
}
</style>



