<template>
    <div class="you-qing-lian-jie">
        <div class="yqlj-search">
            <searchArea
                    ref="searchArea"
                    @search="handleSearch"
                    @add="openAddDialog"
                    @delete="handleDelete"
            ></searchArea>
        </div>
        <myTable
                class="yqlj-table"
                :data="tableData"
                @editor="handleOpenEditor"
                @select-change="handleSelectChange" />
        <myPagination
                action="searchOpt"
                ref="myPagination"
                class="yqlj-pagination"
                @size-change="handleSizeChange"
                @current-page="handleCurrentPage" />

        <!--    弹窗 新增   -->
        <addYouQingLink ref="addYouQingLink" @add-Link="handleAddLink"></addYouQingLink>

        <!--    弹窗 编辑   -->
        <editorYouQingLink
                ref="edditorYouQingLink"
                @get-data="handleGetLinkInfoData"
                @editor-link="handleEditorLink"></editorYouQingLink>
    </div>
</template>

<script>
    import searchArea        from './components/searchArea';
    import myTable           from './components/myTable';
    import addYouQingLink    from './components/addYouQingLink';
    import editorYouQingLink from './components/editorYouQingLink';
    import myPagination      from '@/components/@Mta/components/MyPagination';
    import * as YQLJService  from '@/api/youqinglianjie';
    import * as comminUtil   from '@/utils/admin/tools';

    export default {
        name:       'index',
        components: {
            searchArea,
            myTable,
            myPagination,
            addYouQingLink,
            editorYouQingLink,
        },
        data() {
            return {
                searchOpt:       {},
                tableData:       [],
                userId:          null,
                tableSelectData: [],
                selectRow:       [],
            };
        },
        computed:   {
            page:             {
                get() {
                    return this.$refs.myPagination.page;
                },
                set(page) {
                    this.$refs.myPagination.page = page;
                },
            },
            size:             {
                get() {
                    return this.$refs.myPagination.size;
                },
                set(size) {
                    this.$refs.myPagination.size = size;
                },
            },
            showLinkDialog:   {
                get() {
                    this.$refs.addYouQingLink.addDialogVisit;
                },
                set(data) {
                    this.$refs.addYouQingLink.addDialogVisit = data;
                },
            },
            showEditorDialog: {
                get() {
                    return this.$refs.edditorYouQingLink.editorDialogVisit;
                },
                set(data) {
                    this.$refs.edditorYouQingLink.editorDialogVisit = data;
                },
            },
        },
        methods:    {
            getOption() {
                const pagination = { page: this.page, size: this.size };
                const opt = Object.assign({}, this.searchOpt, pagination);
                return opt;
            },
            /**
             * 查询
             */
            async handleSearch(data) {
                this.searchOpt = data;
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    await this.httpGetLinksList();
                    this.showLinkDialog = false;
                    loading.close();
                } catch (e) {
                    loading.close();
                }

            },
            /**
             * 新增
             */
            async handleAddLink(data) {
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await this.httpGetLinksAdd(data);
                    if (res.code === 0 && res.data) {
                        await this.httpGetLinksList();
                        this.showLinkDialog = false;
                        loading.close();
                    }
                } catch (e) {
                    this.showLinkDialog = false;
                    loading.close();
                }
            },
            /**
             * 打开
             */
            openAddDialog() {
                this.showLinkDialog = true;
            },
            /**
             * 编辑
             */
            handleOpenEditor(data) {
                this.showEditorDialog = true;
                this.selectRow = data;
            },
            /**
             * 编辑
             */
            async handleEditorLink(data) {
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {

                    const res = await this.httpGetLinksUpdate(data);
                    if (res.code === 0) {
                        this.showEditorDialog = false;
                        this.$message.success('更新成功');
                        await this.httpGetLinksList();
                    }
                    loading.close();
                } catch (e) {
                    loading.close();
                }
            },
            /**
             * 详情
             */
            async handleGetLinkInfoData() {
                const res = await this.httpGetLinksInfo();
                if (res.code === 0) {
                    this.$refs.edditorYouQingLink.setInfoData(res.data);
                }
            },
            /**
             * 删除
             */
            async handleDelete() {
                if (!this.tableSelectData.length) {
                    this.$message.warning('请选择要删除的友情链接');
                    return false;
                }
                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                try {
                    const res = await this.httpGetLinksDelete();
                    if (res.code === 0 && res.data) {
                        // 删除成功重置选择状态
                        this.tableSelectData = [];
                        await this.httpGetLinksList();
                        this.showLinkDialog = false;
                        loading.close();
                    }
                } catch (e) {
                    loading.close();
                }
            },
            /**
             * table选中
             */
            handleSelectChange(data) {
                this.tableSelectData = data;
            },
            /**
             * 分页功能
             */
            async handleSizeChange(size) {
                this.size = size;
                await this.httpGetLinksList();
                this.showLinkDialog = false;
            },
            async handleCurrentPage(page) {
                this.page = page;
                await this.httpGetLinksList();
                this.showLinkDialog = false;

            },

            /**
             * 渲染页面
             */
            initPageData(listData) {
                this.tableData = listData.data;
                this.$refs.myPagination.total = listData.total;
            },

            /** Http 请求 */
            async httpGetLinksList() {
                const opts = this.getOption();
                const myData = await YQLJService.getLinksList(opts);
                this.initPageData(myData.data);
                return myData;
            },
            async httpGetLinksAdd(data) {
                const opt = Object.assign({}, data, { userId: this.userId });
                const myData = await YQLJService.getLinksAdd(opt);
                return myData;
            },
            async httpGetLinksUpdate(data) {
                const opt = Object.assign({}, data, { userId: this.userId, hlId: this.selectRow.hlId });
                const myData = await YQLJService.getLinksUpdate(opt);
                return myData;
            },
            async httpGetLinksInfo() {
                const opt = { hlId: this.selectRow.hlId };
                const myData = await YQLJService.getLinksInfo(opt);
                return myData;
            },
            async httpGetLinksDelete() {
                const opt = {
                    hlIds: [...this.tableSelectData],
                };
                const myData = await YQLJService.getLinksDelete(opt);
                return myData;
            },

        },
        created() {
            const userAuth = comminUtil.getUserAuth();
            this.userId = userAuth && userAuth.userId ? userAuth.userId : null;
        },
        mounted() {
            this.httpGetLinksList();
        }
    };
</script>

<style lang="scss" scoped>
    .you-qing-lian-jie {
        padding: 20px;
    }

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

    .yqlj-pagination {
        margin-top: 20px;
    }
</style>