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

    <!-- 点位总计区域 -->
    <div class="center_num">
      <div class="num_title">{{ currentValue }}点位总计（个）</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 class="center_serach" v-if="currentValue === '民宿'">
      <el-input
        style="height: 100%"
        placeholder="请输入民宿名称"
        :suffix-icon="Search"
        v-model="serachValue"
      >
      </el-input>
    </div>
  </div>

  <!-- 民宿列表弹窗区域 -->
  <Transition name="fade">
    <HotelListDialog
      v-if="showHotelList"
      :currentTown="currentTown"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 厕所弹窗区域 -->
  <Transition name="fade">
    <ToiletDetailDialog
      v-if="showToilet"
      :currentToilet="currentToilet"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 停车场弹窗区域 -->
  <Transition name="fade">
    <ParkingDetailDialog
      v-if="showParking"
      :currentParking="currentParking"
      @closeDialog="closeDialog"
    />
  </Transition>

  <!-- 加油站弹窗区域 -->
  <Transition name="fade">
    <PetrolDetailDialog
      v-if="showPetrol"
      :currentPetrol="currentPetrol"
      @closeDialog="closeDialog"
    />
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import Map from "@/components/map/map.vue";
import HotelListDialog from "./hotelListDialog.vue";
import ToiletDetailDialog from "./toiletDetailDialog.vue";
import ParkingDetailDialog from "./parkingDetailDialog.vue";
import PetrolDetailDialog from "./petrolDetailDialog.vue";
import { Search } from "@element-plus/icons-vue";
import img from "@/assets/images/49.png";
import img2 from "@/assets/images/50.png";
import img3 from "@/assets/images/51.png";
import img4 from "@/assets/images/52.png";
import { countUpNum } from "@/utils/countUpNum.ts";

// 点位总计数据
const pointCount = ref<number>(11);
const pointList = ref<string[]>([]);
const pointListDom = ref();
// 切换列表数据
const list = ref([
  {
    title: "民宿",
    url: img,
  },
  {
    title: "厕所",
    url: img2,
  },
  {
    title: "停车场",
    url: img3,
  },
  {
    title: "加油站",
    url: img4,
  },
]);
// 当前激活索引
const currentIndex = ref(0);
// 当前展示类型
const currentValue = ref("民宿");
// 当前乡镇
const currentTown = ref("");
// 当前厕所
const currentToilet = ref("");
// 当前停车场
const currentParking = ref("");
// 当前加油站
const currentPetrol = ref("");
// 搜索框绑定数据
const serachValue = ref("");

// 民宿列表弹窗显示隐藏控制
const showHotelList = ref<boolean>(false);

// 厕所弹窗显示隐藏控制
const showToilet = ref<boolean>(false);

// 停车场弹窗显示隐藏控制
const showParking = ref<boolean>(false);

// 加油站弹窗显示隐藏控制
const showPetrol = ref<boolean>(false);

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 = 11;
  } else if (item.title === "厕所") {
    pointCount.value = 11;
  } else if (item.title === "停车场") {
    pointCount.value = 12;
  } else if (item.title === "加油站") {
    pointCount.value = 11;
  }
  init();
};
// 自定义事件
const clickMarker = (title: string, type: string) => {
  console.log(title, type);
  if (type === "民宿") {
    // console.log("民宿弹窗");
    currentTown.value = title;
    showHotelList.value = true;
  } else if (type === "厕所") {
    // console.log("厕所弹窗");
    currentToilet.value = title;
    showToilet.value = true;
  } else if (type === "停车场") {
    // console.log("停车场弹窗");
    currentParking.value = title;
    showParking.value = true;
  } else if (type === "加油站") {
    // console.log("加油站弹窗");
    currentPetrol.value = title;
    showPetrol.value = true;
  }
};

const closeDialog = (data: boolean) => {
  showHotelList.value = data;
  showToilet.value = data;
  showParking.value = data;
  showPetrol.value = data;
};
</script>

<style lang="scss" scoped>
.center_server {
  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;
        width: 320px;
        height: 88px;
        font-size: 30px;
        font-family: "庞门正道标题体";
        color: #c4ddff;
        border-radius: 16px;
        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)
        );
      }
    }
  }

  .center_serach {
    position: absolute;
    top: 150px;
    right: 0;
    width: 652px;
    height: 75px;
    border-radius: 5px;
    border: 2px solid #cccccc;
    background-color: rgba(36, 98, 125, 0.2);

    ::v-deep(.el-input__wrapper) {
      padding: 0 30px;
      font-size: 30px;
      box-shadow: none;
      background-color: transparent;

      .el-input__inner {
        color: #fff;
      }
    }
  }
}
</style>
