<template>
  <!-- 控制器管理弹框 -->
  <DSDialog
    title="相机管理"
    v-model="show"
    width="1200"
    class="cameraManagement-dialog ds-dialog"
    @close="handleClose"
  >
    <div class="cameraManagement-container">
      <div class="cameraManagement-infoList">
        <div class="cameraManagement-infoList-title">
          <span>设备列表</span>
          <div class="infoList-title-btn" @click="addDevice">+</div>
        </div>
        <div class="cameraManagement-infoList-content">
          <div
            class="cameraManagement-infoList-item"
            :class="{ active: deviceTab === item.name }"
            v-for="(item, index) in deviceBars"
            :key="index"
            @click="selectDevice(item)"
          >
            <span>{{ item.name }}</span>
            <el-switch v-model="item.enabled" size="small" />
          </div>
          <el-empty
            :image-size="54"
            :image="NoDataIcon"
            style="margin-top: 130px"
            v-if="deviceBars.length === 0"
          />
        </div>
      </div>
      <div class="cameraManagement-line-first" />
      <div class="cameraManagement-content">
        <el-form label-width="auto" size="default" :model="formCameraInfo" style="max-width: 100%">
          <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
            <el-tab-pane label="常用参数" name="commParam"> </el-tab-pane>
            <el-tab-pane label="设备控制" name="deviceControl"> </el-tab-pane>
          </el-tabs>
          <template v-if="dataTab === 'commParam'">
            <el-form-item
              label="GenTL相机"
              label-position="left"
              v-if="formCameraInfo.typeSelection === '1'"
            >
              <el-switch v-model="formCameraInfo.GenTL" />
            </el-form-item>
            <el-row :gutter="24" v-if="formCameraInfo.GenTL">
              <el-col :span="10">
                <el-form-item label="选择Cti文件" label-position="top">
                  <el-select
                    v-model="formCameraInfo.ctiFile"
                    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-row>
            <el-form-item label="类型选择：" label-position="left" v-if="!formCameraInfo.GenTL">
              <el-radio-group v-model="formCameraInfo.typeSelection" class="camera-radio-group">
                <el-radio value="1" size="large">枚举</el-radio>
                <el-radio value="2" size="large">跨网段IP</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row :gutter="24" v-if="formCameraInfo.typeSelection === '1'">
              <el-col :span="12">
                <el-form-item label="选择相机" label-position="top">
                  <el-select
                    v-model="formCameraInfo.cameras"
                    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="12">
                <el-button type="primary" :icon="RefreshRight" circle class="mt-7" />
              </el-col>
            </el-row>
            <el-row :gutter="24" v-if="formCameraInfo.typeSelection === '2'">
              <el-col :span="12">
                <el-form-item label="本机IP" label-position="top">
                  <el-select
                    v-model="formCameraInfo.localIP"
                    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="12">
                <el-form-item label="相机IP" label-position="top">
                  <el-select
                    v-model="formCameraInfo.cameraIP"
                    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-row>
            <el-row :gutter="24">
              <el-col :span="5" v-if="formCameraInfo.typeSelection === '2'">
                <el-form-item label="连接相机" label-position="left">
                  <el-switch v-model="formCameraInfo.connectCamera" />
                </el-form-item>
              </el-col>
              <el-col :span="5" v-if="formCameraInfo.typeSelection === '2'">
                <el-form-item label="自动重连" label-position="left">
                  <el-switch v-model="formCameraInfo.autoReconnect" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="加载用户集" label-position="left">
                  <el-switch v-model="formCameraInfo.loadUser" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="调试存图" label-position="left">
                  <el-switch v-model="formCameraInfo.saveImage" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="图像缓存数" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.imageCaches"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实时取流" label-position="top">
                  <el-button type="primary">查看画面</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="断线重连时间" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.reconnectedTime"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="软触发超时" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.triggerTimeout"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <div>触发设置</div>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="触发源" label-position="top">
                  <el-select
                    v-model="formCameraInfo.triggerSource"
                    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="6">
                <el-form-item label="触发模式" label-position="top">
                  <el-select
                    v-model="formCameraInfo.triggerMode"
                    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="6">
                <el-form-item label="触发延迟" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.triggerDelay"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <div>图像参数</div>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="图像宽度" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.imageWidth"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="图像高度" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.imageHight"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="像素格式" label-position="top">
                  <el-select
                    v-model="formCameraInfo.pixelFormat"
                    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="6">
                <el-form-item label="帧率" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.FPS"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="实际帧率" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.actualFPS"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="曝光模式" label-position="top">
                  <el-select
                    v-model="formCameraInfo.exposureMode"
                    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="6">
                <el-form-item label="曝光时间" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.exposureTime"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <div>增益</div>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="增益模式" label-position="top">
                  <el-select
                    v-model="formCameraInfo.gainMode"
                    placeholder="请选择"
                    class="device-select"
                  >
                    <el-option v-for="item in options" :key="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="增益" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.gain"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最小增益" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.gainMin"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最大增益" label-position="top">
                  <el-input-number
                    v-model="formCameraInfo.gainMax"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <div>图像参数</div>
            <el-form-item label="Gamma使能" label-position="left">
              <el-switch v-model="formCameraInfo.gamma" />
            </el-form-item>
            <el-row :gutter="24" v-if="formCameraInfo.gamma">
              <el-col :span="6">
                <el-form-item label="选择器" label-position="top">
                  <el-select
                    v-model="formCameraInfo.selector"
                    placeholder="请选择"
                    class="device-select"
                  >
                    <el-option v-for="item in options" :key="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div>线阵相机</div>
            <div class="text-[#C9CDD4]">暂未检测到相关数据</div>
            <div>运行参数</div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="相机类型" label-position="top">
                  <el-select
                    v-model="formCameraInfo.cameraType"
                    placeholder="请选择"
                    class="device-select"
                  >
                    <el-option v-for="item in options" :key="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有效电平" label-position="top">
                  <el-select
                    v-model="formCameraInfo.activeLevel"
                    placeholder="请选择"
                    class="device-select"
                  >
                    <el-option v-for="item in options" :key="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="text-right">
              <el-button color="#F53F3E">删除设备</el-button>
            </div>
          </template>
          <template v-else>
            <div>运行参数</div>
            <div class="text-[#C9CDD4]">暂未检测到相关数据</div>
            <div>运行参数</div>
            <div class="text-[#C9CDD4]">暂未检测到相关数据</div>
          </template>
        </el-form>
      </div>
    </div>
  </DSDialog>
  <CameraDialog v-model:value="isCameraDialog" />
