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

    <!-- 内容显示区域 -->
    <div class="content">
      <!-- 标题区域 -->
      <div class="content_title">
        <p>靖安各个路口人流</p>
      </div>

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

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

    <!-- 路口详情弹窗 -->
    <Transition name="fade">
      <CrossingDetailDialog
        v-if="showDialog"
        :detailObj="detailObj"
        @closeDetail="closeDetail"
      />
    </Transition>

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

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import CrossingDetailDialog from "./crossingDetailDialog.vue";
import AnalyseMapDialog from "../analyseMapDialog.vue";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入路口数据
import { junctionData } from "@/components/map/junctionData";
// 引入路口相关的接口
import { reqJtNumByDay } from "@/api/junction/index";

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

// 路口列表数组
const list = ref<any>([]);

// 路口详情弹窗显示隐藏控制
const showDialog = ref<boolean>(false);
// 地图弹窗显示隐藏控制
const showDialogMap = ref<boolean>(false);
// 点击路口的数据
const detailObj = ref({});

onMounted(() => {
  // 获取路口数据
  getList();
});

// 获取路口数据
const getList = async () => {
  const res = await reqJtNumByDay();
  // console.log(res);
  list.value = res.data;

  list.value.forEach((ele: any) => {
    junctionData.forEach((e) => {
      if (e.title === ele.place_name) {
        ele.rtspaddr = e.rtspaddr;
      }
    });
  });

  // 让数字跳动
  getCountUpNum();
};

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

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

// 让数字跳动
const getCountUpNum = () => {
  nextTick(() => {
    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>
.left_analyse {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  margin-left: 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%;
  }

  .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%;

      p {
        margin-left: 68px;
      }
    }

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

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

        .box_name {
          margin-left: 32px;
          width: 340px;
          font-size: 32px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .box_num {
          margin-right: 105px;
          font-size: 60px;
          font-weight: bold;
        }
      }
    }

    .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-background.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>
