<template>
    <el-dialog  title="查看原文" :visible.sync="visible" v-dialogDrag width="90%" :before-close="cancel">
        <el-row>
            <template v-if="isShowDown">
                <el-col>
                    <el-button  style="margin-bottom:10px;" type="primary" size="small" @click="batchDown">批量下载</el-button>
                </el-col>
            </template>
            <el-col :span="8">
                <el-table ref="tableForEach" highlight-current-row border size='mini' :data="tableData"
                    @row-click="previewImg" @selection-change="handleSelectionChange" tooltip-effect="dark" max-height="500px" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" width="79" label="序号" align="center">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="file_name" label="文件名称" align="center">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="16">
                <!-- 查看原文 -->
                <div class="demo-image__lazy">
                    <!-- <el-image v-show="imgType &&imgType != 'pdf'  " class="imgs" :src="picUrl" fit="cover"></el-image> -->
                    <!-- 不是电子档案除录音、录像 分类-->
                    <video ref="videoS" v-if="fileType=='mp4' && videoSrc" :src="videoSrc" controls="controls"
                        height="600px" :muted="muteStatus" width="100%">您的浏览器不支持视频播放
                    </video>
                    <audio ref="audioS" v-else-if="fileType=='mp3' && musicSrc" :src="musicSrc" controls
                        autoloop></audio>
                    <iframe v-else style="text-alin:center" noresize align=center width="100%" height="750px" :src="picUrl" frameborder="0" scrolling="no"></iframe>
                    <!--  -->
                    <!-- -->
                    <!--  -->
                </div>
            </el-col>
        </el-row>
    </el-dialog>
</template>
  
<script>
import localStronge from "@/api/localData";
import { message } from "@/utils/common";
  export default {
    props: {
      visible: {
        type: Boolean,
        default: () => false
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      tableData: {
        type: Array,
        default: () => []
      },
      currentTableData:{
        type:Object,
        default:()=>{}
      },
      isShowDown:{ // 是否展示下载按钮
        type:Boolean,
        default:false
      }
      
    },
    data() {
      return {
        selectedData:[], // 选中数据
        videoSrc:null,
        musicSrc:null,
        picUrl:null,
        fileType:null, // 图片类型
        tableShow:""
      };
    },
    methods: {
        // 批量下载
        batchDown(){
            if (this.selectedData.length==0) {
                message("warning", "请选择下载的文件", 3000);
                return;
            }
            let fileIds = this.selectedData.length
            ? this.selectedData.map((ele) => ele.id).join(",")
            : "";
            const prefix =
                process.env.NODE_ENV === "development"
                    ? "http://" +
                    localStronge.getServiceip().ip +
                    ":" +
                    localStronge.getServiceip().host
                    : "http://" + window.location.host;
            let str = prefix +"/point-strategy/v/fileManage/batchDownloadTwo?tableName=" +
                this.currentTableData.tableName + "&ids=" + fileIds;
            window.location.href = str;
        },
        // 勾选事件
        handleSelectionChange(val){
            this.selectedData = val;
        },
        // 点击查看图片
        previewImg(row) {
        this.fileType = row.file_type;
        if (row.file_type !='mp3' && row.file_type !='mp4') {
            this.$refs.tableForEach.clearSelection();
            this.$refs.tableForEach.toggleRowSelection(row);
            let name = row.file_name_server.replace(".jpg", ".pdf");
            this.picUrl =
            process.env.NODE_ENV === "development"
                ? "http://" +
                localStronge.getServiceip().ip +
                ":" +
                localStronge.getServiceip().host +
                "/point-strategy/v/archiveFile/showImg?fileName=" +
                name +
                "&path=" +
                encodeURI(encodeURI(row.file_des)) +
                "&data=" +
                new Date()+'&userId='+sessionStorage.getItem("userid")
                : "http://" +
                window.location.host +
                "/point-strategy/v/archiveFile/showImg?fileName=" +
                encodeURI(encodeURI(name)) +
                "&path=" +
                encodeURI(encodeURI(row.file_des)) +
                "&data=" +
                new Date()+'&userId='+sessionStorage.getItem("userid");
        } else {
            const prefix =
            process.env.NODE_ENV === "development"
                ? "http://" +
                localStronge.getServiceip().ip +
                ":" +
                localStronge.getServiceip().host
                : "http://" + window.location.host;
            if (this.fileType === "mp4") {
            this.videoSrc =
                prefix +
                "/point-strategy/v/archiveFile/showImg?fileName=" +
                row.file_name_server +
                "&path=" +
                row.file_des +
                "&data=" +
                new Date()+'&userId='+sessionStorage.getItem("userid");
            } else {
            this.musicSrc =
                prefix +
                "/point-strategy/v/archiveFile/showImg?fileName=" +
                row.file_name_server +
                "&path=" +
                row.file_des +
                "&data=" +
                new Date()+'&userId='+sessionStorage.getItem("userid");
            }
        }
        },
        cancel() {
            this.$emit("cancel");
        }
    },
    mounted(){
    }
  };
</script>
  
<style lang="scss" scoped>
.demo-image__lazy {
    background: rgb(245, 245, 245);
    padding: 5px 15px;
    text-align: center;

    .imgs {
    width: 70%;
    }
}

</style>
  