<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="访客姓名">
                        <el-input v-model="filter.visitorName" placeholder="访客姓名" clearable/>
                    </el-form-item>
                    <el-form-item label="通行时间">
                        <el-date-picker
                                v-model="time"
                                type="datetimerange"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <d2-crud
                        title="访客通行轨迹"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                ></d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
    </d2-container>
</template>

<script>
    import {getPageList} from "../../../../api/visitor/visitorExcel/pathExcel";
    import {tableOptions} from "../../../../assets/options";

    export default {
        name: "index",
        data(){
            return{
                time:'',
                tableOptions,
                loading:false,
                currentPage:1,
                pagination:{
                    total:0
                },
                filter:{
                    id:'',
                    visitorName:'',
                    passTime:'',
                    bgTm:'',
                    endTm:'',
                    pageNum:1,
                    pageSize:10,
                },
                columns:[
                    {
                        title:'序号',
                        key:'index',
                        minWidth:'50',
                        formatter (row, column, cellValue, index) {
                            return index+1
                        }
                    },
                    {
                        title:'访客姓名',
                        key:'visitorName',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'证件号',
                        key:'identityNo',
                        minWidth:'130',
                        showOverflowTooltip: true
                    },
                    {
                        title:'登记号',
                        key:'registerCode',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'设备名称',
                        key:'eqpNm',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'门名称',
                        key:'doorNm',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'进出方式',
                        key:'inOrOut',
                        minWidth:'70',
                        showOverflowTooltip: true,
                        formatter (row, column, cellValue, index) {
                            if (cellValue === '1') {
                                return '进'
                            }else if(cellValue === '2'){
                                return '出'
                            }
                        }
                    },
                    {
                        title:'通行时间',
                        key:'passTime',
                        minWidth:'120',
                        showOverflowTooltip: true
                    },
                    {
                        title:'进入区域',
                        key:'resName',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                ],
                data:[],
            }
        },
        methods:{
            handleList(val){
                if(val){
                    this.filter.pageNum = 1
                    this.currentPage = 1
                }
                this.loading = true
                getPageList(this.filter).then(res => {
                    this.loading = false
                    this.data = res.pathPage.list
                    this.pagination.total = res.pathPage.total
                }).catch(err => {
                    this.loading = false
                })
            },
            dateChange(val){
                if(val == null){
                    this.filter.bgTm=''
                    this.filter.endTm=''
                }else {
                    this.filter.bgTm=val[0]
                    this.filter.endTm=val[1]
                }
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,5)
            this.handleList()
        }
    }
</script>

<style scoped>

</style>
