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

    <!-- <QuestionList v-if="showQuestionList" /> -->
  </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 useViolationNoticeCompany from './hooks/use-violation-notice-company';
  import { ref } from 'vue';

  const curCamCode = ref<null | string>(null);

  const showSurveillanceList = ref(false);
  const showQuestionList = ref(false);

  useViolationNoticeCompany();
</script>

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