<template>
  <el-dialog
    v-model="visible"
    title="责任度计算"
    draggable
    width="1700px"
    style="height: 875px"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="currentPosition">
      当前位置：{{ alias || "" }}
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="系统" name="1">
        <system @setTitle="setTitle" v-if="activeName == '1'" />
      </el-tab-pane>
      <el-tab-pane label="配网" name="2">
        <distributionNetwork @setTitle="setTitle" v-if="activeName == '2'" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import distributionNetwork from "./distributionNetwork.vue";
import system from "./system.vue";

const visible = ref(false);
const alias = ref("");

const activeName = ref("1");

const openDialog = () => {
  visible.value = true;
};

onMounted(() => {});
const setTitle = (title: string) => {
  alias.value = title;
};
const emit = defineEmits(["showCalculation", "close-dialog"]); // 打开弹窗

const handleClose = () => {
  visible.value = false;
  // 通知父组件显示收集界面
  emit("showCalculation", false);
  emit("close-dialog"); // 关闭弹窗
};

defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
@use "@/assets/scss/index.scss";

.currentPosition {
  position: absolute;
  top: 60px;
  right: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
}
</style>
