<script setup lang="ts">
/**
 * @交互说明
 * 1. 开始弹出设备选择对话框
 * 2. 选择本地图像后，展示相关内容
 * 3. 选择相机后，展示相关内容
 */
defineOptions({
  name: 'FlowMultiImageNodeModel'
})
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'
import { RefreshRight } from '@element-plus/icons-vue'
interface Props {
  /** import DeviceDialog from './deviceDialog.vue';
弹窗显隐 */
  value: boolean
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()
console.log(props.value)
const show = computed({
  get() {
    Object.assign(deviceBars, deviceList)
    return props.value
  },
  set(val: boolean) {
    emit('update:value', val)
  }
})
const isDeviceDialog = ref(false)
// 中间tab
const deviceTab = ref('') // device/receive/send/heartbeat/response
const deviceBars = ref([])

const imageSourceOptions = [
  {
    value: '本地图像',
    label: '本地图像'
  },
  {
    value: '相机',
    label: '相机'
  }
]

const options = [
  {
    value: 'DPS2',
    label: 'DPS2'
  },
  {
    value: 'MV-AP1024-2T',
    label: 'MV-AP1024-2T'
  },
  {
    value: 'MV-LEVD',
    label: 'MV-LEVD'
  },
  {
    value: 'VB2200',
    label: 'VB2200'
  },
  {
    value: 'VC3000(Light)',
    label: 'VC3000(Light)'
  },
  {
    value: 'VB3000(IO)',
    label: 'VB3000(IO)'
  },
  {
    value: 'VC4000',
    label: 'VC4000'
  },
  {
    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 deviceList = ref([
  {
    name: '1 Light-1',
    enabled: false,
    info: {
      imageSource: '',
      deviceName: '',
      serialPort: '',
      baudRate: '',
      dataBits: '',
      checkBit: '',
      stopBit: '',
      outputType: '',
      sendInterval: '',
      IOPort: '',
      delayTime: '',
      shakeTime: '',
      devices: '',
      reconnect: false,
      polling: false,
      reversal: false,
      state: false,
      endInfo: '',
      channelBrightness1: 0,
      channelBrightness2: 0,
      channelBrightness3: 0,
      channelBrightness4: 0,
      channelBrightness5: 0,
      channelBrightness6: 0,
      pollingInterval: 0,
      lightChannel: 0,
      lightChannelStatus: '',
      tableData: []
    }
  },
  { name: '2 Light-2', enabled: false }
])
// 设备信息表单
const formDeviceInfo = reactive({
  imageSource: '本地图像',
  deviceName: '',
  imageConfigs: [
    {
      distributionAngle: 90,
      illuminationAngle: 0
    }
  ],

  reconnect: false,
  polling: false,

  outputPolarity: '', // 输出极性
  sendInterval: '',
  IOPort: '',
  delayTime: '', // IO延迟时间
  controlDelayTime: '', // IO控制延迟时间
  flickerDelayTime: '', // 频闪延迟时间

  endInfo: '',
  channelBrightness1: 0,
  channelBrightness2: 0
})

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

const handleDelImageConfig = (index) => {
  formDeviceInfo.imageConfigs.splice(index, 1)
}
// 处理对话框关闭事件
const handleClose = () => {}
</script>

<template>
  <!-- 控制器管理弹框 -->
  <DSDialog
    title="多图采集"
    v-model="show"
    width="1200"
    class="controllerManagement-dialog ds-dialog"
    @close="handleClose"
  >
    <div class="controllerManagement-container ds-dialog-form-container">
      <div class="controllerManagement-content">
        <el-form label-width="auto" size="default" :model="formDeviceInfo" style="max-width: 100%">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="图像源" label-position="top">
                <el-select
                  v-model="formDeviceInfo.imageSource"
                  placeholder="请选择"
                  class="device-select"
                >
                  <el-option
                    v-for="item in imageSourceOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formDeviceInfo.imageSource === '相机'">
              <el-form-item label="关联相机 (请先在“相机管理”中新建相机）" label-position="top">
                <el-select
                  v-model="formDeviceInfo.imageSource"
                  placeholder="请选择"
                  class="device-select"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="取图数量 (上限不超过8)" label-position="top">
                <div class="flex">
                  <el-input-number
                    class="flex-1 w-full"
                    v-model="formDeviceInfo.deviceName"
                    :min="1"
                    :max="8"
                    controls-position="right"
                    @change="handleChange"
                  >
                  </el-input-number>
                  <span>
                    <el-icon class="el-input__icon"><Folder /></el-icon>
                  </span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formDeviceInfo.imageSource === '本地图像'">
              <el-form-item label="图像路径" label-position="top">
                <el-input v-model="formDeviceInfo.deviceName">
                  <template #suffix>
                    <el-icon class="el-input__icon"><Folder /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="formDeviceInfo.imageSource === '本地图像'">
            <el-col :span="24">
              <el-form-item
                v-for="(domain, index) in formDeviceInfo.imageConfigs"
                :key="domain.key"
                label-position="top"
                label=""
                :prop="'imageConfigs.' + index + '.value'"
              >
                <template #label>
                  <div class="flex items-center">
                    <p>{{ '图像配置' + (index + 1) }}</p>
                    <!-- // TODO 删除按钮 -->
                    <DSButton
                      class="mx-[16px]"
                      type="text"
                      @click.prevent="handleDelImageConfig(index)"
                    >
                      <el-icon class="el-input__icon"><Delete /></el-icon>
                    </DSButton>
                  </div>
                </template>
                <div class="w-full">
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <el-form-item label="分布角" label-position="top">
                        <el-input-number
                          v-model="domain.distributionAngle"
                          :min="0"
                          :max="360"
                          controls-position="right"
                          @change="handleChange"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="照射角" label-position="top">
                        <el-input-number
                          v-model="domain.illuminationAngle"
                          :min="0"
                          :max="360"
                          controls-position="right"
                          @change="handleChange"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="table-add-btn" @click="handleAddImageConfig">
            <img
              src="@/assets/images/common/table_addBtn.png"
              alt=""
              class="w-[16px] h-[16px] mr-2"
            />添加数据
          </div>
        </el-form>
      </div>
    </div>
  </DSDialog>
</template>

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