<template>
    <div class="content-styl">
        <div class="search-styl">
            <div class="search-content">
                <div class="search-left">
                    <div class="search-card">
                        <p><span style="color: red">*</span>输入姓名：</p>
                        <el-input
                            placeholder="请输入姓名"
                            v-model="filter.name"
                            size="small"
                        />
                    </div>
                    <div class="search-card">
                        <p><span style="color: red">*</span>输入身份证号：</p>
                        <el-input
                            placeholder="请输入证件号码"
                            v-model="filter.idcard"
                            size="small"
                        />
                    </div>
                </div>
                <div class="search-right">
                    <div class="search-btn" @click="searchFun()">查询</div>
                    <div class="search-btn" @click="clearFilter()">重置</div>
                    <div class="search-btn" @click="toPage('/reportQuery')">
                        历史报告
                    </div>
                    <div class="search-btn" @click="toPage('/logSearch')">
                        日志查询
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="table-content">
                <el-table
                    :data="userList"
                    :stripe="true"
                    border
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#F5F7FE',
                        color: '#606266',
                    }"
                    :cell-style="{ 'text-align': 'center' }"
                >
                    <el-table-column prop="name" label="姓名" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="idcard"
                        label="身份证号码"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="applyTime"
                        label="申请日期"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="200"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="searchInfo(scope.row)"
                                >查询</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="footer">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="size"
                    :total="this.totalSize"
                ></el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                filter: {
                    name: "",
                    idcard: "",
                },
                userList: [],
                size: 20, //每页展示的条数
                totalSize: 0, //一共多少条
                page: 1, //当前页
            };
        },
        created() {},
        methods: {
            //查询信息
            searchFun() {
                if (this.filter.name === "" || this.filter.idcard === "") {
                    this.$message.error("请填写筛选信息");
                }
                this.httpGet(this.$root.api_userQuery, this.filter)
                    .then((res) => {
                        console.log("申请查询", res);
                        this.userList = [res.apply];
                    })
                    .catch((err) => {
                        console.log("接口报错", err);
                    });
            },
            //跳转页面
            toPage(val) {
                this.$router.push({
                    path: val,
                });
            },
            //清空筛选条件
            clearFilter() {
                this.filter = {
                    name: "",
                    idcard: "",
                };
                this.userList = [];
            },
            searchInfo(val) {
                this.$router.push({
                    path: "/userInfo",
                    query: {
                        name: val.name,
                        idcard: val.idcard,
                        isCome: "apply",
                    },
                });
            },
            // // 改变当前页
            // handleCurrentChange(val) {
            //     this.page = val;
            //     this.searchFun();
            // },
            // //改变每页多少条
            // handleSizeChange(val) {
            //     this.size = val;
            //     this.searchFun();
            // },
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .content-styl {
        .search-styl {
            color: #666666;

            .search-content {
                flex-x();
                font-size: 13px;

                .search-left {
                    flex-x(flex-start);
                    flex-wrap: wrap;

                    .search-card {
                        flex-x();
                        margin-right: 38px;

                        p {
                            margin-right: 10px;
                            flex-shrink: 0;
                        }
                    }

                    >>>.el-input--small {
                        width: 242px;
                    }

                    >>>.element-select .el-input--small {
                        width: 220px !important;
                    }

                    >>>.element-select1 .el-input--small {
                        width: 168px !important;
                    }
                }

                .search-right {
                    flex-x();

                    .search-btn {
                        solid-btn(100px, 32px);
                        margin-right: 16px;
                    }

                    .reset-btn {
                        solid-btn(100px, 32px);
                    }
                }
            }
        }
    }
</style>