<template>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">{{ name }}</h2>
      <p>单位类型: {{ type.label }}</p>
      <p>详细地址: {{ address }}</p>
      <p>联系人: {{ contactPersonInfo.name }}/{{ contactPersonInfo.telephone }}</p>
      <p class="card-text">备注: {{ remark }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {EnterprisesUnit} from "@/types/views/data/dataOverview.ts";

defineProps<EnterprisesUnit>()

</script>

<style scoped lang="scss">
.card {
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  overflow: hidden;
  background-color: white;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-title {
  margin-bottom: 10px;
  font-size: 18px;
}

.card-text {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}

.card-button {
  display: inline-block;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #007BFF;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.card-button:hover {
  background-color: #0056b3;
}
</style>
