<template>
  <el-card class="sensor-card" shadow="hover">
    <div slot="header" class="card-header">
      <span class="card-title">{{ title }}</span>
    </div>
    
    <el-form :model="model" :rules="rules" ref="sensorForm" label-width="120px" class="sensor-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="X轴偏移" prop="xOffset">
            <el-input-number
              v-model="model.xOffset"
              :precision="3"
              :step="0.001"
              :min="-999"
              :max="999"
              controls-position="right"
              placeholder="0.000"
              class="full-width"
            />
            <span class="unit">m</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Y轴偏移" prop="yOffset">
            <el-input-number
              v-model="model.yOffset"
              :precision="3"
              :step="0.001"
              :min="-999"
              :max="999"
              controls-position="right"
              placeholder="0.000"
              class="full-width"
            />
            <span class="unit">m</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Z轴偏移" prop="zOffset">
            <el-input-number
              v-model="model.zOffset"
              :precision="3"
              :step="0.001"
              :min="-999"
              :max="999"
              controls-position="right"
              placeholder="0.000"
              class="full-width"
            />
            <span class="unit">m</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="横滚偏差" prop="roll">
            <el-input-number
              v-model="model.roll"
              :precision="4"
              :step="0.0001"
              :min="-3.1416"
              :max="3.1416"
              controls-position="right"
              placeholder="0.0000"
              class="full-width"
            />
            <span class="unit">rad</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="俯仰偏差" prop="pitch">
            <el-input-number
              v-model="model.pitch"
              :precision="4"
              :step="0.0001"
              :min="-3.1416"
              :max="3.1416"
              controls-position="right"
              placeholder="0.0000"
              class="full-width"
            />
            <span class="unit">rad</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="航向偏差" prop="yaw">
            <el-input-number
              v-model="model.yaw"
              :precision="4"
              :step="0.0001"
              :min="-3.1416"
              :max="3.1416"
              controls-position="right"
              placeholder="0.0000"
              class="full-width"
            />
            <span class="unit">rad</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div class="card-actions">
      <el-button type="primary" size="small" @click="handleSave" :loading="saving">
        <i class="el-icon-check"></i>
        保存本卡
      </el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'SensorCard',
  
  props: {
    title: {
      type: String,
      required: true
    },
    model: {
      type: Object,
      required: true,
      default: () => ({
        xOffset: 0,
        yOffset: 0,
        zOffset: 0,
        roll: 0,
        pitch: 0,
        yaw: 0
      })
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      saving: false,
      rules: {
        xOffset: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' }
        ],
        yOffset: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' }
        ],
        zOffset: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' }
        ],
        roll: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== null && value !== undefined && (value < -3.1416 || value > 3.1416)) {
                callback(new Error('角度范围应在 -π 到 π 之间'))
              } else {
                callback()
              }
            }, 
            trigger: 'blur' 
          }
        ],
        pitch: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== null && value !== undefined && (value < -3.1416 || value > 3.1416)) {
                callback(new Error('角度范围应在 -π 到 π 之间'))
              } else {
                callback()
              }
            }, 
            trigger: 'blur' 
          }
        ],
        yaw: [
          { type: 'number', message: '请输入有效数字', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== null && value !== undefined && (value < -3.1416 || value > 3.1416)) {
                callback(new Error('角度范围应在 -π 到 π 之间'))
              } else {
                callback()
              }
            }, 
            trigger: 'blur' 
          }
        ]
      }
    }
  },
  
  methods: {
    async handleSave() {
      try {
        await this.$refs.sensorForm.validate()
        this.saving = true
        this.$emit('save', { ...this.model })
        
        // 模拟保存延迟
        setTimeout(() => {
          this.saving = false
          this.$message.success(`${this.title}参数保存成功`)
        }, 500)
      } catch (error) {
        this.$message.error('请检查输入数据')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sensor-card {
  margin-bottom: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary, #303133);
    }
  }
  
  .sensor-form {
    ::v-deep .el-form-item {
      margin-bottom: 20px;
      
      .el-form-item__label {
        font-weight: 500;
        color: var(--color-text-secondary, #606266);
      }
      
      .el-form-item__content {
        display: flex;
        align-items: center;
        
        .el-input-number {
          &.full-width {
            width: 100%;
            
            .el-input__inner {
              height: 36px;
              border-radius: 8px;
              transition: all 0.2s ease;
              
              &:focus {
                border-color: var(--color-primary, #409eff);
                box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
              }
            }
          }
        }
        
        .unit {
          margin-left: 8px;
          color: var(--color-text-secondary, #909399);
          font-size: 14px;
          white-space: nowrap;
        }
      }
    }
  }
  
  .card-actions {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-lighter, #f0f0f0);
    
    .el-button {
      border-radius: 8px;
      padding: 8px 20px;
      font-weight: 500;
      
      &.el-button--primary {
        background: linear-gradient(135deg, #409eff, #3a8ee6);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #3a8ee6, #337ecc);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
}

// 暗色主题适配
html.dark {
  .sensor-card {
    ::v-deep .el-card {
      background: var(--color-bg-tertiary);
      border-color: var(--color-border-secondary);
    }
    
    .card-title {
      color: var(--color-text-primary);
    }
    
    .sensor-form {
      ::v-deep .el-form-item__label {
        color: var(--color-text-secondary);
      }
      
      .unit {
        color: var(--color-text-tertiary);
      }
    }
    
    .card-actions {
      border-color: var(--color-border-secondary);
    }
  }
}
</style>
