<template>
  <div>
    <div class="flex-align-center flex-between normal-margin">
      <div v-if="$slots.title">
        <slot name="title"></slot>
      </div>
      <p v-else>附件列表</p>
      <slot v-if="!onlyread" name="upload"></slot>
    </div>
    <el-table
      :header-cell-style="{background:'#EEEEEE',color:'#333'}" 
      size="mini"
      border
      :data="attinfos"
      style="width: 100%">
      <el-table-column
        prop="document"
        label="文件名称">
        <template slot-scope="scope">
          <el-input v-if="actid === scope.row.attachmentid" size="mini" v-model="scope.row.document"></el-input>
          <span v-else>{{scope.row.document}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdate"
        label="上传时间">
      </el-table-column>
      <el-table-column
        prop="contentlength"
        label="文件大小"
        width="90">
        <template slot-scope="scope">
          {{scope.row.contentlength > 1073741824?(scope.row.contentlength / Math.pow(1024,3)).toFixed(2)+'GB':scope.row.contentlength > 1048576?(scope.row.contentlength / Math.pow(1024,2)).toFixed(2)+'MB':scope.row.contentlength > 1024?(scope.row.contentlength / Math.pow(1024,1)).toFixed(2)+'KB':scope.row.contentlength+'B'}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="140">
        <template slot-scope="scope">
          <div v-if="actid === scope.row.attachmentid">
            <el-button type="text" size="small" @click="saveEdit(scope.row)">保 存</el-button>
            <el-button type="text" size="small" @click="actid = 0">取 消</el-button>
          </div>
          <div v-else>
            <el-button type="text" size="small" @click="download(scope.row)">下 载</el-button>
            <el-button :disabled="onlyread" class="inline-16" type="text" size="small" @click="editAttachment(scope.row)">编 辑</el-button>
            <el-popconfirm
              title="确定删除当前附件吗？"
              @confirm="deleteAttachment(scope.row)">
              <el-button :disabled="onlyread" slot="reference" size="small" type="text">删 除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props:['attinfos','onlyread'],
  data () {
    return {
      actid:null
    }
  },
  methods:{
    editAttachment (row) {
      this.actid = row.attachmentid
    },
    download (row) {
      window.open(row.url)
    },
    async saveEdit (row) {
      let param = {
        "classname": "system.attachment.MediaCenter",
        "method": "changeAttachment",
        "content": {
          "files": [
            {
              "attachmentid": row.attachmentid,
              "document": row.document,
              "parentid":row.parentid
            }
          ]
        }
      }
      const res = await this.$api.requested(param)
      res.code === 1?this.$emit('onSuccess'):''
      res.code === 1?this.actid = '':''
    },
    
    async deleteAttachment (row) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
            "linksids":[row.linksid]
        }
      })
      res.code === 1?this.tool.showMessage(res):''
      res.code === 1?this.$emit('onSuccess'):''
    }
  }
}

</script>
<style>
</style>