<template>
    <div class="page-body">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name"
                        label="分组名称" @clear="resetSearch" maxlength="20" />
                </div>
            </div>
        </div>
        <div class="page-content">
            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
                separator="none" :data="dataList" :columns="columns">
                <template v-slot:top="props">
                    <div class="col-2 q-table__title">分组列表</div>
                    <q-space />
                    <div class="page-option">
                        <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增分组"
                            @click="EditCategory(null)" />
                    </div>
                </template>

                <template v-slot:body-cell-CateId="props">
                    <q-td :props="props">
                        <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                            @click="EditCategory(props.row)" />
                        <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400;" label="删除"
                            @click="deleteCategory(props.row)" />
                    </q-td>
                </template>
                <template v-slot:bottom>
                    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary"
                        :max="msg.PageCount" :input="true" @input="changePage" />
                </template>
            </q-table>
        </div>
        <q-dialog v-model="isShow" persistent>
            <q-card style="width: 520px; max-width: 80vw;">
                <q-card-section>
                    <div class="text-h6">新增分组</div>
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">

                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Name" label="分组名称"
                        :rules="[val => !!val || '请输入分组名称']" ref="Name" />
                    <q-input filled clearable standout="bg-primary text-white" v-model="addMsg.Sort" label="分组排序"
                        style="margin-top: 20px;"   :rules="[val => !!val || '请输入分组排序']" ref="Sort"/>

                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="isShow = false" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="submit()" />
                </q-card-actions>
            </q-card>
        </q-dialog>
    </div>
</template>

<script>
    import {
        getWeChatMediumGroupPageList,
        setWeChatMediumGroup,
        delWeChatMediumGroup
    } from '../../api/system/wechat';
    const addobj = { Id: 0, Name: '', Sort: 1 }
    export default {
        meta: {
            title: "分组管理"
        },

        data() {
            return {
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    rowsPerPage: 15,
                    Name: "", //系列名称
                },
                currentUrl: "",
                dataList: [],
                keyWords: '',
                isShow: false,
                loading: true,
                columns: [{
                    name: 'Id',
                    label: 'ID',
                    field: 'Id',
                    align: 'left'
                },
                {
                    name: 'Sort',
                    label: '排序',
                    field: 'Sort',
                    align: 'left'
                },
                {
                    name: 'Name',
                    label: '分组名称',
                    field: 'Name',
                    align: 'center'
                },
                {
                    name: 'UpdateByName',
                    label: '创建人',
                    field: 'UpdateByName',
                    align: 'center'
                },
                {
                    name: 'UpdateTime',
                    label: '创建时间',
                    field: 'UpdateTime',
                    align: 'center'
                },
                {
                    name: 'CateId',
                    label: '操作',
                    field: 'CateId'
                }
                ],
                addMsg: Object.assign({}, addobj)
            }
        },

        mounted() {
            this.getcategorypage()
        },
        methods: {
            //重新查询
            resetSearch() {
                this.msg.pageIndex = 1;
                this.getcategorypage();
            },
            changePage(val) {
                this.msg.pageIndex = val;
                this.getcategorypage()
            },
            //删除系列
            deleteCategory(item) {
                let delMsg = {
                    MediumId: item.Id,
                };
                this.$q.dialog({
                    title: '提示信息',
                    message: '是否确定删除该分组？',
                    cancel: true,
                    persistent: true,
                    ok: "确定",
                    cancel: "取消",
                }).onOk(() => {
                    delWeChatMediumGroup(delMsg).then(res => {
                        if (res.Code == 1) {
                            this.$q.notify({
                                icon: 'iconfont icon-chenggong',
                                color: 'accent',
                                timeout: 2000,
                                message: '删除成功！',
                                position: 'top'
                            })
                            this.getcategorypage();
                        }
                    })
                }).onCancel(() => {

                });
            },
            //刷新页面
            refreshPage() {
                this.getcategorypage();
            },
            //获取课程系列分页列表
            getcategorypage() {
                this.loading = true;
                getWeChatMediumGroupPageList(this.msg).then(res => {
                    this.loading = false;
                    this.dataList = res.Data.PageData;
                    this.msg.PageCount = res.Data.PageCount
                })
            },
            //新增修改课程系列
            EditCategory(obj) {
                if (obj) {
                    this.addMsg.Id = obj.Id
                    this.addMsg.Name = obj.Name
                    this.addMsg.Sort = obj.Sort
                } else {
                    this.addMsg = Object.assign({}, addobj)
                }
                this.isShow = true;
            },
            submit() {
                this.$refs.Name.validate();
                this.$refs.Sort.validate();
                
                if (!this.$refs.Name.hasError&& !this.$refs.Sort.hasError) {
                    setWeChatMediumGroup(this.addMsg).then(res => {
                        if (res.Code == 1) {
                            this.$q.notify({
                                icon: 'iconfont icon-chenggong',
                                color: 'accent',
                                timeout: 2000,
                                message: '数据保存成功！',
                                position: 'top'
                            })
                            this.resetSearch()
                            this.isShow = false;
                        }
                    })
                }
            }
        }
    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>