<template>
    <div class="macl-map-view">
        <!-- @mousewheel.self="zoom" @mousedown.self="mousedown"  -->
        <div class="macl-mapbg">
            <div @click="ectCheck('CQ')" class="checked cq">
                <div class="ripple"></div>
                <div class="label">重庆</div>
            </div>

            <div @click="ectCheck('AH')" class="checked ah">
                <div class="ripple"></div>
                <div class="label">安徽</div>
                <div class="tip">开通建设中</div>
            </div>
            <div @click="ectCheck('GZ')" class="checked gz">
                <div class="ripple"></div>
                <div class="label">贵州</div>
                <!-- <div class="tip">开通建设中</div> -->
            </div>
            <div @click="ectCheck('SC')" class="checked sc">
                <div class="ripple"></div>
                <div class="label">四川</div>
            </div>
            <div @click="ectCheck('YN')" class="checked yn">
                <div class="ripple"></div>
                <div class="label">云南</div>
            </div>
            <!-- <div @click="ectCheck('XJ')" class="checked xj">
        <div class="ripple"></div>
        <div class="label">新疆</div>
        <div class="tip">开通建设中</div>
      </div> -->
            <div @click="ectCheck('HN')" class="checked hn">
                <div class="ripple"></div>
                <div class="label">湖南</div>
                <div class="tip">开通建设中</div>
            </div>
            <!-- <div @click="ectCheck('JX')" class="checked jx">
        <div class="ripple"></div>
        <div class="label">江西</div>
        <div class="tip">开通建设中</div>
      </div>
      <div @click="ectCheck('HB')" class="checked hb">
        <div class="ripple"></div>
        <div class="label">河北</div>
        <div class="tip">开通建设中</div>
      </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, ref } from "vue";
import { useRouter } from "vue-router";

//获取元素
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
const mousedown = function (e: any) {
    var dv = e.target; //获取目标元素
    //获取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    //获取左部和顶部的偏移量
    l = dv.style.left ? parseInt(dv.style.left) : 0;
    t = dv.style.top ? parseInt(dv.style.top) : 0;
    //开关打开
    isDown = true;
    //设置样式
    dv.style.cursor = "move";
    //鼠标移动
    document.onmousemove = function (e: any) {
        if (isDown == false) {
            undefined;
            return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);

        dv.style.left = nl + "px";
        dv.style.top = nt + "px";
    };
    //鼠标抬起事件
    document.onmouseup = function (e: any) {
        //开关关闭
        isDown = false;
        dv.style.cursor = "default";
    };
};
const zoom = (e: any) => {
    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
    let target = e.target;
    let zoom = parseInt(target.style.zoom) || 100;
    zoom -= e.deltaY / 10;
    /* 最小范围 和 最大范围 的图片缩放尺度 */
    // if (zoom >= 50 && zoom < 500) {
    e.target.style.zoom = zoom + "%";
    // }
    return false;
};
const emit = defineEmits();
// 已开通的路段
const ktRoad = ["CQ", "SC", "YN", "GZ"];
const ectCheck = (e: any) => {
    // if (e.seriesName === '运行概况') {
    // router.push("/operationOverview");
    // }
    // 已开通的路段才跳转地图
    if (ktRoad.includes(e)) {
        emit("provinceClick", e, "1");
    }
};

const router = useRouter();
const props = defineProps({
    position: {
        type: String,
    },
});
const diyStyle = computed(() => {
    let diyStyle = {};
    switch (props.position) {
        case "right":
            diyStyle = { justifyContent: "flex-end" };
            break;
        case "center":
        default:
            diyStyle = { justifyContent: "center" };
            break;
    }
    return diyStyle;
});
</script>

<style lang="postcss" scoped>
.checked {
    position: absolute;
    display: flex;
    cursor: pointer;

    &.cq {
        right: 266px;
        bottom: 130px;
    }

    &.ah {
        right: 173px;
        bottom: 153px;
    }

    &.gz {
        right: 270px;
        bottom: 102px;
    }

    &.sc {
        right: 310px;
        bottom: 140px;
    }

    &.yn {
        right: 328px;
        bottom: 77px;
    }

    &.xj {
        right: 360px;
        bottom: 245px;
    }

    &.hn {
        right: 224px;
        bottom: 109px;
    }

    &.jx {
        right: 140px;
        bottom: 95px;
    }

    &.hb {
        right: 155px;
        bottom: 190px;
    }

    &:hover .tip {
        transform: scale(0.8);
    }
}

.tip {
    position: absolute;
    right: -50px;
    z-index: 2;
    padding: 2px 4px;
    font-size: 12px;
    background: rgba(6, 19, 46, 0.5);
    transition: 0.5s;
    transform: scale(0);
}

.label {
    position: relative;
    top: -4px;
    /* margin-left: 5px; */
    color: antiquewhite;
    /* color: red; */
    font-size: 12px;
    tranform: scale(0.1);
}

/* 涟漪效果 */
.ripple {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: rgba(255, 154, 0, 1);
    border-radius: 50%;
    display: inline-block;
}

.ripple::before {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    animation: rippleDot 1.5s ease-out 0s infinite;
    background-color: rgba(108, 181, 82, 0.5);
}

.macl-map-view {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 10px;
    display: flex;
    align-items: center;
}

.malc-box {
    width: 50%;
    /* margin-top: 30px; */
    position: absolute;
    /* left: 2%; */
    top: 0;
}

.mdhead {
    font-size: 13px;
    font-weight: bold;
    font-style: oblique;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.macl-outbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.mdlc-cont {
    width: 100%;
    margin-bottom: 7px;
}

.malc-tit {
    font-size: 14px;
    padding-left: 10px;
}

.malc-left {
    width: 5px;
    height: 12px;
    background: #ff9a00;
    margin-right: 5px;
}

.malc-center {
    width: 50%;
    height: 12px;
    padding: 3px;
    /* border: 1px solid red; */
    border: 1px solid rgba(174, 146, 107, 0.35);
    background: rgba(255, 154, 0, 0.1);
}

.malc-center-in {
    height: 4px;
    background: #ff9a00;
    background: linear-gradient(to right, transparent, rgba(255, 154, 0, 1));
    width: 100%;
}

.malc-left2 {
    background: #0084fb;
    margin-right: 5px;
}

.malc-center2 {
    /* border: 1px solid red; */
    border: 1px solid rgba(0, 132, 251, 0.25);
    background: rgba(0, 132, 251, 0.1);
}

.malc-center-in2 {
    background: linear-gradient(to right, transparent, rgba(0, 132, 251, 1));
}

.macl-rig {
    font-size: 16px;
    margin-left: 10px;
}

.macl-mapbg {
    position: relative;
    width: 600px;
    height: 420px;
    margin: auto;
    background: url("@/assets/images/common/mapbg-1.png");
    background-size: 100% 100%;
    zoom: 150%;

    &:after {
        content: "";
        position: absolute;
    }
}
</style>
