<template>
  <div class="company-home" id="company-home">
    <RealtimeSurveillance v-if="curCamera?.code" />
    <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
    <CompanyRating v-if="!curCamera?.code" />
    <ControlTab @open-surveillance-list="showSurveillanceList = true" @open-question-list="handleOpenQuestionList" />
    <SurveillanceList v-if="showSurveillanceList" @close="showSurveillanceList = false" />

    <QuestionList v-if="showQuestionList" @close="handleQuestionListClose" />
  </div>
</template>

<script setup lang="ts">
  import CompanyRating from './components/CompanyRating.vue';
  import ControlTab from './components/ControlTab.vue';
  import SurveillanceList from './components/SurveillanceList.vue';
  import RealtimeSurveillance from './components/RealtimeSurveillance.vue';
  import QuestionList from '../safety-question-list/QuestionList.vue';

  import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';

  import useViolationNoticeCompany from './hooks/use-violation-notice-company';
  import useCameraStore from './stores/use-camera-store';
  import { nextTick, onUnmounted, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { WORKSHOP_INFOS } from '../safety-workshop-list/constants';

  const showSurveillanceList = ref(false);

  useViolationNoticeCompany();

  const cameraStore = useCameraStore();
  const { curCamera } = storeToRefs(cameraStore);

  const questionListStore = useQuestionListStore();
  const { showQuestionList } = storeToRefs(questionListStore);

  function handleOpenQuestionList() {
    if (curCamera.value?.id) {
      questionListStore.setState({
        type: 'camera',
        cameraId: curCamera.value.id,
      });
    } else {
      questionListStore.setState({
        type: 'all',
        workshopCodes: WORKSHOP_INFOS.map((item) => item.workshopCode),
      });
    }
    nextTick(() => {
      questionListStore.openList();
    });
  }
  function handleQuestionListClose() {
    questionListStore.closeList();
  }

  onUnmounted(() => {
    cameraStore.clearCurCamera();
  });
</script>

<style scoped>
  .company-home {
    width: 100%;
    height: 675px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
</style>
