<template>
    <div>
        <!--            列表区域-->
        <el-row>
            <template>
                <el-table
                        :data="tableData"
                        border
                        :cell-style="{textAlign:'center'}"
                        style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                        :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                >
                    <el-table-column
                            fixed
                            prop="waybill"
                            label="货物单号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="vol"
                            label="体积"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="weight"
                            label="重量"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="pcs"
                            label="件数"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="billweight"
                            label="计费重量"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="area"
                            label="库区"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="location"
                            label="库位"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="serialnumber"
                            label="流水号"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            prop="station"
                            label="出入库场站"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="80">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status ==='0'">失败</span>
                            <span v-if="scope.row.status ==='1'">成功</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="transcar"
                            label="运输车辆信息"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="transtype"
                            label="交易类型"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="custel"
                            label="客户联系电话"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="customer"
                            label="联系人姓名"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="customername"
                            label="客户名称"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="goodstype"
                            label="货物类型"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="house"
                            label="出入库仓库"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="ietype"
                            label="类型"
                            width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ietype ==='I'">进</span>
                            <span v-if="scope.row.ietype ==='E'">出</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="opter"
                            label="出入库经办人"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="opttime"
                            label="出入库时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="160">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-row>
        <el-row style="margin-top: 10px" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="tabulationInfo.pageNum"
                    :page-size="tabulationInfo.pageSize"
                    :page-sizes="[10, 50, 100, 500]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>

</template>

<script>
    import {selectNewInventroyrecords} from "../../api/consigner/station";

    export default {
        name: "Tabulation",
        props: [
            'tabulationInfo'
        ],
        data(){
            return {
                tableData: [],
                total: 0
            }
        },
        methods:{
            getList() {
                const _this = this
                selectNewInventroyrecords(this.tabulationInfo).then((response) => {
                    const res = response.data
                    console.log(response.data)
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data.list
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            handleSizeChange(val) {
                this.tabulationInfo.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.tabulationInfo.pageNum = val
                this.getList()
            },

        },
        mounted() {
            this.getList();
        },
        watch:{
            tabulationInfo(value){
                console.log('from parent='+JSON.stringify(value))
            }
        }

    }
</script>

<style scoped>

</style>