<template>
  <!-- 相机管理弹框 -->
  <el-dialog
    title="创建相机"
    v-model="show"
    width="520"
    class="cameraManagement-dialog ds-dialog"
    style="margin-top: 244px"
  >
    <div class="cameraManagement-container">
      <div>选择添加相机的类型</div>
      <el-radio-group v-model="cameraType" class="camera-radio-group">
        <el-radio value="1" size="large">全局相机</el-radio>
        <el-radio value="2" size="large">Dalsa图像采集</el-radio>
        <el-radio value="3" size="large">迈创采集</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <div class="dialog-footer mr-[24px] pb-[24px] pt-[16px] flex justify-end">
        <DSButton type="primary" class="">创建</DSButton>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { DSButton } from '@/components/Button'
import { InfoFilled } from '@element-plus/icons-vue'
// 接收父组件传递的显隐状态（v-model:value 对应 props.value）
interface Props {
  value: boolean
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()

const cameraType = ref(' ')
watch(
  () => props.value,
  (newVal, oldVal) => {
    console.log('props.value 变化：', '旧值:', oldVal, '新值:', newVal)
  }
)

// 计算属性双向绑定
const show = computed({
  get() {
    return props.value // 接收父组件的 isDeviceDialog 值
  },
  set(val) {
    emit('update:value', val) // 关闭时通知父组件更新状态
  }
})
</script>
<style scoped lang="scss">
.cameraManagement-container {
  box-sizing: border-box;
  width: 100%;
  height: 274px;
  padding: 16px 24px;
  .camera-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    :deep(.el-radio__label) {
      color: #fff;
    }
  }
}
</style>