</template>

<script setup lang="ts">
defineOptions({
  name: 'cameraManagement'
})
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'
import { RefreshRight } from '@element-plus/icons-vue'
import CameraDialog from './cameraDialog.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 isCameraDialog = ref(false)

const dataTab = ref('commParam')

const handleClick = (tab: any) => {
  dataTab.value = tab.props.name
}
// 中间tab
const deviceTab = ref('') // device/receive/send/heartbeat/response
const deviceBars = ref([])

const options = [
  {
    value: 'DPS2',
    label: 'DPS2'
  },
  {
    value: 'MV-AP1024-2T',
    label: 'MV-AP1024-2T'
  }
]
// 设备列表
const deviceList = ref([
  {
    name: '1 Light-1',
    enabled: false,
    info: {}
  },
  { name: '2 Light-2', enabled: false }
])
// 设备信息表单
const formCameraInfo = reactive({
  GenTL: false,
  typeSelection: '1',
  cameras: '',
  ctiFile: '',
  localIP: '',
  cameraIP: '',
  connectCamera: false,
  autoReconnect: false,
  loadUser: false,
  saveImage: false,
  imageCaches: 1,
  reconnectedTime: 1,
  triggerTimeout: 1,
  triggerSource: '',
  triggerMode: '',
  triggerDelay: 1,
  imageWidth: 1,
  imageHight: 1,
  pixelFormat: '',
  FPS: 1,
  actualFPS: 1,
  exposureMode: '',
  exposureTime: 1,
  gainMode: '',
  gain: 1,
  gainMin: 1,
  gainMax: 1,
  gamma: false,
  selector: '',
  cameraType: '',
  activeLevel: ''
})

const selectDevice = (device: Device) => {
  deviceTab.value = device.name
  Object.assign(formCameraInfo, device.info)
  console.log(deviceTab.value)
}

// 添加设备
const addDevice = () => {
  isCameraDialog.value = true
  // deviceList.value.push({
  //   name: `${deviceList.value.length + 1} Light-${deviceList.value.length + 1}`,
  //   enabled: false,
  //   info: {}
  // })
}

const handleTableAdd = () => {
  formCameraInfo.tableData.push({
    num: formCameraInfo.tableData.length + 1,
    inputIO: '1',
    triggeringSignal: '上升沿',
    process: '流程1'
  })
}

const handleChange = () => {}
// 处理对话框关闭事件
const handleClose = () => {}
</script>

<style scoped lang="scss">
/* 弹框整体样式 */
.cameraManagement-container {
  position: relative;
  width: 100%;
  height: 766px;
  box-sizing: border-box;
  display: flex;
  .cameraManagement-infoList {
    box-sizing: border-box;
    width: 250px;
    .cameraManagement-infoList-title {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: bold;
      .infoList-title-btn {
        width: 24px;
        height: 24px;
        background: #154ddd;
        border: none;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    .cameraManagement-infoList-content {
      .cameraManagement-infoList-item {
        box-sizing: border-box;
        width: 100%;
        height: 32px;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
      .cameraManagement-infoList-item.active {
        background: #f2f2f7;
        span {
          color: #154ddd;
        }
      }
    }
  }
  .cameraManagement-content {
    flex: 1;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 16px 24px 24px;
    .device-select {
      color: #fff;
      :deep(.el-select__wrapper) {
        background: #303136;
        .el-select__selected-item {
          color: #fff;
        }
      }
    }
    :deep(.el-input-number) {
      width: 100%;
      .el-input-number__increase,
      .el-input-number__decrease {
        background: transparent;
        color: #fff;
        border: none;
      }
    }
    .form-device-btn {
      width: 80px;
      padding: 0 12px;
    }
    .camera-radio-group {
      height: 32px;
      :deep(.el-radio.el-radio--large) {
        height: 32px;
      }
      :deep(.el-radio__label) {
        color: #fff;
      }
    }
  }
  .cameraManagement-line-first {
    position: absolute;
    left: 250px;
    width: 1px;
    height: 100vh;
    background-color: #fff;
    opacity: 0.3;
  }
  .data-tabs {
    width: 100%;
    :deep(.el-tabs__item) {
      color: #fff;
    }
  }
}
</style>
