<template>
  <!-- 附件列表 -->
  <!-- <el-dialog
    title="附件列表"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose"
    append-to-body
  > -->
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="70">
      </el-table-column>
      <el-table-column
        prop="name"
        label="文件名称"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <ht-table-column
        prop="type"
        label="文件类型"
        align="center"
        width="180"
        :show-overflow-tooltip="true"
      >
        <template v-slot="{row}">
          {{ getDictName('tyfj-fjlx', row.type) }}
        </template>
      </ht-table-column>
      <el-table-column
        prop="fileSize"
        label="文件大小"
        align="center"
        width="180"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="createName"
        label="上传人"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="上传时间"
        align="center"
        width="130"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->
      <el-table-column label="操作" width="130" align="center">
        <template v-slot="{row}">
          <el-link type="primary" @click="preview(row)" size="small"
            >查看</el-link
          >
          <el-link
            type="primary"
            @click="download(row)"
            size="small"
            v-loading="row.loading"
            style="margin-left: 10px;font-size:16px"
          >下载</el-link> 
        </template>
      </el-table-column>
    </el-table>
    <!-- <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">关闭</el-button>
  </span> -->
    <img-dialog ref="img" :imgArrSrc="imgArrSrc" />
  </div>
  <!-- </el-dialog> -->
</template>
<script>
import req from '@/request.js'
import ImgDialog from '@/components/dialog/ImgDialog.vue'
export default {
  name: 'accessory',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    accessoryInfo: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      // tableData: [],
      imgArrSrc: [],
      token: '',
      loading: false,
    }
  },
  components: {
    ImgDialog,
  },
  computed: {
    tableData() {
      // return this.accessoryInfo.length !== 0 ? this.accessoryInfo : []
      return this.accessoryInfo
    },
  },
  mounted() {
    // 文件选择后的回调
    this.$bus.$on('fileAdded', () => {
      console.log('文件已选择')
    })
    // 文件上传成功的回调
    this.$bus.$on('fileSuccess', (file) => {
      console.log(file)
      //   let length = this.tableData.length
      //   this.tableData.push({
      //     key: length + 1,
      //     ...file,
      //   })
      //   this.$emit('handleFile', this.tableData)
      //   this.tableData = []
    })
  },
  methods: {
    //查看
    preview(row) {
      if (row.type == 1) {
        this.imgArrSrc = this.tableData
        this.$refs.img.open()
      } else {
        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')
          })
        // this.loading = true
        // const formData = new FormData()
        // formData.append('_w_fileid', row.id)
        // this.$http
        //   .post('${cqxy}/wps/oauth/url', formData)
        //   .then(res => {
        //     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.href, '_blank')
        //     this.loading = false
        //   })
        //   .catch(() => {
        //     this.$message.error('请求错误！')
        //     this.loading = false
        //   })
      }
    },
    //下载
     download(row) {
          this.$set(row,'loading',true)
          this.$message.info('附件下载中')
          let ids = row.id
          let bizPath = 'default'
          let formData = new FormData()
          formData.append('bizPath', bizPath)
          formData.append('ids', ids)
          req
            .downloadPostCopy(
              '${cqxy}/biz/universal/accessory/v1/minIoAllDownFile',
              formData
            )
            .then((res) => {
              this.$set(row,'loading',false)
              this.$message.success('附件下载成功')
            })
            .catch(() => {
              this.$set(row,'loading',false)
              this.$message.error('附件下载失败')
            })
    },
    //下载文件的方法
    open(obj) {
      this.dialogVisible = true
      this.tableData = obj
    },
    handleClose() {
      this.dialogVisible = false
    },
    //上传发送事件
    handleUpload() {
      this.$bus.$emit('openUploader')
    },
    destroyed() {
      this.$bus.$off('fileAdded')
      this.$bus.$off('fileSuccess')
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-table .cell {
  font-size: 18px !important;
}
/deep/ .el-button--mini span {
  font-size: 16px !important;
}
/deep/ .el-button--mini {
  padding: 7px 10px !important;
}
// /deep/ .el-dialog__body{
//   padding-top: 10px;
// }
/deep/ .el-dialog__title {
  font-weight: bold;
}
</style>