<template>
    <div class="tooltip-wrap" @click.stop="jump(item)">
        <div class="city">{{item.tenantName}}</div>
        <div class="info">案件金额：{{item.commissionAmount}}</div>
        <div class="info">案件数：{{item.caseNum}}</div>
        <div class="info">案件人数：{{item.borrowNum}}</div>
    </div>
</template>
<script setup >
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
    item: [Object]
});
const jump = (item) => {
    const url = router.resolve({
        path: '/data-screen',
        query: { tenantId: item.tenantId },
    });
    // 打开新窗口
    window.open(url.href);
}
</script>
<style lang="scss" scoped>
.tooltip-wrap {
    position: absolute;
    z-index: 99999;
    width: 200px;
    cursor: pointer;
    height: 100px;
    background: #6a31eb;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: white;
    padding: 5px;
    transition: transform 0.3s;
    &:hover{
        transform: scale(1.05);
    }
    .city {
        font-size: 14px;
        font-weight: bold;
        color: #fff; /* 突出城市的颜色 */
    }
    .info {
            font-size: 14px;
            margin-top: 2px;
        }
}
</style>