<template>
  <div class="show-case-container">
    <div class="tools">
      <n-space class="group-type">
        <n-button type="primary" round>模型</n-button>
        <n-button type="primary" round>视频</n-button>
        <n-button type="primary" round>图片</n-button>
      </n-space>
      <div class="actions">
        <div>
          <img src="/img/zoom-in.png" />
          <img src="/img/zoom-out.png" />
          <img src="/img/reload.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const type = ref();

defineOptions({
  name: "show-case",
});

const props = defineProps({
  model: {
    type: String,
    default: () => "",
  },
  video: {
    type: String,
    default: () => "",
  },
  audio: {
    type: String,
    default: () => "",
  },
  photos: {
    type: Array,
    default: () => [""],
  },
});
</script>

<style>
.show-case-container {
  --show-case-width: 66.8125rem;
  --show-case-height: 34.1875rem;
  --show-case-background: #c1b2b2;
  --show-case-tools-padding: 1rem;
}
</style>

<style lang="scss" scoped>
.show-case-container {
  width: var(--show-case-width);
  height: var(--show-case-height);
  position: relative;
  background-color: var(--show-case-background);

  .tools {
    display: inline-flex;
    position: absolute;
    bottom: 1.25rem;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - var(--show-case-tools-padding) * 2);
    padding: 0 var(--show-case-tools-padding);
    .group-type,
    .actions {
      img {
        height: 2.5rem;
        width: auto;
        margin: 0 0.3125rem;
        cursor: pointer;
      }
    }
    .group-type {
    }
  }
}
</style>
