<template>
  <div class="detail">
    <!-- 标题区域 -->
    <div class="detail_title">景区详情</div>

    <!-- 视频区域 -->
    <div class="detail_video">
      <div id="videoDom4"></div>
      <div class="video_title">{{ scenicInfo?.scenicSpotName }}</div>
    </div>

    <!-- 详细信息区域 -->
    <div class="detail_msg">
      <div class="msg_img">
        <img :src="scenicInfo?.image" />
      </div>
      <div class="msg_info">
        <div class="info_title">{{ scenicInfo?.scenicSpotName }}</div>
        <div class="info_num">
          联系人：{{ scenicInfo?.responsibler }} &nbsp;&nbsp;&nbsp;&nbsp;
          电话号码：{{ scenicInfo?.responsiblerPhone }}
        </div>
      </div>
    </div>

    <!-- 人次信息区域 -->
    <div class="detail_num">
      <!-- 当日信息 -->
      <div class="num_box">
        <div class="box_img">
          <img src="@/assets/images/8.png" />
        </div>
        <div class="box_info">
          <div class="info_title">当日</div>
          <div class="info_num">
            <p ref="dayDom">{{ dayValue }}</p>
            人次
          </div>
        </div>
      </div>

      <!-- 累计信息 -->
      <div class="num_box">
        <div class="box_img">
          <img src="@/assets/images/8.png" />
        </div>
        <div class="box_info">
          <div class="info_title">累计</div>
          <div class="info_num">
            <p ref="addDom">{{ addValue }}</p>
            人次
          </div>
        </div>
      </div>

      <!-- 过载信息 -->
      <div class="num_box">
        <div class="box_img">
          <img src="@/assets/images/8.png" />
        </div>
        <div class="box_info">
          <div class="info_title">过载</div>
          <div class="info_num">
            <p ref="moreDom">{{ moreValue }}</p>
            人次
          </div>
        </div>
      </div>
    </div>

    <!-- 边框线区域 -->
    <div class="detail_line"></div>

    <!-- 简介区域 -->
    <div class="detail_desc">
      {{ scenicInfo?.scenicSpotDesc }}
    </div>

    <!-- 关闭按钮区域 -->
    <div class="detail_close" @click="handleCloseDetail"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from "vue";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入景点相关的接口
import { reqGetScenicInfo, reqGetScenicInfoByNum } from "@/api/scenic/index";
// 引入景点数据
import { scenicData } from "@/components/map/scenicData";
// 引入监控相关的数据接口
import { getVedio } from "@/api/video/index";
// @ts-ignore
import WasmPlayer from "@easydarwin/easywasmplayer";

// 父组件传递过来的数据
const props = defineProps(["detailObj"]);

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

// 当日数据
const dayDom = ref();
const dayValue = ref<number>(666);
// 累计数据
const addDom = ref();
const addValue = ref<number>(659);
// 过载数据
const moreDom = ref();
const moreValue = ref<number>(15);

// 景区信息
const scenicInfo = ref();

// 监控实例
const player = ref();

onMounted(() => {
  // 获取监控视频地址
  getVideosData();
  // 获取景点信息
  getScenicInfo();
  // 获取单个景点人数相关信息
  getScenicInfoByNum();
});

onUnmounted(() => {
  // 页面卸载时销毁WasmPlayer实例
  player.value.destroy();
});

// 监听景区变化刷新数据
watch(props.detailObj, () => {
  player.value?.destroy();
  // 获取监控视频地址
  getVideosData();
  // 获取景点信息
  getScenicInfo();
  // 获取单个景点人数相关信息
  getScenicInfoByNum();
});

// 获取监控视频地址
const getVideosData = async () => {
  const Obj = scenicData.find((ele) => ele.title === props.detailObj.name);

  const res = await getVedio(Obj?.rtspaddr as string);
  player.value = new WasmPlayer(null, "videoDom4");

  player.value.play(res, 1);
};

// 获取景点信息
const getScenicInfo = async () => {
  const res = await reqGetScenicInfo(props.detailObj.name);
  // console.log(res);
  scenicInfo.value = res.data;
};

// 获取单个景点人数相关信息
const getScenicInfoByNum = async () => {
  const res = await reqGetScenicInfoByNum({
    place_name: props.detailObj.name,
  });
  // console.log(res);
  dayValue.value = res.dayNum;
  addValue.value = res.LjNum * 1;
  moreValue.value = res.maxNum;
  // 让数字跳动
  getCountUpNum();
};

// 让数字跳动
const getCountUpNum = () => {
  countUpNum(dayDom.value, dayValue.value);
  countUpNum(addDom.value, addValue.value);
  countUpNum(moreDom.value, moreValue.value);
};

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

<style lang="scss" scoped>
.detail {
  position: absolute;
  top: -110px;
  left: 2510px;
  width: 1016px;
  height: 1378px;
  color: #fff;
  background-image: url(@/assets/images/news-detail-background.png);
  background-size: 100% 100%;

  .detail_title {
    margin-top: 70px;
    font-size: 30px;
    font-weight: bold;
  }

  .detail_video {
    position: relative;
    margin-left: 15px;
    margin-top: 75px;
    width: 874px;
    height: 491px;

    .video_title {
      z-index: 10;
      position: absolute;
      top: 31px;
      left: 44px;
      padding: 15px 15px 0;
      font-size: 27px;
      background: linear-gradient(
        270deg,
        rgba(116, 180, 232, 0.29) 0%,
        rgba(44, 95, 143, 1) 100%
      );
    }
  }

  .detail_msg {
    display: flex;
    margin-top: 59px;
    margin-left: 57px;
    width: 768px;
    height: 74px;

    .msg_img {
      margin-right: 20px;
      width: 106px;
      height: 74px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .msg_info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .info_title {
        font-size: 24px;
        font-weight: bold;
      }

      .info_num {
        font-size: 18px;
      }
    }
  }

  .detail_num {
    display: flex;
    align-items: center;
    margin-top: 42px;
    margin-left: 61px;
    width: 772px;
    height: 50px;

    .num_box {
      display: flex;
      margin-right: 80px;
      width: 170px;
      height: 48px;

      .box_img {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        border: 1px solid #78b7ff;
        background: linear-gradient(
          180deg,
          rgba(120, 183, 255, 0.4) 0%,
          rgba(255, 255, 255, 0) 100%
        );

        img {
          width: 28px;
          height: 28px;
        }
      }

      .box_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;

        .info_title {
        }

        .info_num {
          display: flex;
          align-items: flex-end;

          p {
            margin-right: 6px;
            font-size: 24px;
            color: #78b7ff;
          }
        }
      }
    }
  }

  .detail_line {
    margin-top: 30px;
    margin-left: 63px;
    width: 772px;
    height: 6px;
    background-image: url(@/assets/images/news-list-bottomLine.png);
    background-size: 100% 100%;
  }

  .detail_desc {
    margin-top: 25px;
    margin-left: 62px;
    width: 772px;
    height: 385px;
    font-size: 18px;
    line-height: 35px;
    overflow-y: auto;
  }

  .detail_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 98px;
    height: 98px;
    cursor: pointer;
  }
}
</style>
