<template>
  <div :class="['ps-con',model].join(' ')">
    <template v-if="model=='page'">
      <div class="ps-page-con">
        <!-- <div  class="p-title-con">
          <div class="title" :title="winConfig.title"></div>
          <div class="btn-group">
            <a-button v-if="vhas" v-has="`${vhas}`" type="dashed" icon="download" @click="uploads(1)" style="margin: 0 5px">下载无水印</a-button>
            <a-button type="dashed" icon="download" @click="uploads" style="margin: 0 5px" >下 载</a-button >
          </div>
        </div> -->
        <div
          class="p-data-con">
          <component
            v-if="!showCarousel"
            :is="componentNameList[mark + '0']"
            :url="url"
            :value="url"
            :order="getKey(url)"
            :setEvent="setWatermarkFile"
            :isShowWatermark="isShowWatermark"
          ></component>

          <SwiperCon
            ref="previewShowcarousel"
            v-if="showCarousel"
            :onChange="onChange"
          >
            <div
              class="item-con swiper-slide"
              :key="'carousel-item-con-' + index"
              v-for="(item, index) in url"
            >
              <component
                :is="componentNameList[mark + index]"
                :url="item"
                :value="item"
                :setEvent="setWatermarkFile"
                :order="getKey(item) + index"
                :isShowWatermark="isShowWatermark"
              ></component>
            </div>
          </SwiperCon>
        </div>
      </div>
    </template>
    <template v-if="model=='modal'">
      <a-modal
        :dialogClass="madalClass"
        :visible="winConfig.visible"
        :width="winConfig.width"
        :confirm-loading="winConfig.loading"
        :zIndex="10000000"
        @ok="
          () => {
            modalEvent('ok');
          }
        "
        @cancel="
          () => {
            modalEvent('cancel');
          }
        "
        :footer="null"
      >
        <div slot="title" class="p-title-con">
          <div class="title" :title="winConfig.title">{{ winConfig.title }}</div>
          <div class="btn-group">
            <a-button v-if="vhas" v-has="`${vhas}`" type="dashed" icon="download" @click="uploads(1)" style="margin: 0 5px">下载无水印</a-button>
            <a-button type="dashed" icon="download" @click="uploads" style="margin: 0 5px" >下 载</a-button >
            <a-button type="dashed" @click="enlarge" style="margin: 0 5px">{{ enlargeLabel }}</a-button>
          </div>
        </div>
        <div
          class="p-data-con"
          id="p-data-con-id"
          :style="{ height: `calc(${winConfig.height} - 140px)` }"
        >
          <component
            v-if="!showCarousel"
            :is="componentNameList[mark + '0']"
            :url="url"
            :value="url"
            :isEnlarge="isEnlarge"
            :order="getKey(url)"
            :setEvent="setWatermarkFile"
            :isShowWatermark="isShowWatermark"
          ></component>

          <SwiperCon
            ref="previewShowcarousel"
            v-if="showCarousel"
            :onChange="onChange"
          >
            <div
              class="item-con swiper-slide"
              :key="'carousel-item-con-' + index"
              v-for="(item, index) in url"
            >
              <component
                :is="componentNameList[mark + index]"
                :url="item"
                :value="item"
                :isEnlarge="isEnlarge"
                :setEvent="setWatermarkFile"
                :order="getKey(item) + index"
                :isShowWatermark="isShowWatermark"
              ></component>
            </div>
          </SwiperCon>
        </div>
      </a-modal>
    </template>
  </div>
</template>

<script>
import { base64Img2Blob } from "../utils/Watermark.js";
import {addWatermark} from '../utils/addWatermark.js'
import { getCaptionFileName } from "../utils/util.js";
import SwiperCon from "../SwiperCon/index";
import * as IS from "../utils/is.js";
import DownLondBox from './component/downLondBox.vue'
import TextBox from './component/textBox.vue'
import PdfBox from './component/pdfBox.vue'
import IframeBox from './component/iframeBox.vue'
import ImgBox from './component/imgBox.vue'
import odfBox from './component/odfBox.vue'
import UUID from "../utils/uuid.js";

