<template>
    <div class="content">
        <div class="search-styl">
            <div class="title-styl">当前环节：保障申请审核市局受理</div>
            <div class="search-content">
                <div class="search-left">
                    <p>申请所在地： 山东省</p>
                    <el-select
                        v-model="filter.city"
                        size="small"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in cityData"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <p></p>
                    <el-select
                        v-model="filter.area"
                        size="small"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in areaData"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <p></p>
                    <el-select
                        v-model="filter.place1"
                        size="small"
                        placeholder="请选择"
                        class="element-select"
                    >
                        <el-option
                            v-for="(item, index) in areaData"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <p></p>
                    <el-select
                        v-model="filter.place2"
                        size="small"
                        placeholder="请选择"
                        class="element-select1"
                    >
                        <el-option
                            v-for="(item, index) in areaData"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </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="name"
                        label="业务提醒"
                        width="120"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="province"
                        label="业务状态"
                        width="120"
                        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="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="sex"
                        label="性别"
                        width="50"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="zip"
                        label="工作单位"
                        width="220"
                        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
                        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="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="保障面积(m²)"
                        width="120"
                        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>
    export default {
        data() {
            return {
                filter: {
                    city: "",
                    area: "",
                    place1: "",
                    place2: "",
                },
                applyList: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        sex: "男",
                        province: "上海",
                        city: "X3705100100120210000",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: "保障申请审核",
                        idcard: 370521198601030416,
                    },
                ],
                cityData: [
                    {
                        id: 1,
                        name: "东营市",
                    },
                    {
                        id: 2,
                        name: "烟台市",
                    },
                    {
                        id: 3,
                        name: "威海市",
                    },
                ],
                areaData: [
                    {
                        id: 1,
                        name: "区东营市",
                    },
                    {
                        id: 2,
                        name: "区烟台市",
                    },
                    {
                        id: 3,
                        name: "区威海市",
                    },
                ],
                size: 20, //每页展示的条数
                totalSize: 0, //一共多少条
                page: 1, //当前页
            };
        },
        created() {
            // this.getList();
        },
        methods: {
            checkFun(val) {
                this.$router.push({
                    path: "./userInfo",
                    query: {
                        id: "申请审核",
                        isShow: true,
                    },
                });
            },
            //筛选
            searchFun() {
                this.page = 1;
                this.getList();
            },
            //清空筛选条件，重新拉list接口
            clearFilter() {
                this.filter = {
                    city: "",
                    area: "",
                    place1: "",
                    place2: "",
                }; // 筛选条件
                this.page = 1;
                this.getList();
            },
            getList() {
                let data = {
                    region: 111,
                    page: this.page,
                    page_size: this.size,
                };
                this.httpGet(this.$root.api_applyList, 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;
                console.log(`每页 ${val} 条`);
            },
        },
    };
</script>

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

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

            .title-styl {
                font-size: 16px;
                margin-bottom: 20px;
            }

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

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

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

                    p {
                        margin-right: 10px;
                    }

                    >>>.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>