<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    @close="handleClose"
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      @submit.prevent
    >
      <!-- 基础信息 -->
      <el-form-item label="设备名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      
      <el-form-item label="设备类型" prop="type">
        <el-select v-model="formData.type" @change="handleTypeChange">
          <el-option label="区域主控" value="area_controller" />
          <el-option label="普通设备" value="device" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="设备位置描述" prop="location">
        <el-input v-model="formData.location" type="textarea" />
      </el-form-item>
      
      <!-- 区域主控类型额外字段 -->
      <div v-if="formData.type === 'area_controller'">
        <el-form-item label="LoRa地址" prop="loraAddress">
          <el-input v-model="formData.loraAddress" />
        </el-form-item>
      </div>
      
      <!-- 普通设备类型额外字段 -->
      <div v-if="formData.type === 'device'">
        <el-form-item label="区域主控" prop="parentControllerId">
          <el-select v-model="formData.parentControllerId" placeholder="请选择区域主控">
            <el-option
              v-for="controller in areaControllers"
              :key="controller.id"
              :label="controller.name"
              :value="controller.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="设备种类" prop="subType">
          <el-select v-model="formData.subType" placeholder="请选择设备种类">
            <el-option label="风扇" value="fan" />
            <el-option label="温度传感器" value="temperature" />
            <el-option label="湿度传感器" value="humidity" />
            <el-option label="氨气传感器" value="ammonia" />
            <el-option label="饲料阀门" value="feed_valve" />
            <el-option label="水帘" value="water_curtain" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="485总线号" prop="busNumber">
          <el-input-number 
            v-model="formData.busNumber" 
            :min="0"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="485总线地址" prop="busAddress">
          <el-input-number 
            v-model="formData.busAddress" 
            :min="0"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="继电器通道号" prop="relayChannel">
          <el-input-number 
            v-model="formData.relayChannel" 
            :min="0"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
      </div>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { DeviceApi } from '../api/device.js';

export default {
  name: 'DeviceForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deviceData: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'success', 'cancel'],
  setup(props, { emit }) {
    // 表单引用
    const formRef = ref(null);
    
    // 加载状态
    const loading = ref(false);
    
    // 区域主控列表
    const areaControllers = ref([]);
    
    // 表单数据
    const formData = reactive({
      id: '',
      name: '',
      type: '',
      location: '',
      // 区域主控字段
      loraAddress: '',
      // 普通设备字段
      parentControllerId: '',
      subType: '',
      busNumber: 0,
      busAddress: 0,
      relayChannel: 0
    });
    
    // 表单验证规则
    const rules = {
      name: [
        { required: true, message: '请输入设备名', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择设备类型', trigger: 'change' }
      ],
      location: [
        { required: true, message: '请输入设备位置描述', trigger: 'blur' }
      ],
      loraAddress: [
        { required: true, message: '请输入LoRa地址', trigger: 'blur' }
      ],
      parentControllerId: [
        { required: true, message: '请选择区域主控', trigger: 'change' }
      ],
      subType: [
        { required: true, message: '请选择设备种类', trigger: 'change' }
      ],
      busNumber: [
        { required: true, message: '请输入485总线号', trigger: 'blur' }
      ],
      busAddress: [
        { required: true, message: '请输入485总线地址', trigger: 'blur' }
      ],
      relayChannel: [
        { required: true, message: '请输入继电器通道号', trigger: 'blur' }
      ]
    };
    
    // 标题计算
    const title = computed(() => {
      return props.isEdit ? '编辑设备' : '添加设备';
    });
    
    // 处理类型切换
    const handleTypeChange = (value) => {
      // 清除之前的数据
      if (value === 'area_controller') {
        // 清除普通设备字段
        formData.parentControllerId = '';
        formData.subType = '';
        formData.busNumber = 0;
        formData.busAddress = 0;
        formData.relayChannel = 0;
      } else {
        // 清除区域主控字段
        formData.loraAddress = '';
      }
    };
    
    // 获取区域主控列表
    const loadAreaControllers = async () => {
      try {
        const response = await DeviceApi.list();
        // 筛选出类型为区域主控的设备
        areaControllers.value = response.data.filter(device => device.type === 'area_controller');
      } catch (error) {
        console.error('获取区域主控列表失败:', error);
        areaControllers.value = [];
      }
    };
    
    // 关闭对话框
    const handleClose = () => {
      emit('update:visible', false);
      emit('cancel');
    };
    
    // 提交表单
    const handleSubmit = async () => {
      await formRef.value.validate(async (valid) => {
        if (valid) {
          loading.value = true;
          try {
            let result;
            if (props.isEdit) {
              // 编辑设备
              result = await DeviceApi.update(formData.id, getSubmitData());
            } else {
              // 创建设备
              result = await DeviceApi.create(getSubmitData());
            }
            
            emit('success', result);
            handleClose();
          } catch (error) {
            console.error('保存设备失败:', error);
            ElMessage.error(props.isEdit ? '编辑设备失败' : '创建设备失败');
          } finally {
            loading.value = false;
          }
        }
      });
    };
    
    // 获取提交数据
    const getSubmitData = () => {
      const data = {
        name: formData.name,
        type: formData.type,
        location: formData.location
      };
      
      // 添加properties字段，作为JSON对象传递
      const properties = {};
      
      if (formData.type === 'area_controller') {
        properties.lora_address = formData.loraAddress;
      } else if (formData.type === 'device') {
        properties.bus_number = formData.busNumber;
        properties.bus_address = formData.busAddress;
        properties.relay_channel = formData.relayChannel;
        data.parent_id = formData.parentControllerId;
        data.sub_type = formData.subType;
      }
      
      // 直接使用properties对象，不进行序列化
      data.properties = properties;
      
      return data;
    };
    
    // 监听设备数据变化
    watch(() => props.deviceData, (newVal) => {
      if (newVal && Object.keys(newVal).length > 0) {
        // 填充表单数据
        Object.keys(formData).forEach(key => {
          // 处理字段名映射
          let dataKey = key;
          if (key === 'parentControllerId') {
            dataKey = 'parent_id';
          } else if (key === 'subType') {
            dataKey = 'sub_type';
          }
          
          if (newVal[dataKey] !== undefined) {
            formData[key] = newVal[dataKey];
          }
        });
        
        // 处理properties对象的数据填充
        if (newVal.properties) {
          const props = typeof newVal.properties === 'string' ? JSON.parse(newVal.properties) : newVal.properties;
          if (formData.type === 'area_controller') {
            formData.loraAddress = props.lora_address || '';
          } else if (formData.type === 'device') {
            formData.busNumber = props.bus_number || 0;
            formData.busAddress = props.bus_address || 0;
            formData.relayChannel = props.relay_channel || 0;
          }
        }
      } else {
        // 重置表单数据
        Object.keys(formData).forEach(key => {
          if (key === 'busNumber' || key === 'busAddress' || key === 'relayChannel') {
            formData[key] = 0;
          } else {
            formData[key] = '';
          }
        });
      }
    }, { immediate: true });
    
    // 监听visible属性变化，当对话框打开时重新加载区域主控列表
    watch(() => props.visible, (newVal) => {
      if (newVal) {
        // 对话框打开时重新加载区域主控列表
        loadAreaControllers();
      }
    }, { immediate: true });
    
    // 组件挂载时加载区域主控列表
    onMounted(() => {
      loadAreaControllers();
    });
    
    return {
      formRef,
      loading,
      areaControllers,
      formData,
      rules,
      title,
      handleTypeChange,
      handleClose,
      handleSubmit
    };
  }
};
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>