<template>
  <transition name="el-fade-in-linear">
    <div class="syn_modal" v-if="dialogVisible">
      <div class="syn_dialog">
        <div class="syn_dialog_header">
          <span class="syn_dialog_header_title">{{title}}</span>
          <span style="display:inline-block;width:60px">
            <img class="icon" src="./download.svg" title="下载到本地" @click="handleDownLoad" alt="" srcset="">
            <img class="icon" src="./close.svg" title="关闭窗口" @click="handleClose" alt="" srcset="">
          </span>

        </div>
        <div class="syn_dialog_body">

          <!-- 图片 -->
          <img :src="url" style="width: 100%; height: 100%;object-fit:contain;" v-if="fileType==='image'" alt="图片加载失败" />
          <!-- <el-image style="width: 100%; height: 100%;display:inline-block;" :src="url" fit="contain" v-if="fileType==='image'">
            <template #error>
              <div class="image-slot">
                <i class="el-icon-picture-outline" style="font-size:200px;margin-bottom: 10px;"></i>
                <span>加载失败</span>
              </div>
            </template>
          </el-image> -->

          <!-- 视频 -->
          <div style="width: 100%; height: 100%" v-if="fileType==='video'">
            <video :src="url" style="width: 100%; height: 100%" controls @error="errFun" v-if="!videoError"></video>
            <div class="errorTips" v-if="videoError">视频播放失败</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script setup>
import { ref, computed } from 'vue';

const url = ref('');
const videoError = ref(false);

const dialogVisible = computed(() => {
  if (url.value) {
    return true;
  }
  return false;
});

const title = computed(() => {
  if (url.value) {
    return url.value.split('/')[url.value.split('/').length - 1];
  }
  return '媒体文件查看';
});

const fileType = computed(() => {
  if (url.value) {
    const imageStuffList = ['png', 'bmp', 'jpg', 'jpeg', 'gif', 'webp'];
    const videoStuffList = ['wmv', 'rmvb', '3gp', 'mov', 'mp4', 'm4v', 'avi', 'mkv'];
    const stuff = url.value.split('.')[url.value.split('.').length - 1];
    if (imageStuffList.includes(stuff.toLowerCase())) {
      return 'image';
    }
    if (videoStuffList.includes(stuff.toLowerCase())) {
      return 'video';
    }
    return 'unknow';
  }
  return 'image';
});

// 视频播放失败
const errFun = () => {
  videoError.value = true;
};

const handleClose = () => {
  url.value = '';
};

const handleDownLoad = () => {
  const a = document.createElement('a');
  a.href = url.value;
  a.download = title.value;
  document.body.appendChild(a);
  a.click(); // 点击下载
  document.body.removeChild(a); // 下载完成移除元素
};

defineExpose({
  url
});
</script>
<style lang="stylus" scoped>
.syn_modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100000;
}
.syn_dialog {
  display inline-block;
  width: 70%;
  height: 500px;
  background: #ffffff;
  position: absolute;
  left: 10%;
  top: calc(50% - 250px);
  z-index: 100001;
  border-radius 20px;
  .syn_dialog_header {
    padding: 0 20px;
    height 50px;
    border-bottom 1px solid #ccc;
    display flex;
    justify-content space-between;
    align-items center;
    box-sizing border-box;
    .syn_dialog_header_title {
      flex: 1;
      font-size 16px;
      font-weight 700;
      cursor default;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      width: 20px;
      height: 20px;
      cursor pointer;
      margin-left: 10px;
      filter: invert(1);
    }
  }
  .syn_dialog_body {
    width: 100%;
    height calc(100% - 50px)
    padding: 20px;
    box-sizing border-box;
    :deep(.image-slot) {
      width: 100%;
      height: 100%;
      display flex;
      flex-direction column;
      align-items center;
      justify-content center
      font-size 16px;
      color: #333;
    }
  }
}
.errorTips {
  width: 100%;
  height: 50px;
  line-height 50px;
  position: absolute;
  top: calc(50% - 25px);
  text-align center;
  color #024eac;
  font-weight 700;
  font-size 20px;
  background: linear-gradient(to left, transparent, #c0c0c0, transparent)
}
</style>
