<template>
  <div class="right_analyse">
    <!-- 内容显示区域 -->
    <div class="content">
      <!-- 标题区域 -->
      <div class="content_title">
        <p>景区人流</p>
      </div>

      <!-- 列表区域 -->
      <div class="content_list">
        <div
          class="list_box"
          v-for="(item, index) in list"
          :key="index"
          @click="handleLookDetail(item)"
        >
          <div class="box_name" :title="item.place">{{ item.place }}</div>
          <div class="box_num" ref="boxNum" :data-value="item.inCount * 1">
            {{ item.inCount * 1 }}
          </div>
        </div>
      </div>

      <!-- 点击查看景区人流分布按钮区域 -->
      <div class="content_btn" @click="handleMap">
        <div class="btn_icon"></div>
      </div>
    </div>

    <!-- 边框图片区域 -->
    <div class="lineImg"></div>

    <!-- 景区详情弹窗 -->
    <Transition name="fade">
      <ScenicDetailDialog
        v-if="showDialog"
        :detailObj="detailObj"
        @closeDetail="closeDetail"
      />
    </Transition>

    <!-- 地图弹窗 -->
    <Transition name="fade">
      <AnalyseMapDialog v-if="showDialogMap" @closeMap="closeMap" />
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import ScenicDetailDialog from "./scenicDetailDialog.vue";
import AnalyseMapDialog from "../analyseMapDialog.vue";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入景点数据
import { scenicData } from "@/components/map/scenicData";
// 引入景点相关的接口
import { reqGetNumByPlace } from "@/api/scenic/index";

// DOM元素数组
const boxNum = ref();

// 景区详情弹窗显示隐藏控制
const showDialog = ref<boolean>(false);
// 地图弹窗显示隐藏控制
const showDialogMap = ref<boolean>(false);

// 景区列表数组
const list: any = ref([]);

// 点击景区的数据
const detailObj = ref({});

onMounted(() => {
  // 获取景区列表数据
  getData();
});

// 获取景区列表数据
const getData = async () => {
  const res = await reqGetNumByPlace();
  // console.log(res);

  res.data.forEach((ele: any) => {
    scenicData.forEach((e) => {
      if (e.title === ele.place) {
        ele.rtspaddr = e.rtspaddr;
      }
    });
  });

  list.value = res.data;

  nextTick(() => {
    // 让数字跳动
    getCountUpNum();
  });
};

// 点击每一个景区时的回调
const handleLookDetail = (item: any) => {
  detailObj.value = item;
  showDialog.value = true;
};

// 点击查看路口人流分布按钮回调
const handleMap = () => {
  showDialogMap.value = true;
};

// 让数字跳动
const getCountUpNum = () => {
  boxNum.value.forEach((ele: any) => {
    countUpNum(ele, ele.dataset.value);
  });
};

// 自定义事件
const closeDetail = (data: boolean) => {
  showDialog.value = data;
};

const closeMap = (data: boolean) => {
  showDialogMap.value = data;
};
</script>

<style lang="scss" scoped>
.right_analyse {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  margin-right: 135px;
  width: 775px;
  height: 1469px;
  font-size: 50px;

  .lineImg {
    margin-top: 90px;
    width: 41px;
    height: 1381px;
    background-image: url(@/assets/images/analyse-line.png);
    background-size: 100% 100%;
    transform: rotateY(180deg);
  }

  .content {
    width: 694px;
    height: 1469px;

    .content_title {
      width: 694px;
      height: 74px;
      font-size: 50px;
      color: #fff;
      font-family: "庞门正道标题体";
      background-image: url(@/assets/images/analyse-title-background.png);
      background-size: 100% 100%;
      transform: rotateY(180deg);

      p {
        margin-left: 68px;
        transform: rotateY(180deg) translate(68%);
      }
    }

    .content_list {
      margin-top: 50px;
      width: 694px;
      height: 826px;
      overflow-y: auto;

      .list_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35px;
        width: 680px;
        height: 91px;
        color: #d4e6ff;
        transform: rotate(180deg);
        cursor: pointer;
        background-image: url(@/assets/images/analyse-box-background.png);
        background-size: 100% 100%;

        .box_name {
          margin-left: 32px;
          font-size: 32px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          transform: rotate(180deg);
        }

        .box_num {
          margin-left: 30px;
          margin-right: 112px;
          font-size: 60px;
          font-weight: bold;
          transform: rotate(180deg);
        }
      }
    }

    .content_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 64px;
      margin-left: 44px;
      width: 598px;
      height: 441px;
      cursor: pointer;
      background-image: url(@/assets/images/analyse-btn-background2.png);
      background-size: 100% 100%;

      .btn_icon {
        width: 81px;
        height: 81px;
        background-image: url(@/assets/images/analyse-box-icon.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>
