<template>
  <n-card class="exhibition-box" @click="handleTodetail">
    <div class="box">
      <img class="cover" :src="cover" />
      <div class="info">
        <div class="title">{{ title }}</div>
        <div class="content—box">{{ content }}</div>
        <div class="label-box">
          <div class="label location">{{ location }}</div>
          <div class="label type">{{ type }}</div>
          <div v-if="isHasVR" class="vr_button"></div>
        </div>
      </div>
    </div>
  </n-card>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

defineOptions({
  name: "exhibition-box",
});

const props = defineProps({
  id: {
    type: [String, Number],
    default: () => "",
  },
  title: {
    type: String,
    default: () => "",
  },
  cover: {
    type: String,
    default: () => "",
  },
  content: {
    type: String,
    default: () => "",
  },
  location: {
    type: String,
    default: () => "",
  },
  type: {
    type: String,
    default: () => "",
  },
  isHasVR: {
    type: [Boolean, undefined],
    default: () => undefined,
  },
});
const handleTodetail = () => {
  if (props.id) {
    console.log("router", router);
    router.push("/exhibition-detail/" + props.id);
    console.log("111", props.id);
  }
};
</script>

<style lang="scss" scoped>
.n-card.exhibition-box {
  --n-title-font-weight: 600 !important;
  --n-title-font-size: 1.75rem !important;
  --n-padding-top: 1rem !important;
  --n-padding-bottom: 1.25rem !important;
  border-radius: 1.875rem;
  // box-shadow: var(--main-box-shadow);
  cursor: pointer;
  background-color: transparent;
  background-image: var(--main-sub-list-bg);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  height: 15.75rem;
  overflow: hidden;
}
.exhibition-box {
  .box {
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: row;

    .cover {
      height: 215px;
      width: auto;
    }
    .info {
      flex: 1;
      padding-left: 50px;
      .title {
        font-size: 28px;
        font-weight: 700;
        padding: 8px 0 16px 0;
      }
      .content—box {
        font-size: 1rem;
        color: #6e6e6e;
        height: 100px;
        overflow: hidden;
      }
      .label-box {
        display: inline-flex;
        height: 40px;
        align-items: center;
        gap: 0 .625rem;
        width: 100%;
        color: #6e6e6e;
        font-size: 16px;
        .label {
          background-image: url("img/dot.png");
          background-size: 15px 15px;
          background-repeat: no-repeat;
          padding-left: 22px;
          background-position: center left;
        }
      }
    }
  }
}
</style>
