<script setup lang="ts">
const props = defineProps({
  item: {
    type: Object,
    require: true
  }
})

let isShowType = ref(1)
// 判断用什么标签展示内容
if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt') !== -1) {
  isShowType.value = 2
} else if (props.item?.url?.indexOf('.mp4') !== -1) {
  isShowType.value = 3
} else if (props.item?.url?.indexOf('.mp3') !== -1) {
  isShowType.value = 4
} else if (
  props.item?.url?.indexOf('.png') !== -1 ||
  props.item?.url?.indexOf('.jpg') !== -1 ||
  props.item?.url?.indexOf('.jpeg') !== -1
) {
  isShowType.value = 5
} else if (props.item?.url?.indexOf('.rar') !== -1 || props.item?.url?.indexOf('.zip') !== -1) {
  isShowType.value = 6
}
</script>

<template>
  <el-card>
    <div class="max-w-h">
      <iframe
        id="iframe"
        v-if="isShowType === 1"
        :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
        >{{ item?.name }}</iframe
      >
      <embed :src="props.item?.url" v-else-if="isShowType === 2" />
      <video v-else-if="isShowType === 3" controls id="video">
        <source :src="props.item?.url" />
      </video>
      <audio v-else-if="isShowType === 4" :src="props.item?.url" controls></audio>
      <img v-else-if="isShowType === 5" :src="props.item?.url" />
      <div v-else-if="isShowType === 6" class="zip_con">
        <a :href="props.item?.url" style="color: #aa1941">
          <img v-if="props.item?.url?.indexOf('.rar') !== -1" src="/center_resource/rar.png" class="img_zip" />

          <img v-else-if="props.item?.url?.indexOf('.zip') !== -1" src="/center_resource/zip.png" class="img_zip" />
          {{ props.item?.name }}
        </a>

        <div class="zip_tips">* 该文件格式暂不支持预览,可点击上方文件名下载</div>
      </div>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.max-w-h {
  // max-width: 1200px;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  iframe,
  embed,
  video {
    width: 100%;
    height: 100%;
  }
  .zip_con {
    border: 1px solid #ccc;
    width: 100%;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .img_zip {
    width: 100px;
    height: 100px;
    margin: auto;
  }
  .zip_tips {
    font-size: 14px;
    margin-top: 10px;
  }
  img {
    width: 100%;
    display: block;
  }
}
</style>
