/**
* author: Louie Butch
* date: 2020/11/4
* email: 844089357@qq.com
* desc:  附件列表
*/
<template>
<div class="hd-attachment-list">
    <div class="tool-bar" v-if="!readOnly">
        <hd-upload :params="uploadParams" :upload-url="uploadUrl" :handle-success="handleSuccess">
            <hd-button type="text" icon="hd-icon-add1">添加附件</hd-button>
        </hd-upload>
    </div>
    <div class="table-box" :class="{'table-box_has_bar' : !readOnly}">
        <hd-table
                :table-list="attachmentList"
                rowKey="attachmentDataId"
                height="100%"
        >
            <el-table-column label="文件名" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <hd-icon :icon-name="setIconName(row)"></hd-icon>
                    <span style="margin-left: 8px">{{row.fileName}}</span>
                </template>
            </el-table-column>
               <el-table-column label="标题" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="readOnly">{{row.attachmentName}}</span>
                    <el-input v-else size="mini" v-model="row.attachmentName" placeholder="请输入标题" @blur="format(row,'attachmentName')"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="描述" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="readOnly">{{row.remark}}</span>
                    <el-input v-else size="mini" v-model.trim="row.remark" placeholder="请输入描述"  @blur="format(row,'remark')"></el-input>
                </template>
            </el-table-column>
             <el-table-column label="文件大小" prop="fileSize" width="120" sortable :formatter="fileSizeSetter"
                              show-overflow-tooltip></el-table-column>
            <el-table-column label="上传人" prop="uploadUserName" sortable width="120"></el-table-column>
            <el-table-column label="上传时间" prop="uploadTime" sortable width="140"
                             :formatter="uploadTimeSetter"></el-table-column>
            <el-table-column label="操作" prop="workName" width="120" align="center">
                <template slot-scope="{row, $index}">
                    <el-button type="text" size="small" v-if="readOnly" @click="downloadFile(row)">下载</el-button>
                    <el-button type="text" size="small" v-else @click="deleteFile($index)">删除</el-button>
                </template>
            </el-table-column>
        </hd-table>
    </div>
</div>
</template>

<script>
import hdTable from '../../hdTable/src/hdTable';
import hdButton from '../../hdButton/src/hdButton';
import hdUpload from '../../hdUpload/src/hdUpload';
import hdIcon from '../../hdIcon/src/hdIcon';

import Tool from '../../../assets/js/tool';

export default {
    name: 'hd-attachment-list',
    components: {
        hdTable,
        hdButton,
        hdUpload,
        hdIcon
    },
    props: {
        uploadParams: {
            type: Object,
            default: () => {}
        },
        uploadUrl: {
            type: String,
            default: ''
        },
        attachmentList: {
            type: Array,
            default: () => []
        },
        readOnly: {
            type: Boolean,
            default: true
        },
        handleSuccess: {
            type: Function,
            default: () => {}
        },
        getDownloadUrl: {
            type: Function,
            default: () => ''
        }
    },
    computed: {
        setIconName(){
            return (row) => {
                let fileNameExtension = row.fileNameExtension || row.filenameExtension;

                return Tool.setFileSvgName(fileNameExtension);
            }
        }
    },

    methods: {
        downloadFile(row) {
            let fileId = row.attachmentId;

            let url = this.getDownloadUrl(fileId);

            if (url) {
                window.location.href = url;
            }
        },

        fileSizeSetter(row, column, cellVal) {
            return Tool.changeFileSize(cellVal);
        },

        uploadTimeSetter(row, column, cellVal) {
            if (typeof(cellVal) === 'string') {
                return cellVal.split('T')[0];
            } else {
                return Tool.getDate(cellVal);
            }
        },

        deleteFile(index) {
            this.$emit('deleteFile', index);
        },

        format(row,prop){
            if(row[prop]){
                row[prop] = Tool.replaceHtmlTag(row[prop]);
            }
        },
    }
};
</script>

<style scoped lang="scss">
    .hd-attachment-list {
        width: 100%;
        height: 100%;

        .table-box {
            height: 100%;
        }

        .table-box_has_bar {
            height: calc(100% - 30px);
        }
    }
</style>