<template>
  <div style="margin-left: 8px; display: flex" v-if="cameraDetailStore.detail">
    <div style="margin-top: 5px; margin-right: 4px">渲染开关</div>
    <ElSelect v-model="selectedIds" @change="changeRender" style="width: 150px">
      <ElOption value="" label="无渲染">无渲染</ElOption>
      <ElOption value="demo" label="有渲染">有渲染</ElOption>
      <!-- <ElOption v-for="item in allAlgoList" :key="item.id" :value="item.id" :label="item.name">
        {{ item.name }}
        <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
      </ElOption> -->
    </ElSelect></div
  >
</template>
<script lang="ts" setup>
  import { ElSelect, ElOption } from 'element-plus';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import { storeToRefs } from 'pinia';
  import { ref } from 'vue';
  import { renderCamera } from '@/api/camera/camera-preview';
  import { watch } from 'vue';

  const cameraDetailStore = useCameraDetailStore();
  const cameraAlgoStore = useCameraAlgoStore();

  const emits = defineEmits<{
    (e: 'changeCameraRender', render: number | string): unknown;
  }>();

  const { isAlgoBind } = cameraAlgoStore;
  const { allAlgoList } = storeToRefs(cameraAlgoStore);

  const selectedIds = ref<number | string>();

  const changeRender = (val) => {
    const renderData = {
      render: val,
      cameraId: cameraDetailStore.cameraId,
    };
    renderCamera(renderData).then(() => {
      emits('changeCameraRender', val);
    });
  };

  const changeRenderWatch = () => {
    if (cameraDetailStore.detail?.render) {
      // selectedIds.value = Number(cameraDetailStore.detail?.render);
      selectedIds.value = cameraDetailStore.detail?.render;
    } else {
      selectedIds.value = '';
    }
  };

  watch(() => cameraDetailStore.cameraId, changeRenderWatch, { immediate: true });
  watch(() => cameraDetailStore.detail?.render, changeRenderWatch, { immediate: true });
</script>
<style scoped></style>
