<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-03 11:12:04
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-30 15:52:28
 * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
 * @Description: 图像源节点
-->
<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 py-[24px] pl-[24px] pr-[14px]"
      >
        <t-module-form ref="sourceForm" titleBold :formOpts="formOpts" :submit="submit">
          <template #footer>
            <t-button type="primary" size="default" :time="config.buttonTimeOut">
              <span class="px-[8px]" @click="save"> 确定 </span>
            </t-button>
          </template>
        </t-module-form>
      </div>
    </template>
  </DSDialog>
</template>

<script setup lang="tsx">
// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
import { DSDialog } from '@/components/Dialog'
import { config } from '@/config'

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)
// 第一种：获取最终form表单数据
const submit = (form) => {
  console.log('最终提交数据', 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 formOpts: any = reactive({
  baseConfig: {
    title: '基础参数',
    name: 'baseConfig',
    disabled: true, // 表单禁用收缩
    ref: null,
    widthSize: 3, // 表单每行占据数量 默认为3
    opts: {
      labelPosition: 'top', // 标签对齐方式
      formData: {
        imageSource: '本地图像', // *图片来源
        /**基础参数-本地图像字段**/
        pixelFormat: '', // *像素格式
        captureInterval: '', // *取图间隔
        displayImageName: false, // *显示图像名称
        displaySaveImage: false, // *方案存图
        snInitialValue: 10, // *SN初始值
        imageCache: '', // *图片缓存
        stitchingEnabled: false, // *拼接使能
        startHeight: 0, // *起始高度
        stitchingHeight: 0, // *拼接高度
        triggerClear: false, // *触发清空
        triggerVariable: '', // *触发变量

        /**基础参数-相机字段**/
        relatedCamera: '选择相机', // *关联相机
        controlExposure: '', // *控制曝光
        controlGain: '', // *控制增益
        outputMono8: true // *输出Mono8
      },
      fieldList: [
        /**基础参数-表单项**/
        // 通用字段
        {
          label: '图像源',
          value: 'imageSource',
          type: 'select-arr',
          comp: 'el-select',
          list: 'imageSourceList',
          arrLabel: 'key',
          arrKey: 'value',
          placeholder: '请选择图像源',
          eventHandle: {
            change: (val: any) => {
              if (val === '本地图像') {
                formOpts.baseConfig.widthSize = 3
                formOpts.eventConfig.widthSize = 3
              } else {
                formOpts.baseConfig.widthSize = 2
                formOpts.eventConfig.widthSize = 2
              }
              console.log(val, 'selectChange_imageSource')
            }
          },
          bind: { clearable: false }
        },
        // 图像源为本地图像
        {
          label: '像素格式',
          value: 'pixelFormat',
          type: 'select-arr',
          comp: 'el-select',
          list: 'testList',
          arrLabel: 'label',
          arrKey: 'value',
          placeholder: '请选择像素格式',
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        // 图像源为本地图像
        {
          label: '取图间隔',
          value: 'captureInterval',
          placeholder: '测试自定义组件1',
          comp: 'DSInputNumber',
          isSelfCom: true,
          bind: {
            min: 1,
            max: 10
          },
          eventHandle: {
            change: (val: any) => {}
          },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        // 图像源为本地图像
        {
          value: 'displayImageName',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '显示图像名称'
          },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        // 图像源为本地图像
        {
          value: 'displaySaveImage',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '方案存图',
            suffixRender: () => {
              return <div className="ds-form-des-text pl-[12px]">（最多保存120张）</div>
            }
          },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        // 图像源为相机、sdk
        {
          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 !== '本地图像'
          }
        },
        // 图像源为相机、sdk
        {
          label: '控制曝光',
          value: 'controlExposure',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.imageSource !== '本地图像'
          }
        },
        // 图像源为相机、sdk
        {
          label: '控制增益',
          value: 'controlGain',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.imageSource !== '本地图像'
          }
        },
        // 通用字段
        {
          placeholder: '请输入SN初始值',
          labelRender: () => {
            return (
              <div>
                <span>SN初始值</span>
                <span className="ds-form-des-text">（上限不超过100000）</span>
              </div>
            )
          },
          value: 'snInitialValue',
          comp: 'DSInputNumber',
          isSelfCom: true,
          bind: {
            min: 0,
            max: 99999
          }
        },
        // 图像源为相机、sdk
        {
          value: 'outputMono8',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '输出Mono8'
          },
          isHideItem: (data) => {
            return data.imageSource !== '本地图像'
          }
        },
        // 图像源为本地图像
        {
          label: '图片缓存',
          value: 'imageCache',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.imageSource === '本地图像'
          }
        },
        // 通用字段
        {
          value: 'stitchingEnabled',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '拼接使能'
          }
        },
        // 通用字段
        {
          placeholder: '请输入起始高度',
          labelRender: () => {
            return (
              <div>
                <span>起始高度</span>
                <span className="ds-form-des-text">（上限不超过20000）</span>
              </div>
            )
          },
          value: 'startHeight',
          comp: 'DSInputNumber',
          isSelfCom: true,
          bind: {
            min: 0,
            max: 19999
          },
          isHideItem: (data) => {
            return data.stitchingEnabled
          }
        },
        // 通用字段
        {
          placeholder: '拼接高度',
          labelRender: () => {
            return (
              <div>
                <span>拼接高度</span>
                <span className="ds-form-des-text">（上限不超过20000）</span>
              </div>
            )
          },
          value: 'stitchingHeight',
          comp: 'DSInputNumber',
          isSelfCom: true,
          bind: {
            min: 0,
            max: 19999
          },
          isHideItem: (data) => {
            return data.stitchingEnabled
          }
        },
        // 通用字段
        {
          value: 'triggerClear',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '触发清空'
          },
          isHideItem: (data) => {
            return data.stitchingEnabled
          }
        },
        // 通用字段
        {
          label: '触发变量',
          value: 'triggerVariable',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.stitchingEnabled && data.triggerClear
          }
        },
        // 通用字段
        {
          label: '触发值',
          value: 'triggerValue',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.stitchingEnabled && data.triggerClear
          }
        }
      ],
      // 相关列表
      listTypeInfo: {
        testList,
        imageSourceList: [
          { key: '本地图像', value: '本地图像' },
          { key: '相机', value: '相机' },
          { key: 'SDK', value: 'SDK' }
        ]
      }
    }
  },
  eventConfig: {
    title: '触发设置',
    name: 'eventConfig',
    disabled: true, // 表单禁用收缩
    opts: {
      labelPosition: 'top', // 标签对齐方式
      formData: {
        /**触发设置-本地图像字段**/
        autoSwitch: false, // *自动切换
        stopOnLast: false, // *最后一张停止
        characterTriggerFilter: false, // *字符触发过滤
        inputCharacter: '', // *输入字符
        triggerCharacter: '' // *触发字符
      },
      fieldList: [
        {
          value: 'autoSwitch',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 3,
          bind: {
            label: '自动切换'
          },
          isHideItem: (data) => {
            return formOpts.baseConfig.opts.formData.imageSource === '本地图像'
          }
        },
        {
          value: 'stopOnLast',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 3,
          bind: {
            label: '最后一张停止'
          },
          isHideItem: (data) => {
            return formOpts.baseConfig.opts.formData.imageSource === '本地图像' && data.autoSwitch
          }
        },
        {
          value: 'characterTriggerFilter',
          comp: 'DsSwitch',
          isSelfCom: true,
          widthSize: 1,
          bind: {
            label: '字符触发过滤'
          }
        },
        {
          label: '输入字符',
          value: 'inputCharacter',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.characterTriggerFilter
          }
        },
        {
          label: '触发字符',
          value: 'triggerCharacter',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 100 },
          isHideItem: (data) => {
            return data.characterTriggerFilter
          }
        }
      ]
    }
  }
})
</script>

<style scoped lang="scss">
@import url('./imageNodeModel.scss');
</style>
