<script setup lang="ts">
import type {
  DeviceFormExposedMethods,
  GasDeviceEmits,
  GasDeviceProps,
} from '@af-mobile-client-vue3/views/SafeInspection/SecurityCertificate/AddDevice/types/device'

import AddDevice from '@af-mobile-client-vue3/views/SafeInspection/SecurityCertificate/AddDevice/index.vue'
import { onBeforeMount, reactive, ref } from 'vue'

// Props定义
const props = withDefaults(defineProps<GasDeviceProps & {
  row?: any // 添加row参数用于接收安检项配置
  isViewMode?: boolean // 是否为查看模式
  userDetail?: any
}>(), {
  modelValue: () => [],
  row: () => ({}),
  isViewMode: false,
})

const emit = defineEmits<GasDeviceEmits>()
const addDeviceRef = ref<DeviceFormExposedMethods | null>(null)

// 设置引用
function setRef(ref: DeviceFormExposedMethods) {
  addDeviceRef.value = ref
}

// 移除引用
function removeRef(ref: DeviceFormExposedMethods) {
  if (addDeviceRef.value === ref) {
    addDeviceRef.value = null
  }
}

// 暴露给父组件的方法
const exposedMethods = {
  // 获取表单数据
  getFormData(): any[] {
    if (addDeviceRef.value) {
      return addDeviceRef.value.getFormData()
    }
    return []
  },

  // 重置表单
  resetForm(): void {
    if (addDeviceRef.value) {
      addDeviceRef.value.resetForm()
    }
  },

  // 验证表单
  async validate(): Promise<void> {
    // 如果没有设备数据，直接返回成功
    if (!addDeviceRef.value.getFormData() || addDeviceRef.value.getFormData().length === 0) {
      return Promise.resolve()
    }
    if (addDeviceRef.value) {
      return addDeviceRef.value.validate()
    }
  },

  // 选择设备类型并添加设备
  addDeviceByName(name: string): void {
    if (addDeviceRef.value) {
      addDeviceRef.value.addDeviceByName(name)
    }
  },

  getDeviceDetailsByName(name: string) {
    if (addDeviceRef.value) {
      return addDeviceRef.value.getDeviceDetailsByName(name)
    }
    else {
      return []
    }
  },

  // 同步设备数据
  async syncDeviceData(deviceId: string, data: any, defectPaths: any): Promise<void> {
    if (addDeviceRef.value) {
      await addDeviceRef.value.syncDeviceData(deviceId, data, defectPaths)
    }
  },
}

const localRow = reactive({ ...(props.row || {}) })
const userDetail = JSON.parse(JSON.stringify(props.userDetail))

onBeforeMount(() => {
  if (props.modelValue) {
    localRow.deviceData = props.modelValue
  }
})

defineExpose(exposedMethods)
</script>

<template>
  <div class="gas-device-container">
    <AddDevice
      config-name="用气设备表单配置Form"
      service-name="af-safecheck"
      :set-ref="setRef"
      :remove-ref="removeRef"
      :row="localRow"
      :user-detail="userDetail"
      :is-view-mode="props.isViewMode"
      @value-change="(selVal, selObj, currentVal, payload) => {
        (emit as any)('value-change', selVal, selObj, currentVal, payload)
      }"
      @process-mode-change="(securityItem, selVal, selObj, index) => {
        (emit as any)('process-mode-change', securityItem, selVal, selObj, index)
      }"
      @camera-view-change="(list, securityItem, index) => {
        (emit as any)('camera-view-change', list, securityItem, index)
      }"
      @device-deleted="(deviceId) => { (emit as any)('device-deleted', deviceId) }"
      @photo-quality-change="(type: string) => emit('photoQualityChange', type)"
    />
  </div>
</template>

<style scoped lang="less">
.gas-device-container {
  background: #fff;
  border-radius: 8px;
  margin: 0;
  padding: 0;
}
</style>
