<template>
    <div class="admin-News">
        <div class="top">
            <div class="search-area">
                <el-input class="search-item" v-model="title" placeholder="请输入标题"></el-input>

                <el-input class="search-item" v-model="keywords" placeholder="请输入关键字"></el-input>

                <mySelect
                        class="search-item"
                        label="name"
                        id="newsClassifyId"
                        placeholder="请选择新闻分类"
                ></mySelect>

                <el-button class="btn-search" size="medium" type="primary" @click="handleSearch">查询</el-button>
            </div>
            <div>
                <el-button size="medium" @click="handleAddNews">新增</el-button>
                <el-button size="medium" type="primary" @click="handleDeleteNews">删除
                </el-button>
            </div>
        </div>
        <myTable
                class="my-table"
                @editor="handleEditor"
                @delete="handleDelete"
                @select-change="handleSelectChange"
        />
        <myPagination
                class="my-Pagination"
                :pageSizes="defaultPageSizes"
                @size-change="handleSizeChange"
                @current-page="handleCurrentPage"
        />
    </div>
</template>

<script>
    import myPagination         from './components/Pagination';
    import myTable              from './components/Table';
    import * as HYZXApi         from '@/api/news';
    import * as NewsClassifyApi from '@/api/newsClassify';
    import mySelect             from './components/Select';
    import Vue                  from 'vue';

    const CHANGEPAGECODE = {
        add:    'add',
        editor: 'editor',
    };
    const selectData = {
        options:        [],
        newsClassifyId: null,
        placeholder:    '请选择新闻资讯分类',
    };
    const tableData = {
        myData: [],
    };
    const pagination = {
        page:  1,
        size:  10,
        total: 0,
    };

    const defaultPageSizes = [10, 20, 30, 40];
    const tableServiceData = Vue.observable(tableData);
    const selectServiceData = Vue.observable(selectData);
    const paginationServiceData = Vue.observable(pagination);

    export default {
        name:       'Hangyexuzhi',
        provide:    {
            tableServiceData,
            paginationServiceData,
            selectServiceData,
        },
        data() {
            return {
                defaultPageSizes: defaultPageSizes,
                curIiId:          null,
                tableSelectData:  [],
                title:            '',
                keywords:         '',
            };
        },
        components: {
            myPagination,
            myTable,
            mySelect,
        },
        computed:   {
            myPage() {
                return paginationServiceData.page;
            },
            mySize() {
                return paginationServiceData.size;
            },
            myTotal() {
                return paginationServiceData.total;
            },
            newsClassifyId() {
                return selectServiceData.newsClassifyId;
            },
        },
        methods:    {

            handleSearch() {
                this.getNewsData();
            },
            handleEditor(data) {
                this.curIiId = data.iiId;
                this.changePage(CHANGEPAGECODE.editor);
            },
            handleDelete(data) {
                const opt = {
                    iiIds: [data.iiId],
                };
                this.getNewsDelete(opt);
            },
            handleSelectChange(data) {
                this.tableSelectData = data;
            },
            handleAddNews() {
                this.changePage(CHANGEPAGECODE.add);
            },
            handleSizeChange(size) {
                paginationServiceData.size = size;
                this.getNewsData();
            },
            handleCurrentPage(page) {
                paginationServiceData.page = page;
                this.getNewsData();
            },
            async handleDeleteNews() {
                if (!this.tableSelectData.length) {
                    this.$message.warning('请选择至少一条需要删除的数据');
                    return;
                }
                const opt = {
                    iiIds: [...this.tableSelectData],
                };
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await HYZXApi.getNewsDelete(opt);
                    loading.close();
                    if (res.code === 0 && res.data) {
                        // 删除成功重置选择状态
                        this.tableSelectData = [];
                        const newOpt = this.getOption();
                        const res = await HYZXApi.getNewsList(newOpt);
                        if (res.code === 0) {
                            this.initPageData(res.data);
                        }
                        loading.close();
                    }
                } catch (err) {
                    loading.close();
                }
            },
            getOption() {
                const opt = {
                    page:           this.myPage,
                    size:           this.mySize,
                    keyword:        this.keywords,
                    title:          this.title,
                    newsClassifyId: this.newsClassifyId,
                };
                return opt;
            },
            changePage(code) {
                switch (code) {
                    case CHANGEPAGECODE.add:
                        this.$router.push({ name: 'newsConfig', query: { code: 'add' } });
                        break;
                    case CHANGEPAGECODE.editor:
                        this.$router.push({ name: 'newsConfig', query: { code: 'editor', iiId: this.curIiId } });
                        break;
                    default:
                        break;
                }
            },
            // 获取 数据
            async getNewsData() {
                const opt = this.getOption();
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });

                try {
                    const res = await HYZXApi.getNewsList(opt);
                    if (res.code === 0) {
                        // 渲染页面
                        this.initPageData(res.data);
                    }
                    loading.close();
                } catch (e) {
                    loading.close();
                }
            },
            // 删除
            async getNewsDelete(opt) {
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await HYZXApi.getNewsDelete(opt);
                    loading.close();
                    if (res.code === 0 && res.data) {
                        const res = await HYZXApi.getNewsList(opt);
                        if (res.code === 0) {
                            this.initPageData(res.data);
                        }
                        loading.close();
                    }
                } catch (err) {
                    loading.close();
                }
            },
            // 渲染页面
            initPageData(listData) {
                tableServiceData.myData = listData.data;
                paginationServiceData.total = listData.total;
            },
            // 修正初始化
            async initPageService() {
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    // 新闻资讯分类
                    const { data: newsClassifyArr } = await NewsClassifyApi.getNewsClassifySearch();
                    selectServiceData.options = newsClassifyArr;

                    // 新闻资讯列表
                    const opt = this.getOption();
                    const { code, data } = await HYZXApi.getNewsList(opt);
                    if (code === 0) {
                        // 渲染页面
                        this.initPageData(data);
                    }

                    loading.close();
                } catch (e) {
                    loading.close();
                }
            },
            clearPageData() {
                selectServiceData.options = [];
                selectServiceData.newsClassifyId = null;
                tableServiceData.myData = [];
                paginationServiceData.page = 1;
                paginationServiceData.size = 10;
                paginationServiceData.total = 0;
            },
        },
        created() {
            this.initPageService();
        },
        beforeDestroy() {
            this.clearPageData();

        },
    };
</script>

<style lang="scss" scoped>

    .admin-News {
        padding: 20px;

        .my-table {
            height: calc(100vh - 262px) !important;
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .btn-search {
                /*margin-left: 20px;*/
            }

            .search-area {
                display: flex;

                .search-item {
                    width: 180px;
                    margin-right: 20px;
                }
            }
        }

        .my-Pagination {
            margin-top: 20px;
        }
    }
</style>