<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask_scenic" @click="handleClose"></div>
    <!-- 靖安景区人流详情弹窗区域 -->
    <div class="scenicDetail">
      <!-- 标题区域 -->
      <div class="header">
        <div class="header_text">靖安景区人流详情</div>
        <div class="header_icon" @click="handleClose"></div>
      </div>
      <!-- 第一层数据区域 -->
      <div class="top">
        <!-- 游客分析区域 -->
        <ScenicDetailAnalyse />
        <!-- 游客来源地统计区域 -->
        <ScenicDetailSource />
      </div>
      <!-- 第二层数据区域 -->
      <div class="bottom">
        <!-- 游客趋势走势区域 -->
        <ScenicDetailTrend />
        <!-- 景区本年游客人流排行榜区域 -->
        <ScenicDetailRank />
        <!-- 游客年龄及性别分布区域 -->
        <ScenicDetailAge />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScenicDetailAnalyse from "./scenicDetailAnalyse.vue";
import ScenicDetailSource from "./scenicDetailSource.vue";
import ScenicDetailTrend from "./scenicDetailTrend.vue";
import ScenicDetailRank from "./scenicDetailRank.vue";
import ScenicDetailAge from "./scenicDetailAge.vue";

const $emit = defineEmits(["changeShowCloseScenic"]);

// 点击关闭按钮回调
const handleClose = () => {
  $emit("changeShowCloseScenic", false);
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -254px;
  left: -1526px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .mask_scenic {
    position: absolute;
    top: 0;
    width: 7072px;
    height: 1872px;
  }

  .scenicDetail {
    position: relative;
    width: 1704px;
    height: 1302px;
    background-image: url(@/assets/images/news-list-background.png);
    background-size: 100% 100%;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 56px;
      width: 1704px;
      height: 87px;

      .header_text {
        margin-left: 161px;
        font-size: 40px;
        font-family: "庞门正道标题体";
        background-image: linear-gradient(#00dbff, #00b3ff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .header_icon {
        margin-right: 48px;
        width: 82px;
        height: 82px;
        cursor: pointer;
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 58px 0 63px;
      margin-top: 60px;
      width: 1704px;
      height: 545px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      padding: 0 58px 0 63px;
      width: 1704px;
      height: 490px;
    }
  }
}
</style>
