<template>
    <div class="content">
        <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.value1"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <el-date-picker
                                class="date-select"
                                v-model="filter.value2"
                                format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                            <div class="date-show">
                                <div class="date">
                                    {{ filter.value1 | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                                <div class="line"></div>
                                <div class="date">
                                    {{ filter.value2 | dateFormat }}
                                    <i class="el-icon-date"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search-right">
                    <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="date" label="序号" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="city"
                        label="受理编号"
                        width="220"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="申请编号"
                        width="220"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="zip"
                        label="申请人姓名"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="idcard"
                        label="证件号码"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="idcard"
                        label="授权书编号"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="sex"
                        label="申请时间"
                        width="100"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="开始年审时间"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="审核通过时间"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="在办业务状态"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="年审方式"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="核对状态提醒"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="年度复核结果"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="下次年审日期"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="保障人口数"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="申请人口数"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="户籍所在地"
                        width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="申请人类型"
                        width="180"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="保障方式"
                        width="120"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="checkFun(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>
    import dayjs from "dayjs";
    export default {
        data() {
            return {
                filter: {
                    name: "",
                    idcard: "",
                    create: "",
                    value1: "",
                    value2: "",
                },
                applyList: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        sex: 10,
                        province: "上海",
                        city: "X3705100100120210000",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 10,
                        idcard: 370521198601030416,
                    },
                ],
                size: 20, //每页展示的条数
                totalSize: 0, //一共多少条
                page: 1, //当前页
            };
        },
        filters: {
            dateFormat(date) {
                if (!date) return "";
                let day = dayjs(date);
                return day.format("YYYY-MM-DD");
            },
        },
        created() {
            // this.getList();
        },
        methods: {
            checkFun() {
                this.$router.push({
                    path: "./userInfo",
                    query: {
                        id: "年度复核",
                    },
                });
            },
            //筛选
            searchFun() {
                this.page = 1;
                this.getList();
            },
            //清空筛选条件，重新拉list接口
            clearFilter() {
                this.filter = {
                    oid: "",
                    sid: "",
                    uid: "",
                    spu_id: "",
                    status: [],
                    time: "",
                    delivery: "",
                }; // 筛选条件
                this.currentPage = 1;
                this.getList();
            },
            getList() {
                let data = {
                    page: this.page,
                    page_size: this.size,
                };
                this.httpGet(this.$root.api_logList, data).then(
                    (res) => {
                        this.applyList = res.list;
                        this.totalSize = res.total;
                    },
                    (res) => {
                        this.$message.error(res);
                    }
                );
            },
            // 改变当前页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            //改变每页多少条
            handleSizeChange(val) {
                this.size = val;
                this.searchFun();
                console.log(`每页 ${val} 条`);
            },
        },
    };
</script>

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

    .content {
        .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);
                    }
                }
            }
        }
    }
</style>