<template>
  <div class="project-detail-wrapper">
    <div class="header">项目详情</div>
    <div class="content">
      <el-tabs :tab-position="'left'" v-model="activeTab">
        <el-tab-pane label="基础信息" name="1" lazy>
          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
        </el-tab-pane>
        <el-tab-pane label="数据统计" name="2" lazy>
          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
        </el-tab-pane>
        <el-tab-pane label="监测预警" name="5" lazy>
          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
        </el-tab-pane>
        <!-- <el-tab-pane label="视频分析" name="6" lazy>
          <VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineOptions, defineEmits, defineProps, watch } from "vue";
import BaseInfo from "./components/BaseInfo.vue";
import DataStatistics from "./components/DataStatistics.vue";
import MonitorWarning from "./components/MonitorWarning.vue";
// import VideoAnalysis from "./components/VideoAnalysis.vue";
const props = defineProps({
  data: {
    type: String,
    default: "",
  },
});
const resCode = ref("");
defineOptions({
  name: "ProjectDetail",
});
const emits = defineEmits(["getResInfo"]);
const activeTab = ref("1");
function handleGetResInfo(data: any) {
  emits("getResInfo", data);
}
watch(
  () => props.data,
  (val) => {
    if (val) {
      debugger;
      resCode.value = val.code;
    }
  },
  { immediate: true },
);
</script>
<style scoped lang="scss">
.project-detail-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1000px;
  min-height: 600px;
  max-height: 800px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: #fff;
}
</style>
