<template>
  <div class="center_safe">
    <!-- 地图组件 -->
    <Map :type="currentValue" @clickMarker="clickMarker" />

    <!-- 点位总计区域 -->
    <div class="center_num">
      <div class="num_title">点位总计（个）</div>
      <div class="num_list">
        <!-- 每一个数字区域 -->
        <div
          class="list_item"
          ref="pointListDom"
          :data-value="item"
          v-for="(item, index) in pointList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <!-- 切换列表区域 -->
    <div class="center_list">
      <div
        class="list_box"
        v-for="(item, index) in list"
        :key="index"
        @click="changeIndex(index, item)"
      >
        <div class="list_item" :class="{ active: currentIndex === index }">
          <div class="icon">
            <img :src="item.url" />
          </div>
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>

  <!-- 监控点位弹窗区域 -->
  <Transition name="fade">
    <WatchDetailDialog
      v-if="showWatch"
      :currentWatch="currentWatch"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 防火点位弹窗区域 -->
  <Transition name="fade">
    <FireDetailDialog
      v-if="showFire"
      :currentFire="currentFire"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 广播点位弹窗区域 -->
  <Transition name="fade">
    <RadioDetailDialog
      v-if="showRadio"
      :currentRadio="currentRadio"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 其他点位弹窗区域 -->
  <Transition name="fade">
    <OtherDetailDialog
      v-if="showOther"
      :currentOther="currentOther"
      @closeDialog="closeDialog"
    />
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import Map from "@/components/map/map.vue";
import WatchDetailDialog from "./watchDetailDialog.vue";
import FireDetailDialog from "./fireDetailDialog.vue";
import RadioDetailDialog from "./radioDetailDialog.vue";
import OtherDetailDialog from "./otherDetailDialog.vue";
import img from "@/assets/images/30.png";
import img2 from "@/assets/images/64.png";
import img3 from "@/assets/images/65.png";
import img4 from "@/assets/images/66.png";
import { countUpNum } from "@/utils/countUpNum.ts";

// 切换列表数据
const list = ref([
  {
    title: "监控点位",
    url: img,
  },
  {
    title: "防火点位",
    url: img2,
  },
  {
    title: "广播点位",
    url: img3,
  },
  {
    title: "其他点位",
    url: img4,
  },
]);

// 点位总计数据
const pointCount = ref<number>(33);
const pointList = ref<string[]>([]);
const pointListDom = ref();

// 当前激活索引
const currentIndex = ref(0);
// 当前展示类型
const currentValue = ref("监控点位");

// 监控点位弹窗显示隐藏控制
const showWatch = ref<boolean>(false);
// 当前监控点位
const currentWatch = ref("");

// 防火点位弹窗显示隐藏控制
const showFire = ref<boolean>(false);
// 当前防火点位
const currentFire = ref("");

// 广播点位弹窗显示隐藏控制
const showRadio = ref<boolean>(false);
// 当前 广播点位
const currentRadio = ref("");

// 其他点位弹窗显示隐藏控制
const showOther = ref<boolean>(false);
// 当前 其他点位
const currentOther = ref("");

onMounted(() => {
  init();
});

const init = () => {
  // 处理点位数据
  pointList.value = pointCount.value.toString().split("");
  // 让数字跳动
  getCountUpNum();
};

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

// 切换列表时的回调
const changeIndex = (index: number, item: any) => {
  currentIndex.value = index;
  currentValue.value = item.title;
  if (item.title === "监控点位") {
    pointCount.value = 33;
  } else if (item.title === "防火点位") {
    pointCount.value = 3;
  } else if (item.title === "广播点位") {
    pointCount.value = 11;
  } else if (item.title === "其他点位") {
    pointCount.value = 1;
  }
  init();
};

// 自定义事件
const clickMarker = (title: string, type: string) => {
  console.log(title, type);
  if (type === "监控点位") {
    currentWatch.value = title;
    showWatch.value = true;
  } else if (type === "防火点位") {
    currentFire.value = title;
    showFire.value = true;
  } else if (type === "广播点位") {
    currentRadio.value = title;
    showRadio.value = true;
  } else if (type === "其他点位") {
    currentOther.value = title;
    showOther.value = true;
  }
};

const closeDialog = (data: boolean) => {
  showWatch.value = data;
  showFire.value = data;
  showRadio.value = data;
  showOther.value = data;
};

// 向外界暴露数据,方法
defineExpose({
  currentIndex,
  currentValue,
  pointCount,
  init,
});
</script>

<style lang="scss" scoped>
.center_safe {
  position: relative;
  width: 2756px;
  height: 100%;

  .center_num {
    position: absolute;
    top: 203px;
    left: 50px;

    .num_title {
      height: 34px;
      font-size: 32px;
      font-family: "庞门正道标题体";
    }

    .num_list {
      display: flex;
      margin-top: 35px;
      height: 85px;

      .list_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 14px;
        width: 62px;
        height: 85px;
        font-size: 50px;
        color: #abd2ff;
        background-image: url(@/assets/images/scenicDetail-boardNum.png);
        background-size: 100% 100%;
      }
    }
  }

  .center_list {
    position: absolute;
    right: 0;
    bottom: 197px;
    width: 320px;
    height: 465px;

    .list_box {
      margin-bottom: 33px;
      border-radius: 12px;
      overflow: hidden;

      .list_item {
        display: flex;
        align-items: center;
        padding: 8px;
        width: 320px;
        height: 88px;
        font-size: 30px;
        font-family: "庞门正道标题体";
        color: #c4ddff;
        cursor: pointer;
        border: 4px solid transparent;
        border-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.3)
          )
          1;
        background-origin: border-box;

        .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 24px;
          margin-right: 20px;
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: 2px solid #c4ddff;

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

      .active {
        color: #00dbff;
        background-image: linear-gradient(
          to right,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.3)
        );
      }
    }
  }
}
</style>
