<template>
    <div class="detailsDialog">
        <el-dialog width="656px" center title="推送详情" :visible.sync="detailsData.dialogVisible" v-if="detailsData.dialogVisible">
            <el-table :data="tableData" style="width: 100%">
               <el-table-column label="序号" type="index"></el-table-column>  
               <el-table-column label="推送车次" prop="trainNum"></el-table-column> 
               <el-table-column label="机车号" prop="vehicle"></el-table-column> 
               <el-table-column label="终端名称" prop="terminalName"></el-table-column> 
               <el-table-column label="推送时间" prop="createTime" width="300px"></el-table-column> 
            </el-table>
            <div class="pagination">
                <el-pagination style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
                :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { alarmMessageList } from "@/api/alarmList";
export default {
    name:'detailsDialog',
    props:{
       detailsData:{
            type: Object,
            default: {}
       } 
    },
    created() {
        this.getList(this.searchData)
    },
    data() {
        return {
            searchData:{
                pageNum:1,
                pageSize:10,
                alarmId:this.detailsData.alarmId
            },
            tableData:[],
            total:0
        }
    },
    methods:{
        getList(params) {
            alarmMessageList(params).then(res => {               
                if (res.code == 200) {
                   this.tableData = res.data.records
                   this.total = res.data.total 
                }
            })
        },
        handleSizeChange(val) {
        this.searchData.pageSize = val
        this.getList(this.searchData)
       },
       handleCurrentChange(val) {
        this.searchData.pageNum = val
        this.getList(this.searchData)
       },
    }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
    div {
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
    }

    div:hover {
        cursor: pointer;
    }

    .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
    }

    .search:hover {
        background-color: #4D85F4;
    }

    .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
    }

    .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
    }
}

::v-deep .el-dialog__body {
    // padding: 20px 95px !important;
    padding-bottom:40px !important;
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
</style>