@{
    Layout = null;
}

<div v-if="client.id>0">
    <div class="row m-0 mt-3">
        <div class="col-auto">
            <span class="mr-1">文件类型:</span>
            <select id="search_fileTypes" v-model="fileSearch.fileTypes" multiple>
                <option v-for="item in viewData['文件类型']" v-bind:value="item.value">{{item.text}}</option>
            </select>
        </div>
        <div class="col-auto">
            <span class="mr-1">文件名:</span>
            <input class="" id="search_fileName" v-model="fileSearch.fileName" type="text" autocomplete="off">
        </div>
        <div class="col-auto">
            <span class="mr-1">日期:</span>
            <vue-datepicker id="search_fileDate" v-bind:noholiday="true" v-model="fileSearch.fileDate" />
        </div>
        <div class="col">
            <button class="btn btn-primary" type="button" v-on:click="filterFiles">查询</button>
            <button class="btn btn-primary" type="button" v-on:click="addFile" v-if="page.canEditList">上传</button>
            <button class="btn btn-primary" type="button" v-on:click="refreshFiles" title="重新加载文件列表信息"><i class="fa fa-refresh"></i></button>
        </div>
    </div>

    <table class="table table-client mt-4">
        <thead>
            <tr>
                <th>
                    文件类型
                    <img v-if="orderByFieldStr!=='FileTypeName'||orderByStr===''" v-on:click="orderTableByField('FileTypeName','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='FileTypeName'&&orderByStr==='asc'" v-on:click="orderTableByField('FileTypeName','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='FileTypeName'&&orderByStr==='desc'" v-on:click="orderTableByField('FileTypeName','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />
                </th>
                <th>
                    文件名
                    <img v-if="orderByFieldStr!=='FileName'||orderByStr===''" v-on:click="orderTableByField('FileName','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='FileName'&&orderByStr==='asc'" v-on:click="orderTableByField('FileName','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='FileName'&&orderByStr==='desc'" v-on:click="orderTableByField('FileName','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />
                </th>
                <th>
                    签署时间     
                    <img v-if="orderByFieldStr!=='SignDate'||orderByStr===''" v-on:click="orderTableByField('SignDate','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='SignDate'&&orderByStr==='asc'" v-on:click="orderTableByField('SignDate','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='SignDate'&&orderByStr==='desc'" v-on:click="orderTableByField('SignDate','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />
                </th>
                <th>
                    协议编号
                    <img v-if="orderByFieldStr!=='ProtocolNumber'||orderByStr===''" v-on:click="orderTableByField('ProtocolNumber','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='ProtocolNumber'&&orderByStr==='asc'" v-on:click="orderTableByField('ProtocolNumber','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='ProtocolNumber'&&orderByStr==='desc'" v-on:click="orderTableByField('ProtocolNumber','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />

                </th>
                <th>
                    文件说明
                    <img v-if="orderByFieldStr!=='FileDesc'||orderByStr===''" v-on:click="orderTableByField('FileDesc','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='FileDesc'&&orderByStr==='asc'" v-on:click="orderTableByField('FileDesc','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='FileDesc'&&orderByStr==='desc'" v-on:click="orderTableByField('FileDesc','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />
                </th>
                <th>
                    日期
                    <img v-if="orderByFieldStr!=='BookTime'||orderByStr===''" v-on:click="orderTableByField('BookTime','asc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC" />
                    <img v-if="orderByFieldStr==='BookTime'&&orderByStr==='asc'" v-on:click="orderTableByField('BookTime','desc')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==" />
                    <img v-if="orderByFieldStr==='BookTime'&&orderByStr==='desc'" v-on:click="orderTableByField('BookTime','')" style="width: 20px; height: 20px;cursor:pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=" />
                </th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in groupingFiles" v-bind:class="item.bgClass">
                <td v-bind:class="{dropline:item.HasSentDrop}" style="width: 115px; padding-left: 0px; padding-left: 35px;text-align:left; " :title="item.FileTypeName">{{item.FileTypeName.length>5?item.FileTypeName.substring(0,5)+'...':item.FileTypeName}}</td>
                <td v-bind:key="viewState.fileUpdateKey" style="width: 300px; padding-left: 0px; padding-right: 0px; ">
                    <span>{{item.FileName}}</span>
                    <template v-if="page.isSecuritiesEnvironment">
                        <i class="fa fa-link yl-tooltip" v-bind:title="'签署版本: ' + item.SignType + '\n' + item.ReportorRole + '填报'" v-if="item.FileTypeName==='主协议附件(PDF)'"></i>
                        <i class="fa fa-link yl-tooltip" v-bind:title="'关联协议: ' + item.MainProtocolNumber" v-if="item.MainProtocolNumber!==''"></i>
                    </template>
                </td>
                <td style="width: 90px; padding-left: 0px; padding-right: 0px; ">{{item.SignDate}}</td>
                <td style="width: 90px; padding-left: 0px; padding-right: 0px; ">{{item.ProtocolNumber}}</td>
                <td style="width: 90px; padding-left: 0px; padding-right: 0px; word-break:break-all;"><span>{{item.FileDesc}}</span></td>
                <td style="width: 150px; padding-left: 0px; padding-right: 0px; ">{{item.BookTime}}</td>
                <td style="width:115px; padding-left:0px;padding-right:0px; ">
                    <button class="btn btn-primary" style="min-width:35px;display:inline-block; font-size:12px; height:22px;line-height:16px; padding:2px 2px 2px 2px;" type="button" v-on:click="showFile(item)">预览</button>
                    <button class="btn btn-primary" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px;" type="button" v-on:click="downloadFile(item)">下载</button>
                    <template v-if="page.canEditList">
                        <button class="btn btn-primary" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px;" type="button" v-on:click="abandonFile(item)" v-if="item.CanDrop">废止</button>
                        <button class="btn btn-primary" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px;" type="button" v-on:click="removeFile(item)" v-if="item.CanDelete">删除</button>
                        <button class="btn btn-primary" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px;" type="button" v-on:click="recoverFile(item)" v-if="item.CanBack">{{item.OptState===OptFlagsEnum.D?"解除废弃":"还原"}}</button>
                    </template>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div v-else>
    <div class="alert alert-danger">请先保存用户基本信息</div>
</div>