<template>
  <div class="archives-box" v-if="name && name !== ''">
    <div class="archives-box-main" :style="{ 'width': width, 'height': height }">
      <!-- <span>{{ data }}</span>
			<span>{{ fileType(data) }}</span> -->

      <!-- S 图片查看 -->
      <img v-if="fileType(name) === 'image'" class="archives-box-img" :style="{ 'object-fit': objectFit }" :src="url" :key="url" @click="clickImg" />
      <!-- E 图片查看 -->

      <!-- S 文件查看 -->
      <img v-else-if="fileType(name) === 'pdf'" class="archives-box-img" src="@/assets/images/PDF.png" @click="clickFile" />
      <img v-else-if="fileType(name) === 'word'" class="archives-box-img" src="@/assets/images/word.png" @click="clickFile" />
      <img v-else-if="fileType(name) === 'excel'" class="archives-box-img" src="@/assets/images/EXCEL.png" @click="clickFile" />
      <img v-else class="archives-box-img" src="@/assets/images/other.png" @click="clickFile" />
      <!-- E 文件查看 -->

      <div class="archives-btn-main" v-if="isEdit || showSee">
        <div class="archives-btn-box">
          <el-space>
            <template v-if="showSee">
              <el-icon v-if="fileType(name) === 'image'" class="archives-icon" @click="clickShowImg"><View /></el-icon>
              <a :href="url" v-else target="_blank"
                ><el-icon class="archives-icon"><View /></el-icon
              ></a>
            </template>
            <el-icon class="archives-icon" v-if="isEdit" @click="$emit('delete')"><Delete /></el-icon>
          </el-space>
        </div>
      </div>

      <div class="file-name">
        <span v-if="fileName != ''">{{ fileName }}</span>
        <span v-else>{{ name }}</span>
        <!-- <p>1845020017257201665.pdf</p> -->
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<script setup lang="ts" name="FileOrImage">
import { fileType } from '../../utils/index';
import { getFile } from '@/api/filemanage';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  data: {
    type: String || Object,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  },
  objectFit: {
    type: String,
    default: 'cover'
  },
  dataList: {
    type: Array,
    default: () => []
  },
  clickSee: {
    // 点击查看
    type: Boolean,
    default: false
  },
  showSee: {
    // 鼠标移入查看或删除
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  isEdit: {
    // 是否只是编辑
    type: Boolean,
    default: false
  }
});
const name = ref('');
const url = ref('');
const getFiles = async () => {
  let res = await getFile(props.data);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  return res.data[0];
};
watch(
  () => props.data,
  async (val) => {
    if (!val) {
      name.value = '';
      url.value = '';
      return
    }
    if (val.includes('http')) {
      name.value = val.slice(val.lastIndexOf('/') + 1);
      url.value = val;
    } else {
      let file = await getFiles(val);
      name.value = file.originalName;
      url.value = file.url;
    }
  },
  {
    deep: true,
    immediate: true
  }
);
// 点击文件
const clickFile = () => {
  if (!props.clickSee) return;
  window.open(url.value, '_blank');
};
// 点击图片
const clickImg = () => {
  if (!props.clickSee) return;
  clickShowImg();
};
const clickShowImg = () => {
  if (props.dataList?.length == 0) {
    proxy?.$viewerApi({
      images: [name.value]
    });
    return;
  }
  const fileList = [];
  props.dataList.map((item) => {
    if (fileType(name.value) === 'image') {
      fileList.push(item);
    }
  });
  const index = fileList.findIndex((item) => item === name.value);
  proxy?.$viewerApi({
    options: {
      initialViewIndex: index
    },
    images: fileList
  });
};
</script>

<style lang="scss" scoped>
.archives-box {
  width: 15vh;
  position: relative;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
  margin-left: 1vw;
  line-height: 20px;
  height: 18vh;

  .archives-box-main {
    border: 1px solid #eee;
    background-color: #f5f6fa;
    position: relative;
  }
  .archives-box-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }
  .archives-btn-main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    opacity: 0;
    transform: scale(0);
    .archives-btn-box {
      .archives-icon {
        cursor: pointer;
        font-size: 20px;
        color: #fff;
      }
    }
  }
  &:hover {
    .archives-btn-main {
      opacity: 1;
      transform: scale(1);
    }
  }
  .archives-title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
  }
}
.file-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
  font-size: 10px;
  span {
    text-wrap: wrap;
  }
}
</style>
