<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-mock',
      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>
