<template>
    <div class="admin-Registration-management">
        <!--   搜索     -->
        <SearchArea
                @search="handleSearch"
                @exportList="handleExportList"
        ></SearchArea>
        <!--   列表     -->
        <MtaTable
                class="mta-Table"
                @audit="handleAudit"
                @unAudit="handleUnAudit"
        ></MtaTable>
        <!--   分页     -->
        <MtaPagination class="my-Pagination"
                       :pageSizes="defaultPageSizes"
                       @size-change="handleSizeChange"
                       @current-page="handleCurrentPage"></MtaPagination>
    </div>
</template>

<script>
    import SearchArea       from './components/SearchArea';
    import MtaTable         from './components/Table';
    import MtaPagination    from './components/Pagination';
    import * as commonTools from '@/utils/admin/tools';
    import Vue              from 'vue';
    import * as Develop     from '@/api/develop';

    const pagination = {
        page:  1,
        size:  10,
        total: 0,
    };
    const tableData = {
        myData: [],
    };
    const defaultPageSizes = [10, 20, 30, 40];
    const paginationServiceData = Vue.observable(pagination);
    const tableServiceData = Vue.observable(tableData);

    export default {
        name:       'index',
        components: {
            SearchArea,
            MtaTable,
            MtaPagination,
        },
        provide:    {
            tableServiceData,
            paginationServiceData,
        },
        data() {
            return {
                defaultPageSizes: defaultPageSizes,
                searchOpt:        {},
                userId:           null,
            };
        },
        methods:    {
            async handleExportList(data) {
                const opt = {
                    startTime: data.startTime,
                    endTime:   data.endTime,
                    state:     data.state,
                };
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await Develop.getDevelopExport(opt);
                    if (res.code === 0) {
                        window.location.href = res.data;
                        loading.close();
                    }
                } catch (e) {
                    loading.close();
                }

            },
            async handleAudit(data) {
                const opt = {
                    deId:   data.deId,
                    userId: this.userId,
                };
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });

                try {
                    const res = await Develop.getDevelopHandle(opt);
                    if (res.code === 0 && res.data) {
                        // 更新table
                        this.getDevelopListData();
                    }
                    loading.close();
                } catch (e) {
                    loading.close();
                }
            },
            async handleUnAudit(data) {

                const opt = {
                    deId:   data.deId,
                    userId: this.userId,
                };
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });

                try {
                    const res = await Develop.getDevelopUnhandled(opt);
                    if (res.code === 0 && res.data) {
                        // 更新table
                        this.getDevelopListData();
                    }
                    loading.close();
                } catch (e) {
                    loading.close();
                }
            },
            handleSearch(data) {
                paginationServiceData.page = 1;
                this.searchOpt = data;
                this.getDevelopListData(data);

            },
            handleSizeChange(val) {
                paginationServiceData.size = val;
                this.getDevelopListData();
            },
            handleCurrentPage(val) {
                paginationServiceData.page = val;
                this.getDevelopListData();
            },
            async getDevelopListData() {
                const opt = Object.assign({}, this.searchOpt, paginationServiceData, { userId: this.userId });
                delete opt.total;

                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await Develop.getDevelopList(opt);
                    if (res.code === 0) {
                        this.updateTable(res.data);
                    }
                    loading.close();
                } catch (e) {
                    console.log('请求异常接口：getDevelopListData');
                    loading.close();
                }
            },
            updateTable(data) {
                console.log(data);
                tableServiceData.myData = data.data;
                paginationServiceData.total = data.total;
            },
            clearData() {
                paginationServiceData.page = 1;
                paginationServiceData.size = 10;
                paginationServiceData.total = 0;
                tableServiceData.myData = [];
            },
        },
        created() {
            const userAuth = commonTools.getUserAuth();
            this.userId = userAuth && userAuth.userId;
        },
        beforeDestroy() {
            this.clearData();
        },
    };
</script>

<style lang="scss" scoped>
    .admin-Registration-management {
        padding: 20px;

        .mta-Table {
            margin-top: 20px;
            height: calc(100vh - 274px) !important;
        }

        .my-Pagination {
            margin-top: 20px;
        }

    }
</style>