<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <a-row>
          <a-col :span="12">
            <a-row>
              <a-col :span="20">
                <a-divider orientation="left">主码流</a-divider>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    分辨率
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_resolution" :options="formData.mainResolutionArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    视频帧率
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_frame_rate" :options="formData.mainFrameRatesArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    码率类型
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_bitrate_type" :options="formData.mainBitrateTypeArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    图像质量
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_quality" :options="formData.mainQualityArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 10px">
                  <a-col :span="6" class="labelText">
                    码率上限
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_bitrate" :options="formData.mainBitrateArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 10px">
                  <a-col :span="6" class="labelText">
                    视频编码
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.main_encode_type" :options="formData.mainEncodeTypeArr"/>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-row style="margin-top: 14px">
              <a-col :span="1"></a-col>
              <a-col :span="20">
                <a-button type="primary" preIcon="ant-design:save-outlined" @click="setParams">保存</a-button>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="12">
            <a-row>
              <a-col :span="20">
                <a-divider orientation="left">子码流</a-divider>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    分辨率
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_resolution" :options="formData.minorResolutionArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    视频帧率
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_frame_rate" :options="formData.minorFrameRatesArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    码率类型
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_bitrate_type" :options="formData.minorBitrateTypeArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 14px">
                  <a-col :span="6" class="labelText">
                    图像质量
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_quality" :options="formData.minorQualityArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 10px">
                  <a-col :span="6" class="labelText">
                    码率上限
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_bitrate" :options="formData.minorBitrateArr"/>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="20">
                <a-row style="margin-bottom: 10px">
                  <a-col :span="6" class="labelText">
                    视频编码
                  </a-col>
                  <a-col :span="16">
                    <a-select v-model:value="formData.minor_encode_type" :options="formData.minorEncodeTypeArr"/>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
  import {  ref,  reactive,  defineProps,  onMounted,  watch,} from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { getValueType } from '/@/utils';
  import { Form } from 'ant-design-vue';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { getVideoParams,setVideoParams } from "@/views/iot/tplink/camera/camera.api";

  const props = defineProps({
    data: { type: Object, default: () => ({}) },
  });

  const formData = reactive<Record<string, any>>({
    deviceIndex: '', //设备索引

    main_quality: '', //图像质量
    mainQualityArr: [],
    main_bitrate: '', //码率上限
    mainBitrateArr: [],
    main_frame_rate: '', //帧速率
    mainFrameRatesArr: [],
    main_encode_type: '', //视频编码
    mainEncodeTypeArr: [],
    main_resolution: '', //分辨率
    mainResolutionArr: [],
    main_bitrate_type: '', //码率类型
    mainBitrateTypeArr: [],

    minor_quality: '', //图像质量
    minorQualityArr: [],
    minor_bitrate: '', //码率上限
    minorBitrateArr: [],
    minor_frame_rate: '', //帧速率
    minorFrameRatesArr: [],
    minor_encode_type: '', //视频编码
    minorEncodeTypeArr: [],
    minor_resolution: '', //分辨率
    minorResolutionArr: [],
    minor_bitrate_type: '', //码率类型
    minorBitrateTypeArr: [],

  });

  const confirmLoading = ref<boolean>(false);

  /**
   * 获取画面通用信息
   */
  function getParams(deviceIndex){
    if(deviceIndex==null){
      return
    }
    getVideoParams({
      "deviceIndex": deviceIndex
    }).then(res=>{
      let mainData = res.mainData;
      let minorData = res.minorData;

      formData.main_quality = mainData.quality;
      formData.main_bitrate = mainData.bitrate;
      formData.main_frame_rate = mainData.frame_rate;
      formData.main_encode_type = mainData.encode_type;
      formData.main_resolution = mainData.resolution;
      formData.main_bitrate_type = mainData.bitrate_type;

      formData.minor_quality = minorData.quality;
      formData.minor_bitrate = minorData.bitrate;
      formData.minor_frame_rate = minorData.frame_rate;
      formData.minor_encode_type = minorData.encode_type;
      formData.minor_resolution = minorData.resolution;
      formData.minor_bitrate_type = minorData.bitrate_type;

      formData.mainQualityArr = res.mainQualityArr;
      formData.mainBitrateArr = res.mainBitrateArr;
      formData.mainFrameRatesArr = res.mainFrameRatesArr;
      formData.mainEncodeTypeArr = res.mainEncodeTypeArr;
      formData.mainResolutionArr = res.mainResolutionArr;
      formData.mainBitrateTypeArr = res.mainBitrateTypeArr;

      formData.minorQualityArr = res.minorQualityArr;
      formData.minorBitrateArr = res.minorBitrateArr;
      formData.minorFrameRatesArr = res.minorFrameRatesArr;
      formData.minorEncodeTypeArr = res.minorEncodeTypeArr;
      formData.minorResolutionArr = res.minorResolutionArr;
      formData.minorBitrateTypeArr = res.minorBitrateTypeArr;

    });
  }

  /**
   * 设置画面通用信息
   */
  function setParams(){
    confirmLoading.value = true;
    let params = {
      "deviceIndex": formData.deviceIndex,
      "main":{
        "quality": formData.main_quality,
        "bitrate": formData.main_bitrate,
        "frame_rate": formData.main_frame_rate,
        "encode_type": formData.main_encode_type,
        "resolution": formData.main_resolution,
        "bitrate_type": formData.main_bitrate_type,
      },
      "minor":{
        "quality": formData.minor_quality,
        "bitrate": formData.minor_bitrate,
        "frame_rate": formData.minor_frame_rate,
        "encode_type": formData.minor_encode_type,
        "resolution": formData.minor_resolution,
        "bitrate_type": formData.minor_bitrate_type,
      },
    };
    setVideoParams(params).then(res=>{
      confirmLoading.value = false;
    });
  }

  onMounted(() => {
    watch(
      () => props.data,
      async () => {
        formData.deviceIndex = props.data.deviceIndex;
        getParams(formData.deviceIndex);
      },
      { deep: true, immediate: true }
    );
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
  }

  .labelText {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
  }

  .ant-select {
    display: flex;
  }

</style>
