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

const typeLabel = computed(() => (type) => {
  switch (type) {
    case "long":
      return "常设展览";
    case "topic":
      return "专题展览";
    case "temp":
      return "临时展览";
  }
});

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);
  }
};
const pureText = computed(() => (content) => {
  var temp = document.createElement("div");
  temp.innerHTML = content;
  const text = temp.textContent || temp.innerText || "";
  return text.length > 160 ? text.substring(0, 160) + "..." : text;
});
</script>

<style lang="scss" scoped>
.n-card.exhibition-box {
  --n-title-font-weight: 600;
  --n-title-font-size: 1.75rem;
  --n-padding-top: 1rem;
  --n-padding-bottom: 1.25rem;
  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: 13.4375rem;
      width: 22.6875rem;
      background: #595959;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
      }
    }
    .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: 80px;
        overflow: hidden;
      }
      .label-box {
        display: inline-flex;
        height: 40px;
        align-items: center;
        gap: 0 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;
          max-width: 200px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}
</style>

