<template>
  <div class="home">
    <!-- 左上角的 logo + 系统标题 -->
    <PHeader title-pre="雄安智慧交通" style="z-index: 99">
      <template #pre>
        <div class="other">
          <Icon :size="14" icon="svg-icon:cd" />
          <span>数据存储</span>
        </div>

        <div class="other">
          <Icon :size="14" icon="svg-icon:cd" />
          <span>数据导出</span>
        </div>
      </template>
    </PHeader>
    <div class="content">
      <Left @updateData="handleUpdateData" />
      <div class="map-content">
        <div v-show="showa" class="data" :style="{ left: left - 327 + 'px', top: top - 286 + 'px' }">
          <div class="data-t">道路基本信息</div>
          <div class="data-v">
            <div class="item" style="width: 70%; margin-bottom: 12px">
              <div class="count">道路名称:海岳大街</div>
              <!-- <div class="name">道路名称:海岳大街</div> -->
            </div>
            <div class="item" style="width: 70%; margin-bottom: 12px">
              <div class="count">所在位置:道路东西方向贯穿起</div>
              <!-- <div class="name">道路名称:海岳大街</div> -->
            </div>
            <div class="item" style="width: 70%; margin-bottom: 12px">
              <div class="count">道路长度:14.7公里</div>
              <!-- <div class="name">道路名称:海岳大街</div> -->
            </div>
            <div class="item" style="width: 70%; margin-bottom: 12px">
              <div class="count">道路宽度:44米</div>
              <!-- <div class="name">道路名称:海岳大街</div> -->
            </div>
            <div class="item" style="width: 70%; margin-bottom: 12px">
              <div class="count">道路设计:双向6车道，速度60</div>
              <!-- <div class="name">道路名称:海岳大街</div> -->
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 100%;position: relative;">
          <div>
            <canvas
              v-show="showa"
              ref="mapCanvas"
              width="800"
              height="600"
              @click="handleCanvasClick"
              style="margin-top: 150px;margin-left: 80px;"
            ></canvas>
            <img
              v-show="show"
              src="@/assets/imgs/ditua.png"
              alt
              style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
            />
            <img
              v-show="showb"
              src="@/assets/imgs/yx.png"
              alt
              style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
            />
            <img
              v-show="showd"
              src="@/assets/imgs/lh.png"
              alt
              style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
            />
            <img
              v-show="showc"
              src="@/assets/imgs/snl.png"
              alt
              style="width: 800px;height:600px;margin-top: 150px;margin-left: 80px;"
            />
            <!-- 使用 Element Plus 的 Dialog -->
            <el-dialog v-model="showDialog" title="桩号信息" :width="dialogWidth" @close="closeDialog">
              <p>起点桩号: 35.580</p>
              <p>距离道路终点: 20KM</p>
              <!-- <p>起点桩号: 35.580</p> -->
              <!-- <template #footer>
                <el-button @click="closeDialog">Close</el-button>
              </template>-->
            </el-dialog>
          </div>
          <!-- <img
            v-if="!show"
            src="@/assets/imgs/ditua.png"
            alt
            style="width: 86%;height: 60%;margin-top: 150px;margin-left: 80px;"
          />-->

          <div class="other2" v-if="showe==true">
            <!-- <Icon :size="14" icon="svg-icon:cd" /> -->
            <span @click="lh()">绿化</span>
          </div>
          <div class="other1" @click="showa = false;showb = false;showe = false;showc = false;showd = false;show=true" v-if="show==false">
            <!-- <Icon :size="14" icon="svg-icon:cd" /> -->
            <span>返回</span>
          </div>
        </div>
        <div></div>
      </div>
      <!-- <Right @updateData="handleUpdateData" /> -->
    </div>
  </div>
</template>
<script setup>
import PHeader from "./components/PHeader/index.vue";
import Left from "./components/Left.vue";
// import Right from "./components/Right.vue";
import amg from "@/assets/imgs/hy.png";

// import { ref } from "vue";

