<template>
    <div>
        <div class="uploadBtn">
            <el-button size="small" @click="handleUpload" icon="el-icon-upload" type="primary" plain
                >附件上传</el-button
            >
            <el-button
                size="small"
                @click="handleUpload2"
                icon="el-icon-upload2"
                type="primary"
                plain
                >打开拖拽上传</el-button
            >
            <span class="info">{{ info }}</span>
        </div>
        <el-table :data="tableData" height="180" border style="width: 100%" v-loading="loading">
            <el-table-column
                prop="name"
                label="文件名称"
                align="center"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                prop="type"
                label="文件类型"
                align="center"
                :show-overflow-tooltip="true"
            >
                <template v-slot="{row}">
                    <span v-if="row.type == 1">图片</span>
                    <span v-if="row.type == 2">文档</span>
                    <span v-if="row.type == 3">压缩文件</span>
                    <span v-if="row.type == 4">视频</span>
                    <span v-if="row.type == 5">其它</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="fileSize"
                label="文件大小"
                align="center"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                prop="createName"
                label="上传人"
                align="center"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="上传时间"
                align="center"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" @click="preview(scope.row)" size="small">查看</el-link>
                    <el-link
                        type="primary"
                        @click="download(scope.row)"
                        size="small"
                        style="margin-left: 10px"
                        v-loading="scope.row.loading"
                        >下载</el-link
                    >
                    <el-link
                        type="primary"
                        @click.native.prevent="deleteTableData(scope.$index, tableData)"
                        size="small"
                        style="margin-left: 10px"
                        >删除</el-link
                    >
                </template>
            </el-table-column>
            <!-- <el-table-column width="100" align="center">
        <template slot-scope="scope">
          <el-link type="primary"
            @click.native.prevent="deleteTableData(scope.$index, tableData)"> 查看 </el-link>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center">
        <template slot-scope="scope">
          <el-link type="primary" @click="download(scope.row)"> 下载 </el-link>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click.native.prevent="deleteTableData(scope.$index, tableData)"
          >
            删除
          </el-link>
        </template>
      </el-table-column> -->
        </el-table>
        <img-dialog ref="img" :imgArrSrc="imgArrSrc" />
    </div>
</template>
<script>
import req from '@/request.js'
import ImgDialog from '@/components/dialog/ImgDialog.vue'
export default {
    props: {
        file: {
            type: Array,
            default: () => {
                return []
            },
        },
        info: {
            type: String,
            default: '请上传附件',
        },
    },
    components: {
        ImgDialog,
    },
    data() {
        return {
            tableData: this.file,
            imgArrSrc: [],
            // fileid: '',
            // fileName: '',
            token: '',
            loading: false,
            // isDownload: false,
            href: '',
        }
    },
    watch: {
        tableData() {
            return (this.tableData = this.file)
        },
    },
    mounted() {
        // 文件选择后的回调
        this.$bus.$on('fileAdded', () => {
            console.log('文件已选择')
        })
        // 文件上传成功的回调
        this.$bus.$on('fileSuccess', (file) => {
            let length = this.tableData.length
            this.tableData.push({
                key: length + 1,
                ...file,
            })
            this.$emit('handleFile', this.tableData)
            this.tableData = []
        })
        this.getToken()
    },
    methods: {
        // 修改
        change() {
            const row = {type: 2}
            this.preview(row)
        },
        // async change() {
        //   let _this = this
        //   try {
        //     let {data} = await _this.$http.get(
        //       `/v1/3rd/file/s/${_this.fileid}?_w_fname=${_this.fileName}&model=write`
        //     )
        //     if (data.success == true) {
        //       let form = {}
        //       form.jtoken = data.data.token
        //       form.jwpsUrl = data.data.wpsUrl

        //       sessionStorage.setItem('wps', JSON.stringify(form))
        //     }
        //   } catch (error) {}
        //   console.log('fileid', this.fileid)
        //   const jump = this.$router.resolve({name: 'onlineediting'})
        //   window.open(jump.href, '_blank')
        // },
        getToken() {
            if (window.sessionStorage.getItem('currentUser')) {
                let token = JSON.parse(window.sessionStorage.getItem('currentUser')).token
                this.token = 'Bearer ' + token
            } else {
                this.token = ''
            }
        },
        //查看
        preview(row) {
            console.log(this.tableData, '附件的信息')
            if (row.type == 1) {
                this.imgArrSrc = this.tableData
                this.$refs.img.open()
            } else {
                // this.loading = true
                // const formData = new FormData()
                // formData.append('_w_fileid', row.id)
                this.$http.get('${cqxy}/wps/oauth/olinePreview?_w_fileid=' + row.id).then((res) => {
                    let url = window.context.cqxy + res.data.value
                    window.open(url, '_blank')
                })
                //     let r = res.data.value
                //     // 跳转 使用sessionStorage，避免关键信息在ip中暴露
                //     // 使用push会停留当前页面，故不采纳
                //     // params 传递参数，子组件无法渲染iframe组件，故不采纳
                //     // sessionStorage.wpsUrl = r.wps_url;
                //     // sessionStorage.token = r.token;
                //     const jump = this.$router.resolve({name: 'onlineediting'})
                //     window.open(jump, '_blank')
                //     this.loading = false
                //   })
                //   .catch(() => {
                //     this.$message.error('请求错误！')
                //     this.loading = false
                //   })
                // console.log(row, '附件查看信息')
                // this.$message.info('目前只能查看图片,其它文件类型待开发')
            }
        },
        //下载
        download(row) {
            if (!row.id) {
                this.$message.warning('请保存后再下载！')
            } else {
                this.$set(row, 'loading', true)
                let ids = row.id
                // let name = url.substring(url.lastIndexOf('/') + 1)
                // let index = name.indexOf('.')
                // let ids = name.slice(0, index)
                let bizPath = 'default'
                let formData = new FormData()
                formData.append('bizPath', bizPath)
                formData.append('ids', ids)
                // this.isDownload = true
                this.$message.info('附件下载中')
                req.downloadPostCopy(
                    '${cqxy}/biz/universal/accessory/v1/minIoAllDownFile',
                    formData
                )
                    .then((res) => {
                        // this.isDownload = false
                        this.$set(row, 'loading', false)
                        if(res) {
                            this.$message.success('附件下载成功')
                        }else {
                            this.$message.error('附件下载失败')
                        }
                        
                    })
                    .catch(() => {
                        // this.isDownload = false
                        this.$set(row, 'loading', false)
                        this.$message.error('附件下载失败')
                    })
            }
        },
        //上传发送事件
        handleUpload() {
            this.$bus.$emit('openUploader')
        },
        handleUpload2() {
            this.$bus.$emit('openUploader2')
        },
        deleteTableData(index, rows) {
            rows.splice(index, 1)
            // this.tableData = this.tableData.filter(item => item.key !== key)
        },
    },
    destroyed() {
        this.$bus.$off('fileAdded')
        this.$bus.$off('fileSuccess')
    },
}
</script>
<style lang="scss" scoped>
.uploadBtn {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
    .info {
        color: rgb(255, 0, 0);
        margin-left: 20px;
        font-size: 18px;
    }
}
/* .uploadBtn::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
} */
/deep/ .el-loading-spinner .circular {
    margin-top: 10px;
    height: 22px !important;
    width: 22px !important;
}
</style>
