<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-03 11:12:04
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-08-01 17:27:00
 * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
 * @Description: 图像源节点
-->
<script setup lang="tsx">
// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
import { DSDialog } from '@/components/Dialog'
import { DSAddItemButton } from '@/components/Button'
import { config } from '@/config'
import { Folder } from '@element-plus/icons-vue'
// import { DsFormList } from '@/components/Form'
defineOptions({
  name: 'FlowMultiImageNodeModel'
})

interface Props {
  /** 弹窗显隐 */
  value: boolean
  // info?: Record<string, any>
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()

// 处理对话框关闭事件
const handleClose = () => {
  // emits('close');
}

const show = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:value', val)
  }
})
// 获取ref
const sourceForm: any = ref<HTMLElement | null>(null)

const formActiveList = reactive([])
// 获取最终form表单数据
const submit = (form) => {
  console.log(formActiveList.cameraData, '最终提交数据', form)
}

const save = () => {
  sourceForm.value.saveHandle()
}
const testList = [
  {
    value: 'GPIO',
    label: 'GPIO'
  },
  {
    value: 'VB2230',
    label: 'VB2230'
  },
  {
    value: 'VC2000/2100',
    label: 'VC2000/2100'
  },
  {
    value: 'VC3000H/X',
    label: 'VC3000H/X'
  },
  {
    value: 'MV-LEVD-200',
    label: 'MV-LEVD-200'
  },
  {
    value: 'LE200',
    label: 'LE200'
  },
  {
    value: 'VC5000',
    label: 'VC5000'
  }
]

// 图像配置参数表单
const activeLocalImageConfig = reactive({
  widthSize: 2, // 表单每行占据数量 默认为3
  title: '图像配置',
  labelPosition: 'top', // 标签对齐方式
  ref: 'activeImageRef',
  formData: {
    distributionAngle: null, // *分布角
    illuminationAngle: null // *照射角
  },
  fieldList: [
    {
      placeholder: '请输入分布角',
      label: '分布角',
      value: 'distributionAngle',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: -360,
        max: 360,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入照射角',
      label: '照射角',
      value: 'illuminationAngle',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: -360,
        max: 360,
        isHasSuffix: false
      }
    }
  ]
})
// 相机动态参数表单
const activeCamareConfig = reactive({
  widthSize: 4, // 表单每行占据数量 默认为3
  title: '图像配置',
  labelPosition: 'top', // 标签对齐方式
  ref: 'activeCameraRef',
  formData: {
    cameraExposure: null, // *相机曝光
    cameraGain: null, // *相机增益
    lightSource: null, // *光源设备 (请先在"控制管理器"中配置光源)
    triggerDelay: null, // *触发时间(ms)
    lightSourceChannel: null, // *光源通道
    lightSourceBrightness: null, // *光源亮度
    distributionAngle: null, // *分布角
    illuminationAngle: null // *照射角
  },
  fieldList: [
    {
      placeholder: '请输入相机曝光',
      label: '相机曝光',
      value: 'cameraExposure',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: 0,
        max: 100,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入相机增益',
      label: '相机增益',
      value: 'cameraGain',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: 0,
        max: 100,
        isHasSuffix: false
      }
    },
    {
      labelRender: () => {
        return (
          <div>
            <span>光源设备</span>
            <span className="ds-form-des-text">
              (请先在<span className="ds-form-normal-text">“控制管理器”</span>中配置光源)
            </span>
          </div>
        )
      },
      value: 'relatedCamera',
      type: 'select-arr',
      comp: 'el-select',
      list: 'testList',
      arrLabel: 'label',
      arrKey: 'value',
      placeholder: '请选择光源设备'
    },
    {
      placeholder: '请输入触发时间',
      label: '触发时间(ms)',
      value: 'triggerDelay',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: 0,
        max: 100000,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入光源通道',
      label: '光源通道',
      value: 'lightSourceChannel',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: 0,
        max: 100,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入光源亮度',
      label: '光源亮度',
      value: 'lightSourceBrightness',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: 0,
        max: 100,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入分布角',
      label: '分布角',
      value: 'distributionAngle',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: -360,
        max: 360,
        isHasSuffix: false
      }
    },
    {
      placeholder: '请输入照射角',
      label: '照射角',
      value: 'illuminationAngle',
      comp: 'DSInputNumber',
      isSelfCom: true,
      bind: {
        min: -360,
        max: 360,
        isHasSuffix: false
      }
    }
  ],
  // 相关列表
  listTypeInfo: {
    testList
  }
})

