<script setup lang="ts">
import {ref} from "vue";
import InnerViewer from './components/InnerViewer.vue'
import IframeViewer from "./components/IframeViewer.vue";
import excel from '@/assets/excel.xlsx?url'
import pdf1 from '@/assets/666.pdf?url'
import pdf2 from '@/assets/888.pdf?url'


// 预览的url
const url = ref<string>(excel);
// 提供inner和embedded
const mode = ref<string>('inner');
</script>

<template>
  <header>
    <div class="tool-bar">
      <div>
        <h3>选择预览模式</h3>
        <input type="radio" name="mode" value="inner" v-model="mode" />内置访问
        <input type="radio" name="mode" value="embedded" v-model="mode" />iframe访问
      </div>
      <div>
        <h3>选择文档</h3>
        <select v-model="url">
          <optgroup label="excel">
            <option :value="excel">常规excel</option>
          </optgroup>
          <optgroup label="pdf">
            <option :value="pdf1">复杂pdf</option>
            <option :value="pdf2">简单pdf</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="wrapper">
      <InnerViewer v-if="mode === 'inner'" :url="url" />
      <IframeViewer v-else-if="mode === 'embedded'" :url="url" />
    </div>
  </header>
</template>

<style scoped>
header {
    line-height: 1.5;
}

.tool-bar {
    background-color: hsla(160, 100%, 37%, 0.2);
    width: 230px;
    height: 100vh;
    padding-left: 8px;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        position: relative;
    }

    header .wrapper {
        flex: 1;
    }
}
</style>
