<template>
    <div class="content-styl" v-loading="loadingData">
        <div class="search-styl">
            <div class="search-content">
                <div class="search-left">
                    <div class="search-card">
                        <p>输入姓名：</p>
                        <el-input
                            placeholder="请输入姓名"
                            v-model="filter.name"
                            size="small"
                        />
                    </div>
                    <div class="search-card">
                        <p>输入身份证号：</p>
                        <el-input
                            placeholder="请输入证件号码"
                            v-model="filter.idcard"
                            size="small"
                        />
                    </div>
                    <div class="search-card">
                        <p>审核时间：</p>
                        <div class="date-item">
                            <el-date-picker
                                class="date-select"
                                v-model="filter.start"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <el-date-picker
                                class="date-select"
                                v-model="filter.end"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <div class="date-show">
                                <div class="date">
                                    {{ filter.start | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                                <div class="line"></div>
                                <div class="date">
                                    {{ filter.end | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search-right">
                    <div class="search-btn" @click="backFun()">返回</div>
                    <div class="search-btn" @click="searchFun()">查询</div>
                    <div class="reset-btn" @click="clearFilter()">重置</div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="table-content">
                <el-table
                    :data="applyList"
                    :stripe="true"
                    border
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#F5F7FE',
                        color: '#606266',
                    }"
                    :cell-style="{ 'text-align': 'center' }"
                >
                    <el-table-column
                        prop="id"
                        label="序号"
                        align="center"
                        width="100"
                    >
                    </el-table-column>
                    <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="zip"
                        label="查询内容"
                        align="center"
                    ></el-table-column> -->
                    <el-table-column
                        prop="created"
                        label="审核日期"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="btn-styl" @click="lookInfo(scope.row)">
                                查看
                            </div>
                        </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>
    import dayjs from "dayjs";
    export default {
        data() {
            return {
                filter: {
                    name: "",
                    idcard: "",
                    start: "",
                    end: "",
                },
                applyList: [],
                size: 20, //每页展示的条数
                page: 1, //当前页
                totalSize: 0, //一共多少条
                loadingData: false,
            };
        },
        filters: {
            //时间格式化
            dateFormat(date) {
                if (!date) return "选择日期";
                let day = dayjs(date);
                return day.format("YYYY-MM-DD");
            },
        },
        created() {},
        mounted() {
            this.getList();
        },
        methods: {
            lookInfo(val) {
                this.$router.push({
                    path: "/userInfo",
                    query: {
                        id: val.id,
                        isCome: "report",
                    },
                });
            },
            backFun() {
                this.$router.back();
            },
            //筛选
            searchFun() {
                this.page = 1;
                this.getList();
            },
            //清空筛选条件，重新拉list接口
            clearFilter() {
                this.filter = {
                    name: "",
                    idcard: "",
                    start: "",
                    end: "",
                }; // 筛选条件
                this.applyList = [];
            },
            getList() {
                this.loadingData = true;
                let data = {
                    ...this.filter,
                    start: this.filter.start
                        ? dayjs(this.filter.start).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                    end: this.filter.end
                        ? dayjs(this.filter.end).format("YYYY-MM-DD HH:mm:ss")
                        : "",
                    current: this.page,
                    size: this.size,
                };
                this.httpGet(this.$root.api_reportList, data)
                    .then((res) => {
                        this.applyList = res.records;
                        this.totalSize = res.total;
                        this.loadingData = false;
                    })
                    .catch((err) => {
                        this.loadingData = false;
                        console.log("接口报错", err);
                    });
            },
            // 改变当前页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            //改变每页多少条
            handleSizeChange(val) {
                this.size = val;
                this.getList();
                console.log(`每页 ${val} 条`);
            },
        },
    };
</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;
                        }

                        .date-item {
                            position: relative;

                            >>>.el-date-editor {
                                width: 172px;
                                height: 32px;
                                margin-right: 16px;
                            }

                            >>>.el-input__inner {
                                width: 172px;
                                height: 32px;
                            }

                            .date-select {
                                opacity: 0;
                                z-index: 10;
                                cursor: pointer;

                                input {
                                    cursor: pointer;
                                }
                            }

                            .date-show {
                                width: 360px;
                                height: 32px;
                                line-height: 32px;
                                position: absolute;
                                cursor: pointer;
                                top: 0;
                                left: 0;
                                flex-x();

                                .line {
                                    width: 8px;
                                    height: 1px;
                                    background: #999999;
                                }

                                .date {
                                    width: 172px;
                                    height: 32px;
                                    line-height: 32px;
                                    padding-left: 12px;
                                    text-align: left;
                                    box-sizing: border-box;
                                    border: 1px solid #DCDFE6;
                                    color: gray9;
                                    position: relative;

                                    i {
                                        color: btn-color;
                                        font-size: 18px;
                                        position: absolute;
                                        right: 12px;
                                        top: 50%;
                                        transform: translateY(-50%);
                                    }
                                }
                            }
                        }
                    }

                    >>>.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);
                    }
                }
            }
        }

        .main {
            .table-content {
                .btn-styl {
                    hollow-btn(60px, 28px);
                    margin: auto;
                }
            }
        }
    }
</style>