// 主表单
const formOpts: any = reactive({
  inputConfig: {
    title: '输入配置',
    name: 'inputConfig',
    disabled: true, // 表单禁用收缩
    ref: null,
    widthSize: 3, // 表单每行占据数量 默认为3
    opts: {
      labelPosition: 'top', // 标签对齐方式
      formData: {
        imageSource: '本地图像', // *图片来源
        relatedCamera: '', // *关联相机设备
        captureCount: 0, //  *取图数量
        imageSavePath: '', //  *取图路径
        localImages: [
          {
            distributionAngle: 90,
            illuminationAngle: 0
          },
          {
            distributionAngle: 190,
            illuminationAngle: 20
          },
          {
            distributionAngle: 100,
            illuminationAngle: -78
          },
          {
            distributionAngle: 26,
            illuminationAngle: 33
          }
        ],
        camaras: []
      },
      fieldList: [
        /**基础参数-表单项**/
        // 通用字段
        {
          label: '图像源',
          value: 'imageSource',
          type: 'select-arr',
          comp: 'el-select',
          list: 'imageSourceList',
          arrLabel: 'key',
          arrKey: 'value',
          placeholder: '请选择图像源',
          eventHandle: {
            change: (val: any) => {
              console.log(val, 'selectChange_imageSource')
            }
          },
          bind: { clearable: false }
        },
        // 图像源为相机
        {
          labelRender: () => {
            return (
              <div>
                <span>关联相机</span>
                <span className="ds-form-des-text">
                  (请先在<span className="ds-form-normal-text">“相机管理”</span>中新建相机)
                </span>
              </div>
            )
          },
          value: 'relatedCamera',
          type: 'select-arr',
          comp: 'el-select',
          list: 'testList',
          arrLabel: 'label',
          arrKey: 'value',
          placeholder: '请选择关联相机',
          isHideItem: (data) => {
            return data.imageSource === '相机'
          }
        },
        // 通用字段
        {
          placeholder: '请输入取图数量',
          labelRender: () => {
            return (
              <div>
                <span>取图数量</span>
                <span className="ds-form-des-text">（上限不超过8）</span>
              </div>
            )
          },
          value: 'captureCount',
          comp: 'DSInputNumber',
          isSelfCom: true,
          bind: {
            min: 0,
            max: 8
          }
        },
        // 图像源为本地图像
        {
          label: '取图路径',
          value: 'imageSavePath',
          placeholder: '请输入取图路径',
          comp: 't-input',
          isSelfCom: true,
          bind: {
            suffixIcon: Folder
          },
          eventHandle: {
            change: (val: any) => {}
          },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        {
          widthSize: 1, // 表单每行占据数量 默认为3
          value: 'localImages',
          comp: 'DSFormList',
          isSelfCom: true,
          bind: {
            formConfig: activeLocalImageConfig
          },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        {
          widthSize: 1, // 表单每行占据数量 默认为3
          value: 'camaras',
          comp: 'DSFormList',
          isSelfCom: true,
          bind: {
            formConfig: activeCamareConfig
          },
          isHideItem: (data) => {
            return data.imageSource === '相机'
          }
        }
      ],
      // 相关列表
      listTypeInfo: {
        testList,
        imageSourceList: [
          { key: '本地图像', value: '本地图像' },
          { key: '相机', value: '相机' }
        ]
      }
    }
  }
})

// 设备信息表单
const formDeviceInfo = reactive({
  imageConfigs: [
    {
      distributionAngle: 90,
      illuminationAngle: 0
    }
  ]
})

// 添加图像源配置项
const handleAddImageConfig = () => {
  formDeviceInfo.imageConfigs.push({
    distributionAngle: 0,
    illuminationAngle: 0
  })
}

onMounted(() => {
  setTimeout(() => {
    formActiveList.cameraData = [
      {
        distributionAngle: 90,
        illuminationAngle: 0
      },
      {
        distributionAngle: 190,
        illuminationAngle: 20
      },
      {
        distributionAngle: 100,
        illuminationAngle: -78
      },
      {
        distributionAngle: 26,
        illuminationAngle: 33
      }
    ]
  }, 2000)
})
</script>
<template>
  <DSDialog
    v-model="show"
    width="1200"
    @close="handleClose"
    class="settings-dialog ds-dialog"
    title="多图采集"
  >
    <template #default>
      <div class="imageNodeModel-form-container ds-dialog-form-container">
        <t-module-form ref="sourceForm" titleBold :formOpts="formOpts" :submit="submit">
          <template #footer>
            <div class="ds-dialog-form-footer">
              <t-button type="primary" size="default" :time="config.buttonTimeOut">
                <span class="px-[8px]" @click="save"> 确定 </span>
              </t-button>
            </div>
          </template>
        </t-module-form>
      </div>
    </template>
  </DSDialog>
</template>
