<template>
  <div class="upload-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <template v-if="data.file_list.length > 0">
        <template
          v-if="
            data.file_list[0].file_name.indexOf('png') !== -1 ||
            data.file_list[0].file_name.indexOf('jpg') !== -1 ||
            data.file_list[0].file_name.indexOf('jpeg') !== -1
          "
        >
          <el-image
            style="width: 100%; height: 260px"
            :src="data.file_list[0].file_url"
            :fit="'contain'"
            :preview-src-list="[data.file_list[0].file_url]"
          >
          </el-image>
        </template>
        <template v-else-if="data.file_list[0].file_name.indexOf('pdf') !== -1">
          <iframe :src="data.file_list[0].newpath" id="ifm" width="100%" height="260px" frameborder="0"></iframe>
        </template>
        <div class="uploadBtn" @click="downLoad" v-if="isEnable(data.is_enable_download)">
          <img style="width: 24px; height: 24px" src="@/assets/download.png" alt="" />
          下载
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import { getConfig } from '@/utils/auth';
import { GetFileURLMap } from '@/api/app';
const Base64 = require('js-base64').Base64;
import { getToken } from '@/utils/auth';

import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview';

export default {
  name: 'UploadControlPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getUploadPreviewData(),
      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
    };
  },
  watch: {
    'data.file_list': {
      handler(val) {
        if (val.length > 0) {
          this.handleData();
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 处理数据
    handleData() {
      this.data.file_list.forEach((item) => {
        GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
          this.$set(
            item,
            'newpath',
            `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(url_map[item.file_id]),
          );
        });
      });
    },
    //   下载表格
    downLoad() {
      let userInfor = getToken();
      let UserCode = '',
        UserType = '',
        SessionID = '';
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      let FileID = this.data.file_list[0].file_id;
      let data = {
        SessionID,
        UserCode,
        UserType,
        FileID,
      };
      location.href =
        process.env.VUE_APP_BASE_API +
        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.upload-preview {
  @include preview-base;
}

.uploadBtn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 39px;
  margin-top: 8px;
  font-size: 16px;
  line-height: 150%;
  color: #000;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 10%);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);

  img {
    margin-right: 13px;
  }
}
</style>
