<template>
    <div class="admin-registration-search">
        <div>
            <el-date-picker
                    v-model="startTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始日期">
            </el-date-picker>
            <span class="line">—</span>
            <el-date-picker
                    v-model="endTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择开始日期">
            </el-date-picker>

            <el-select class="select-state" v-model="state" placeholder="请选择状态">
                <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-button class="btn-search" size="medium" @click="search">查询</el-button>
        </div>
        <div>
            <el-button size="medium" type="primary" @click="exportResisterData">导出</el-button>
        </div>
    </div>
</template>

<script>
    const status = [
        {
            value: -1,
            label: '全部',
        },
        {
            value: 0,
            label: '未处理',
        },
        {
            value: 1,
            label: '已处理',
        },
    ];
    export default {
        name:    'SearchArea',
        data() {
            return {
                startTime: null,
                endTime:   null,
                status:    status,
                state:     -1,
            };
        },
        methods: {
            search() {
                const opt = {
                    startTime: this.startTime,
                    endTime:   this.endTime,
                    state: this.state,
                };
                this.$emit('search', opt);
            },
            exportResisterData() {
                const opt = {
                    startTime: this.startTime,
                    endTime:   this.endTime,
                    state: this.state,
                };
                this.$emit('exportList', opt)
            },
        },
        mounted() {
            this.search();
        }
    };
</script>

<style lang="scss" scoped>
    .admin-registration-search {
        display: flex;
        justify-content: space-between;

        .select-state {
            margin-left: 20px;
        }

        .line {
            margin: 0 20px;
        }

        .btn-search {
            margin-left: 20px;
        }
    }
</style>