<template>
    <el-col :span="24" class="mw">
        <div class="content-include">
            <div class="content-title">发货仓库配置>发货仓库</div>
            <div class="search-input">
                <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                    <el-form-item label="仓库编码:">
                        <el-input v-model="queryParams.batchCode" clearable size="mini" placeholder="批次编码"
                                  @change="searchClick" @keyup.enter.native="getPage"/>
                    </el-form-item>
                    <el-form-item label="仓库名字:">
                        <el-input v-model="queryParams.importAccount" clearable size="mini" placeholder="导入账号"
                                  @change="searchClick" @keyup.enter.native="getPage"/>
                    </el-form-item>
										<el-button type="" size="mini" class="mt7 mr15 r mb10">
                        重置
                    </el-button>
                    <el-button type="primary" size="mini" @click="getPage" class="mt7 mr15 r mb10">
                        查询
                    </el-button>
                </el-form>
            </div>
            <div class="pl15 mt10">
							<el-button type="primary" size="mini" class="mb10" @click="importPlatformBill">+ 新建
							</el-button>
            </div>
						<div class="ml15 pl10 has-choose mb10">
								<i class="el-icon-warning g47 f14"/>  <span class="f13 g60">已选择<span class="g47">{{ importTableDataSelectionLength }}</span>项</span>
						</div>
            <el-table  ref="multipleTable" :data="importTableData" :cell-style="tableErrorRowStyle" class="pl15 mb47"
                      @selection-change="importTableDataSelectionChange" :height="tableMaxHeight">
                <el-table-column type="selection" align="center"/>
                <el-table-column prop="createAccount" label="仓库名称"/>
                <el-table-column prop="createDate" label="仓库地址信息"/>
                <el-table-column prop="timeCode" label="仓库编码"/>
                <el-table-column prop="batchCode" label="状态" sortable/>
                <el-table-column prop="agentCode" label="更新时间" sortable/>
                <el-table-column fixed="right" label="操作">
									<template slot-scope="scope">
										<span class="poi textButton" @click="searchDetail(scope.row)">编辑</span>
										<span class="poi textColor"
													@click="fileDownload(scope.row.fileUrl, scope.row.fileName)">删除成功</span>
										<span class="poi textColor" @click="delFile(scope.row.id, scope.row.importStatus)">应用</span>
									</template>
                </el-table-column>
            </el-table>
        </div>
        <el-col :span="24">
            <div class="ceiling-pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.currentPage"
                    :page-sizes="[30, 50, 100]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryParams.total"
                    style="float:right;display:inline-block"
                />
            </div>
        </el-col>
    </el-col>
</template>
<script>
export default {
    data() {
        return {
            table: true,
            queryParams: {
                batchCode: '',
                importAccount: '',
                timeCode: '',
                authCode: '',
                feeType: '',
                feeTypeList: [],
                fileName: '',
                importStatus: '',
                importStatusList: [],
                syncStatus: '',
                syncStatusList: [],
                orderId: '',
                sourceId: '',
                currentPage: 1,
                pageSize: 30,
                total: 0,
                isPage: true
            },
            total: 0,
            tableData: [],
            importTableData: [],
            importRecordData: [],
            importTableDataSelectionLength: 0,
            tableMaxHeight: window.innerHeight - 263,
        }
    },
    methods: {

    },
    mounted() {
        window.onresize = () => {
            return (() => {
                that.tableMaxHeight = window.innerHeight - 263
            })();
        }
    },
    activated() {
        this.tableMaxHeight = window.innerHeight - 263;
    },
}
</script>
<style scoped lang="less">
.el-drawer__body {
    .el-pagination {
        margin-right: 0px
    }
}

.textButton {
    color: #4E74FC;
}

.textColor {
    color: #555555;
}

.el-table th.gutter {
    display: table-cell !important;
}

.test {
    margin-top: 14px;
}

.f13 {
    font-size: 13px;
    font-weight: normal;
}

.el-table th > .cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-right: 10px;
    width: 100%;
}

.show-overflow {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.errorRow {
    color: #F56C6C;
}

.very-long-font {
    font-size: 12px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pl0 {
    padding-left: 0;
}

.pt0 {
    padding-top: 0;
}
.has-choose{
	height: 25px;
	border: 1px solid #4E74FC;
	background:rgb(224, 244, 255);
	border-radius: 4px;
	line-height: 25px;
}
</style>
