<template>
  <ContentWrap>
    <el-row>
      <el-col :span="12">
        <Camera :cameraId="cameraId" :ptzShow="true" :key="cameraId" />
      </el-col>

      <el-col :span="12">
        <el-table
          :data="list"
          :row-key="(record) => record.id"
          @selection-change="getConfigIoList"
          :pagination="false"
          style="width: 100%; height: 335px; overflow-y: auto"
          max-height="800"
        >
          <el-table-column prop="name" label="指令名称">
            <template #default="scope">
              <el-button type="text" @click="toPtz(scope.row)">
                {{ scope.row.name }}({{ scope.row.code }})
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="position" label="配置">
            <template #default="scope">
              <el-button
               
                type="text"
                class="plc"
                @click="overwritePtz(scope.row.ptzId)"
              >
                覆盖
              </el-button>

              <el-button type="text" class="plc" @click="showModelDel(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-space wrap>
          指令编码：
          <el-input v-model="formData.code" style="width: 80px" placeholder="编码" />
          指令名称：
          <el-input v-model="formData.name" style="width: 80px" placeholder="名称" />
          <el-button @click="addRouters">提交</el-button>
        </el-space>
      </el-col>
    </el-row>
  </ContentWrap>
</template>

<script setup lang="ts">
import Camera from '@/components/camera/camera.vue'
import { CameraApi, CameraVO, CameraIoApi, CameraIOVO } from '@/api/logistics/camera'
import { ref, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const props = defineProps<{
  cameraId: number
  ptzShow?: boolean
}>()

const formData = ref<{
  id?: number
  cameraId?: number
  type?: string
  ptzId?: number
  name?: string
  code?: string
}>({
  id: undefined,
  cameraId: props.cameraId,
  type: undefined,
  ptzId: undefined,
  name: undefined,
  code: undefined
})

const list = ref<CameraIOVO[]>([]) // 列表的数据

// 异步获取列表数据
const getList = async () => {
  console.log(props.cameraId);
  
  try {
    const data = await CameraIoApi.getCameraIoList(formData.value) // 确保 cameraId 不为 undefined
    list.value = data || [] // 确保赋值为数组
  } catch (error) {
    console.error('获取相机 IO 列表失败:', error)
  }
}

const toPtz = async (row: CameraIOVO) => {
  formData.value.ptzId = row.ptzId
  const req = formData.value as unknown as CameraIOVO
  await CameraIoApi.callPtz(req) // 等待 Promise 解析
  await getList()
}
const addRouters = async () => { // 移除未使用的 id 参数
  try {
    const req = formData.value as unknown as CameraIOVO
    await CameraIoApi.createCameraIo(req) // 等待 Promise 解析完成
    await getList() // 等 createCameraIo 完成后再执行 getList
  } catch (error) {
    console.error('创建相机IO失败:', error)
    message.error('创建失败') // 添加用户友好的错误提示
  }
}
// 监听 cameraId 变化
watch(
  () => props.cameraId,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      formData.value.cameraId = newVal // 同步更新 formData 中的 cameraId
      getList() // 重新获取列表
    }
  }
)

// 异步获取列表数据
const showModelDel = async (id: number) => {
  try {
    await CameraIoApi.deleteCameraIo(id) // 等待 Promise 解析
    getList()
  } catch (error) {
    console.error('删除相机 IO 失败:', error)
  }
}

const overwritePtz =async (ptzId: number) => {
  formData.value.ptzId = ptzId
  const req = formData.value as unknown as CameraIOVO
 await CameraIoApi.overwritePtz(req) // 等待 Promise 解析
  await getList()
}

onMounted(() => {
  getList()
})

onUnmounted(() => {
  // 清理逻辑（如果需要）
  console.log('组件销毁时执行清理逻辑');
  
  list.value = [] // 确保赋值为数组
})
</script>

<style scoped>
.container {
  display: flex;
  justify-content: flex-end; /* 将按钮组放到右侧 */
  padding-bottom: 10px; /* 可选，增加间距 */
}
</style>