<template>
  <Dialog
    :title="projectName"
    :visible="dialogVisible"
    width="70%"
    @change-visible="changeVisible"
  >
    <DialogTabs
      :tabList="tabList"
      :currentTab="currentTabNow"
      @change="(val) => changeTab(val)"
    ></DialogTabs>
    <component :is="currentTabNow" :project-id="projectId"></component>
  </Dialog>
</template>
<script>
import ProjectDetail from "./ProjectDetail.vue";
import Dust from "./Dust.vue";
import VideoSupervisory from "./VideoSupervisory.vue";
import WarningMsg from "./WarningMsg.vue";
export default {
  name: "ProjectDialog",
  components: { ProjectDetail, Dust, VideoSupervisory, WarningMsg },
  props: {
    projectName: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    projectId: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      tabList: [
        { name: "ProjectDetail", label: "项目概况" },
        { name: "Dust", label: "扬尘监测" },
        { name: "VideoSupervisory", label: "视频监控" },
        { name: "WarningMsg", label: "预警信息" },
      ],
      currentTabNow: "ProjectDetail",
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    changeTab(e) {
      this.currentTabNow = e;
    },
    changeVisible(val) {
      console.log(val);
      this.dialogVisible = val;
    },
  },
  mounted() {
    this.$eventBus.$on("switchTab", (type) => {
      this.$nextTick(() => {
        this.currentTabNow = type;
      });
    });
  },
};
</script>
  <style lang="less" scoped>
</style>