const show = ref(true);
const showa = ref(false);
const showb = ref(false);
const showc = ref(false);
const showd = ref(false);
const showe = ref(false);
const lh = () => {
  showe.value = true;
  showa.value = !showa.value;
  showb.value = false;
  showc.value = false;
  showd.value = !showd.value;
}
const handleUpdateData = data => {
  if(data == "海岳大街") {
    showa.value = true;
    showe.value = true;
    show.value = false;
    showb.value = false;
    showc.value = false;
    showd.value = false;
  }else if(data == "雄县") {
    show.value = false;
    showa.value = false;
    showb.value = true;
    showc.value = false;
    showd.value = false;
    showe.value = false;
  }else if(data == "水泥路") {
    show.value = false;
    showa.value = false;
    showb.value = false;
    showc.value = true;
    showd.value = false;
    showe.value = false;
  }else if(data == "2024") {
    show.value = false;
    showa.value = false;
    showb.value = false;
    showc.value = true;
    showd.value = false;
    showe.value = false;
  }else if(data == "2025") {
    show.value = true;
    showa.value = false;
    showb.value = false;
    showc.value = false;
    showd.value = false;
    showe.value = false;
  }
  
};
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

const mapCanvas = ref(null);
const showDialog = ref(false);
const clickedPoint = ref({ x: null, y: null });

const dialogWidth = "20%"; // 设置对话框宽度
const points = [
  { x: 120, y: 460 },
  { x: 606, y: 442 }
];
onMounted(() => {
  const canvas = mapCanvas.value;
  const ctx = canvas.getContext("2d");

  // 绘制背景图片
  const image = new Image();
  image.src = amg;
  image.onload = () => {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // 绘制标记点
    points.forEach(point => {
      ctx.beginPath();
      ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    });
  };
});

// Handle canvas click and check if a point was clicked
const handleCanvasClick = event => {
  const canvas = mapCanvas.value;
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(x, y, ":::::::");

  // Check if the click is near any point
  let clicked = false;
  points.forEach(point => {
    const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
    if (distance < 10) {
      // threshold distance to register click
      clickedPoint.value = point;
      showDialog.value = true;
      clicked = true;
    }
  });

  if (!clicked) {
    ElMessage.warning("请正确选择标记点");
  }
};

// Close dialog
const closeDialog = () => {
  showDialog.value = false;
};
// const leftRef = ref()
// onMounted(() => {
//   // year.value = String(new Date().getFullYear())
//   // search()
// })
</script>
<style scoped lang="scss">
canvas {
  border: 1px solid #ccc;
  cursor: pointer;
}
.home {
  height: 1000px;
  width: 100%;

  background: linear-gradient(90deg, #0a1117 0%, #021419 51%, #0a1117 100%);
  .content {
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #0a1117 0%, #021419 51%, #0a1117 100%);
    // box-sizing: border-box;
    padding-top: 90px;
    .map-content {
      height: 100%;
      width: 40%;
      margin: 0 auto;
      .data {
        // opacity: 0;
        position: absolute;
        padding: 17px 12px 15px 12px;
        width: 357px;
        height: 286px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #0b6d74 0%, #052a49 100%);
        backdrop-filter: blur(3px);
        background-image: url("@/assets/imgs/tool-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // transform: scaleY(0);
        transition: 0.5s;
        z-index: 99;
        &-t {
          font-family: JiangChengXieHei;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
        }

        &-v {
          // display: flex;
          // flex-wrap: wrap;
          margin-top: 46px;
          text-align: left;

          .item {
            .count {
              font-family: Bebas;
              font-size: 16px;
              color: #ffffff;
              text-align: left;
              margin-left: 16px;
            }

            .name {
              font-weight: 400;
              font-size: 12px;
              color: rgba(241, 246, 255, 0.8);
              text-align: left;
            }
          }
        }
      }
      // position: absolu
    }
  }
}
:deep(.el-input-group__prepend) {
  color:#ffffff;
  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
}
.other {
  height: 26px;
  box-sizing: border-box;
  padding: 0 12px 0 12px;
  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
  border-radius: 4px;
  margin-right: 9px;
  font-size: 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  :deep(.v-icon) {
    margin-right: 5px;
  }
}
.other1 {
  position: absolute;
  right: -40px;
  top: 100px;
  height: 26px;
  line-height: 26px;
  width: 70px;
  box-sizing: border-box;
  padding: 0 12px 0 12px;
  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
  border-radius: 4px;
  // margin-right: 9px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  cursor: pointer;
  :deep(.v-icon) {
    margin-right: 5px;
  }
}
.other2 {
  position: absolute;
  right: 50px;
  top: 100px;
  height: 26px;
  line-height: 26px;
  width: 70px;
  box-sizing: border-box;
  padding: 0 12px 0 12px;
  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
  border-radius: 4px;
  // margin-right: 9px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  cursor: pointer;
  :deep(.v-icon) {
    margin-right: 5px;
  }
}
</style>
