<template>
  <div>
    <a-tabs
      v-model:activeKey="activeKey"
      tab-position="left"
      :style="{ height: '100%' }"
      @tabScroll="callback"
    >
      <a-tab-pane :key="1" tab="画面显示">
        <a-tabs
          v-model:activeKey="oneChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          @tabScroll="callback"
          type="card"
        >
          <a-tab-pane :key="1" tab="视频显示">
            <div class="scrollable" v-if="oneChildActiveKey==1">
              <CameraCommonForm :data="cameraData"></CameraCommonForm>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="OSD">
            <div class="scrollable" v-if="oneChildActiveKey==2">
              <CameraOsdForm :data="cameraData"></CameraOsdForm>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="3" tab="码流参数">
            <div class="scrollable" v-if="oneChildActiveKey==3">
              <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="事件侦测">
        <a-tabs
          v-model:activeKey="twoChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          @tabScroll="callback"
          type="card"
        >
          <a-tab-pane :key="1" tab="镜头遮挡">
            <div class="scrollable">
              <CameraBlockForm :data="cameraData"></CameraBlockForm>
            </div>
          </a-tab-pane>
<!--          <a-tab-pane :key="2" tab="移动侦测">-->
<!--            <div class="scrollable">-->
<!--              21-->
<!--            </div>-->
<!--          </a-tab-pane>-->

<!--          <a-tab-pane :key="3" tab="区域覆盖">-->
<!--            <div class="scrollable">-->
<!--              23-->
<!--            </div>-->
<!--          </a-tab-pane>-->
<!--          <a-tab-pane :key="4" tab="越界侦测">-->
<!--            <div class="scrollable">-->
<!--              24-->
<!--            </div>-->
<!--          </a-tab-pane>-->
<!--          <a-tab-pane :key="5" tab="区域入侵">-->
<!--            <div class="scrollable">-->
<!--              25-->
<!--            </div>-->
<!--          </a-tab-pane>-->
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="报警设备">
        <a-tabs
          v-model:activeKey="threeChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          @tabScroll="callback"
          type="card"
        >
          <a-tab-pane :key="1" tab="白光报警">
            <div class="scrollable" v-if="threeChildActiveKey==1">
              <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="声音报警">
            <div class="scrollable" v-if="threeChildActiveKey==2">
              <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane :key="4" tab="录像管理">
        <a-tabs
          v-model:activeKey="fourChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          @tabScroll="callback"
          type="card"
        >
          <a-tab-pane :key="1" tab="MP4转发FTP">
            <div class="scrollable">
              <CameraUploadForm :data="cameraData"></CameraUploadForm>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="当天录像">
            <div class="scrollable">
              <CameraRecordList :data="cameraData" />
            </div>
          </a-tab-pane>
          <!--          <a-tab-pane :key="3" tab="录像设置">
            <div class="scrollable">
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="recordingConfig">获取录像配置</a-button>
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="setRecordingPlan">设置录像计划</a-button>
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="batchProgress">录像计划进度</a-button>
            </div>
          </a-tab-pane>-->
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" name="iot-nuIotCameraInfo" setup>
  import { ref, onMounted, reactive } from "vue";
  import { useRouter } from 'vue-router';
  import type { TabsProps } from 'ant-design-vue';
  import { useListPage } from "@/hooks/system/useListPage";
  import { getImageCommon,setImageCommon } from "@/views/iot/tplink/camera/camera.api";
  import { recordingColumns,searchRecording } from "@/views/iot/tplink/camera/camera.data";
  import CameraCommonForm from './CameraCommonForm.vue';//画面公共信息
  import CameraOsdForm from './CameraOsdForm.vue';//OSD信息
  import CameraBitrateForm from './CameraBitrateForm.vue';//码流参数
  import CameraBlockForm from './CameraBlockForm.vue';//镜头遮挡
  import CameraLightAlarmForm from './CameraLightAlarmForm.vue';//白光报警
  import CameraSoundAlarmForm from './CameraSoundAlarmForm.vue';//声音报警
  import CameraRecordList from './CameraRecordList.vue';//录像列表
  import CameraUploadForm from './CameraUploadForm.vue';//上传FTP
  import { useMessage } from "@/hooks/web/useMessage";

  const { createMessage } = useMessage();
  let router = useRouter();
  const formData = reactive<Record<string, any>>({
    //预览通道参数
    deviceIndex: '',//设备索引
    parentId: '',//存储设备(nvr,nvs)ID
    multitrans: '',//multitrans功能标识
    scale: 1 ,//回放速率
    projectId: '' ,//项目ID
    regionId: '' ,//区域ID
    ip: '' ,//IP
  });
  const cameraData = ref({});
  const activeKey = ref(1);
  const oneChildActiveKey = ref(1);
  const twoChildActiveKey = ref(1);
  const threeChildActiveKey = ref(1);

  const imageData = reactive<Record<string, any>>({
    //画面显示配置
    luma: "50", //亮度
    contrast: '50', //对比度
    saturation: '50', //饱和度
    sharpness: '50', //锐度
    wide_dynamic: 'off',  //宽动态
    wd_gain: '50', //宽动态度
  });

  // function recordingConfig(){
  //   getRecordCfgs({
  //     "deviceIndex": formData.deviceIndex,
  //     "parentId": formData.parentId,
  //     "projectId": formData.projectId,
  //     "regionId": formData.regionId,
  //     "ip": formData.ip
  //   }).then(res=>{
  //
  //   });
  // }
  //
  // function setRecordingPlan(){
  //   setRecordCfgs({
  //     "deviceIndex": formData.deviceIndex,
  //     "parentId": formData.parentId,
  //     "recordSwitch": 0,
  //     "streamType": 0
  //   }).then(res=>{
  //
  //   });
  // }
  //
  // function batchProgress(){
  //   getBatchProgress({}).then(res=>{});
  // }

  onMounted(()=>{
    formData.deviceIndex = router.currentRoute.value.query.deviceIndex;
    formData.parentId = router.currentRoute.value.query.parentId;
    formData.multitrans = router.currentRoute.value.query.multitrans;
    formData.projectId = router.currentRoute.value.query.projectId;
    formData.regionId = router.currentRoute.value.query.regionId;
    formData.ip = router.currentRoute.value.query.ip;

    cameraData.value.deviceIndex = formData.deviceIndex;
    cameraData.value.projectId = formData.projectId;
    cameraData.value.regionId = formData.regionId;
    cameraData.value.multitrans = formData.multitrans;
    cameraData.value.scale = formData.scale;
  })

</script>

<style lang="less" scoped>
  .scrollable {
    width: 99.6%;
    height: calc(100vh - 160px);
    overflow: auto; /* 或者使用 scroll, hidden, visible */
    //border: 1px solid #000;
    background-color: white;
  }

  :deep(.ant-tabs-nav){
    margin-bottom: 3px;
    margin-left: -1px;
  }

  :deep(.ant-tabs-left>.ant-tabs-content-holder>.ant-tabs-content>.ant-tabs-tabpane){
    padding-left: 3px;
  }

</style>