const getFileSuffix = (filePath) => {
  const res = { suffix: "", name: "" };
  let tempUrl = filePath
  if(filePath.indexOf('?')>=0){
    tempUrl = tempUrl.split('?')[0]
  }
  var startIndex = tempUrl.lastIndexOf(".");
  const name = tempUrl.match(/[^//]+$/)[0];
  res.name = name;
  if (startIndex != -1) {
    res.suffix = tempUrl.match(/[^.]+$/)[0];
  } // filePath.substring(startIndex + 1, filePath.length).toLowerCase();
  
  return res;
};
const downloadFile = (url,fileName) => {
  fetch(url)
    .then(response => response.blob())
    .then(data => {
       const fileURL = window.URL.createObjectURL(data); // 创建了一个URL，该URL表示了Blob对象的内容
       const link = document.createElement('a'); // 创建一个链接元素并设置其属性
       link.href = fileURL;
       link.download = fileName;
       link.click(); // 模拟点击下载链接
       window.URL.revokeObjectURL(fileURL); // 释放创建的URL对象
     })
     .catch(error => {
      // 处理错误
     });
}

 /**
   * PPreviewShow 附件展示组件 可展示 图片  文档 pdf odf 等   使用方法  <p-PreviewShow  :config="{}" :url="''"  :event="()=>{}"></p-PreviewShow>
   * 
   * @vue-prop {String} [model='modal'] - 当前组件以什么方式展示。默认值是：modal；   modal 表示弹框模式；page 表示页面嵌入模式； 
   * @vue-prop {String} vhas - 下载无水印按钮的权限控制码  用于控制无水印下载按钮的权限标识
   * @vue-prop {Object} config -  此参数必填 用于设置弹窗的 {title:'',visible: false, loading: false, width: '50vw',height: '60vh' }
   * @vue-prop {String|Array<String>} url -   用于显示的文件的地址；值可以是数组
   * @vue-prop {String|Array<String>} name -    此参数可选 文件名称; 值可以是数组,当值是数组时需要和url的顺序对应
   * @vue-prop {String|Array<String>} suffix -    此参数可选 文件后缀; 值可以是数组,当值是数组时需要和url的顺序对应
   * @vue-prop {Function} event -    此参数必填 执行的事件 关闭事件
   * @vue-prop {Boolean} [isShowWatermark=false] -   是否显示水印 默认：true  表示显示水印(下载时有水印)  false 表示不显示水印(下载时无水印)
   * @vue-prop {Boolean} [isBatchDownload=false] -    下载按钮是否是批量下载  默认：false  表示单个下载；  true 表示批量下载
   */
export default {
  name: "PPreviewShow",
  components: {
    imgBox:ImgBox,
    iframeBox:IframeBox,
    pdfBox:PdfBox,
    downLondBox:DownLondBox,
    textBox:TextBox,
    odfBox,
    SwiperCon,
  },
  props: {
    // modal  弹框模式    page 非弹框模式
    model:{type:String,default:()=>{return 'modal'}},
    vhas:{type:String},
    /**
     * 用于设置弹窗的
     * @prop {Object} config - 用于设置弹窗的  {title:'',visible: false, loading: false, width: '50vw',height: '60vh' }
     */
    config: { type: Object,required: true, }, // 用于设置弹窗的  {title:'',visible: false, loading: false, width: '50vw',height: '60vh' }
    url: { type: [String, Array],required: true, }, // 用于显示的文件的地址
    name: { type: [String, Array] }, // 文件名称
    suffix: { type: [String, Array] }, // 文件后缀
    event: { type: Function,required: true, }, // 执行的事件 关闭
    isShowWatermark:{type:Boolean, default:true}, // 是否显示水印 默认：true
    showHelp:{type:Boolean, default: () => { return false }},
    // 下载按钮是否是批量下载  默认：false  表示单个下载；  true 表示批量下载
    isBatchDownload:{type:Boolean, default: () => { return false }},
  },
  data() {
    return {
      isSingleFile: true,
      mark: "item",
      currentIndex: 0,
      componentConfig: {
        componentName: "",
      },
      componentNameList: {},
      // 是否启用多文件预览 false 表示单位件预览  true 表示多文件预览
      showCarousel: false,
      previewUrlList: [],
      madalClass: "",
      isEnlarge: false,
      enlargeLabel: "全 屏",
      winConfig: {
        title: "",
        visible: false,
        loading: false,
        width: "50vw",
        height: "60vh",
      },
      dataUrl: {},
      // 用于下载带有水印的文件
      downLoadWatermarkFile: null,
      fileName: {},
    };
  },

  watch: {
    config: {
      handler(val_) {
        const val = val_
        if (Object.prototype.toString.call(val) === "[object Object]") {
          this.winConfig = Object.assign(
            {},
            JSON.parse(JSON.stringify(this.winConfig)),
            JSON.parse(JSON.stringify(val))
          );
        }
      },
      deep: true,
      immediate: true,
    },
    url: {
      handler(val_) {
        const val = val_
        // console.log('2222222222222', val, this.suffix, this.name)
        if (IS.isEmpty(val)) {
          return false;
        }
        this.dataUrl = {};
        this.componentNameList = {};
        this.currentIndex = 0;
        let tempArr = [];
        if (IS.isArray(val)) {
          this.showCarousel = true;
          this.isSingleFile = false;
          tempArr = [...val];
        }
        if (IS.isString(val)) {
          this.isSingleFile = true; // true
          this.showCarousel = false;
          tempArr = [val];
        }

        tempArr.forEach((item, index) => {
          let tempUrl = item
          if(tempUrl.indexOf('?')>=0){
            tempUrl = tempUrl.split('?')[0]
          }
          this.dataHandling(tempUrl, this.mark + index, index);
        });
        this.$nextTick(() => {
          tempArr.length>1 && this.$refs.previewShowcarousel && this.$refs.previewShowcarousel.goTo && this.$refs.previewShowcarousel.goTo(this.currentIndex);
          this.setWinTitle();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted(){
      if(this.$isShowHelp == true &&this.showHelp === true){
        console.log(`
        组件名称：
            PPreviewShow
        使用方法：
            <p-PreviewShow  :config="{}" :url="''"  :event="()=>{}"></p-PreviewShow>
        props参数说明：
            props: {
              // 此参数必填 用于设置弹窗的  {title:'',visible: false, loading: false, width: '50vw',height: '60vh' }
              config: { type: Object },
              // 此参数必填 用于显示的文件的地址
              url: { type: [String, Array] },
              // 此参数可选 文件名称
              name: { type: [String, Array] },
              // 此参数可选 文件后缀
              suffix: { type: [String, Array] },
              // 此参数必填 执行的事件 关闭
              event: { type: Function },
              // 此参数可选 用于控制无水印下载按钮的权限标识
              vhas:{type:String},
              // 是否显示水印 默认：true  表示显示水印(下载时有水印)  false 表示不显示水印(下载时无水印)
              isShowWatermark:{type:Boolean, default:true},
              // 下载按钮是否是批量下载  默认：false  表示单个下载；  true 表示批量下载
              isBatchDownload:{type:Boolean, default: () => { return false }},
            },
        `);
      }
    },
  methods: {
    onChange(a) {
      // console.log(a)
      this.currentIndex = a;
      this.setWinTitle();
    },
    getKey(str){
      return  UUID('MDUUID',str+'')
    },
    setWinTitle() {
      let currentTitle = "";
      const key = this.mark + this.currentIndex;
      const currentUrl = this.dataUrl[key]
      if(!IS.isNullOrUnDef(currentUrl) && !IS.isEmpty(currentUrl)){
        if (IS.isArray(this.name)) {
          currentTitle =this.name[this.currentIndex] || getCaptionFileName(currentUrl);
        }
        if (IS.isString(this.name)) {
          currentTitle = this.name || getCaptionFileName(currentUrl);
        }
        if (IS.isNullOrUnDef(currentTitle) || IS.isEmpty(currentTitle)) {
          currentTitle = getCaptionFileName(currentUrl);
        }
      }
      // console.log('title = ====>', currentTitle, key, this.name, this.dataUrl)
      this.winConfig.title = currentTitle;
    },
    setWatermarkFile(data) {
      // suffix url
      const res = base64Img2Blob(data, window);
      // console.log('setWatermarkFile====>', res)
      this.downLoadWatermarkFile = res;
    },
    // 放大
    enlarge() {
      // madalClass
      if (this.isEnlarge) {
        // 还原
        this.madalClass = "";
        this.enlargeLabel = "全 屏";
        this.winConfig.width = "50vw";
        this.winConfig.height = "50vh";
      } else {
        // 放大
        this.enlargeLabel = "还 原";
        this.madalClass = "ps-con-modal";
        this.winConfig.width = "100vw";
        this.winConfig.height = "100vh";
      }
      this.isEnlarge = !this.isEnlarge;
    },
    modalEvent(type) {
      // 关闭
      this.winConfig.visible = false;
      this.winConfig.width = "50vw";
      this.winConfig.height = "60vh";
      this.componentConfig.componentName = "";
      this.dataUrl = "";
      this.isEnlarge = false;
      this.madalClass = "";
      this.enlargeLabel = "全 屏";
      this.event && this.event("close");
    },
    dataHandling(val, key, index) {
      this.downLoadWatermarkFile = null;
      const suffix_ = getFileSuffix(val);
      this.fileName[key] = this.name || suffix_.name;
      // console.log('suffix_===>',suffix_,this.suffix);
      let currentSuffix = "";
      let currentTitle = "";
      if(IS.isUnDef(this.suffix) || IS.isEmpty(this.suffix)){
        currentSuffix = suffix_.suffix;
      }
      if (IS.isArray(this.suffix)) {
        currentSuffix = this.suffix[index] || suffix_.suffix;
      }
      if (IS.isString(this.suffix)) {
        currentSuffix = this.suffix || suffix_.suffix;
      }

      // console.log('后缀========》',currentSuffix,this.suffix,index,suffix_.suffix);
      if (IS.isArray(this.name)) {
        currentTitle = this.name[index] || getCaptionFileName(val);
      }
      if (IS.isString(this.name)) {
        currentTitle = this.name || getCaptionFileName(val);
      }

      // this.name || getCaptionFileName(url)
      // console.log('@@@@@@@@@@@@',currentSuffix, val, key, currentTitle);
      this.getComponentInfo(currentSuffix, val, key, currentTitle);
    },
    getComponentInfo(fileType, url, index, title_) {
      // console.log('getComponentInfo====>', fileType, url, index)
      const documentFun = (self) => {
        self.componentNameList[index] = "iframeBox";
        // `https://view.officeapps.live.com/op/view.aspx?src=${url}`
        // self.dataUrl[index] = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
        self.dataUrl[index] = url;
      };

      const imgFun = (self) => {
        // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@2222',this.componentNameList,this.dataUrl);
        self.componentNameList[index] = "imgBox";
        self.dataUrl[index] = url;
      };
      const textFun = (self) => {
        self.componentNameList[index] = "textBox";
        self.dataUrl[index] = url;
        fetch(self.dataUrl[index]).then((res) => {
          res.blob().then((blob) => {
            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
            reader.readAsText(blob, "utf8"); //读取文件的内容,也可以读取文件的URL
            reader.onload = function () {
              console.log("this.result===>", this.result);
              //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
              document.getElementById("txtBox").innerHTML = this.result;
            };
          });
        });
      };

      const getInfo = {
        xlsx: documentFun,
        xls: documentFun,
        pptx: documentFun,
        ppt: documentFun,
        doc: documentFun,
        docx: documentFun,
        jpg: imgFun,
        png: imgFun,
        jpeg: imgFun,
        pdf: (self) => {
          self.componentNameList[index] = "pdfBox";
          // // this.dataUrl = 'https://zxcloud.oss-cn-hangzhou.aliyuncs.com/user/task/deliverables/1679882880287_%E6%9D%9C%E5%90%AF%E5%AE%97-%E6%84%8F%E5%A4%96%E9%99%A9%E7%94%B5%E5%AD%90%E4%BF%9D%E5%8D%9520221126-20231125-53.04.pdf' // url
          // this.dataUrl = 'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/businessLicense/1679968661043_%E5%B0%8F%E7%BA%A2%E4%B9%A6(%E7%AC%AC%E5%9B%9B%E7%89%88).pdf' // url
          // this.AddWatermark.addWatermark(this.dataUrl).then(res=>{
          //     PDFObject.embed(res.url, "#pdfBox");
          //   })
          self.dataUrl[index] = url;
          // this.$nextTick(() => {
          //   PDFObject.embed(this.dataUrl[index], '#pdfBox')
          // })
          // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@3333',index,this.componentNameList,this.dataUrl);
        },
        txt: textFun,
        ofd: (self) => {
          self.dataUrl[index] = url;
          self.componentNameList[index] = "odfBox";
        },
      };
      // if (this.config && !this.config.title && this.config.title != '--') {
      //   this.winConfig.title = this.name || getCaptionFileName(url)
      // }
      let fileType_ = fileType;
      const tempArr = ["xlsx", "xls"];
      if (tempArr.indexOf(fileType_) >= 0) {
        if (this.isSingleFile === true) {
          getInfo[fileType_] && getInfo[fileType_](this);
        } else {
          fileType_ = "";
          // getInfo[''] && getInfo[''](this) 
        }
      } else {
        getInfo[fileType_] && getInfo[fileType_](this);
      }
      this.setWinTitle();
      // console.log('文件类型====》',fileType_,this.isSingleFile, this.componentNameList[index],index,this.componentNameList, getInfo[fileType_],getInfo);
      if (!getInfo[fileType_]) {
        // 下载 downLondBox
        this.componentNameList[index] = "downLondBox";
        this.dataUrl[index] = url;
      }
    },

    getDownFileName(itemIndex, url){
      let fileName = getCaptionFileName(url);
      if(!IS.isNullOrUnDef(this.name)&&!IS.isEmpty(this.name)){
        if(IS.isArray(this.name)){
          fileName = this.name[itemIndex]
        }
        if(IS.isString(this.name)){
          fileName = this.name
        }
      }
      return fileName
    },

    async downItemFile(type,itemIndex,url){
       //从链接上截取文件名
       let fileName = this.getDownFileName(itemIndex,url)
      if(type===1){
        // 无水印下载
        downloadFile(url,fileName)
        return false
      }else{
        // 有水印下载
        if(this.isShowWatermark == false){
          // url = this.dataUrl[key] //this.downLoadWatermarkFile || this.url
          downloadFile(url,fileName)
        }else{
          const res = await addWatermark(url,this,this.$watermarkConfig)
          downloadFile(res.url,fileName)
        }
      }
    },

    //下载
    async uploads(type) {
      const key = this.mark + this.currentIndex;
      let url = this.dataUrl[key]; //this.downLoadWatermarkFile || this.url
      if(this.isBatchDownload == false){
        this.downItemFile(type,this.currentIndex,url)
      }
      if(this.isBatchDownload == true){
        const tempARr = Object.keys(this.dataUrl)
        tempARr.forEach((key_,index)=>{
          const url_ = this.dataUrl[key_];
          this.downItemFile(type,index,url_)
        })
      }
    },
  },
};
</script>

<style lang="less">
.img-box {
  width: auto;
  height: 100%;
}

.p-data-con {
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  .carousel-con {
    .slick-slider {
      width: 100%;
      height: 100%;
      .slick-list {
        width: 100%;
        height: 100%;
      }
    }
  }
  .dots-item {
    li button {
      background: #000000;
    }
    li {
      &.slick-active button {
        background: #3205f7;
      }
    }
    .item-con {
      height: 100%;
    }
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    // color: #f0f1f5;
    // background-color: rgb(10, 10, 10);
    opacity: 1;
    z-index: 100;
  }
  // .custom-slick-arrow:before {
  //   display: none;
  // }
  // .custom-slick-arrow:hover {
  //   opacity: 1;
  // }
  .slick-track {
    height: 100%;
    .slick-slide div {
      height: 100%;
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
  }
}

.p-title-con {
  width: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;

  .title {
    flex: 1;
    display: flex;
    overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
    padding: 5px 0;
  }

  .btn-group {
    // width: 200px;
  }
}

.ps-con-modal {
  top: 0px !important;
}

.ps-con{
  &.page{
    width: 100%;
    height: 100%;
  }
  &.modal{}
  .ps-page-con{
    width: 100%;
    height: 100%;
    .p-title-con{
      width: calc(100% - 50px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;

      .title {
        flex: 1;
        display: flex;
        overflow: hidden;
        /*文本不会换行*/
        white-space: nowrap;
        /*当文本溢出包含元素时，以省略号表示超出的文本*/
        text-overflow: ellipsis;
        padding: 5px 0;
      }

      .btn-group {
        // width: 200px;
      }
    }
    .p-data-con{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
