<style lang="less" scoped>
@import (reference) "../../theme/index.less";
@background-color: #fff;
@title-color: #101317;
.root-function {
  width: 100%;
  height: 100%;
}
.group-selected{
    color: lightseagreen
}
.header-panel{
    // border-bottom: 1px solid #d8dde8;
    height: 44px;
    color: @title-color;
    background-color: @background-color;
    padding-left: 18px;
    line-height: 44px;
}
.createFormModal-function {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0; 
  }
}
.group{
    width:15%;
    height:100%;
    float:left;
    background: white;
}
.dcq{
    float:left;
    width: 85%;
    height:100%;
}
.dcb{
        height:100%;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 30px;
}
.list-group-item {
    height: 40px;
    background: white;
    margin: 5px;
    padding-top: 15px;
    border-bottom: 1px #eeeeee solid;

    cursor: pointer;
}
// .list-group-item i {

//     height: 45px;
//     background: #fff;
//     margin: 5px;
//     padding-top: 14px;
//     border-bottom: 1px solid #eee;
//     margin-left: 15px;

// }
.badge{
    display: none;
}
.button-select-group{
    width:200px;
}
 .end-li{
    float: right;
    width:10px;
    margin:1px;
    padding:6px;
    cursor: pointer;
    margin-top:-12px;
  }
  .end{
    float: right;
    margin-right: 15px;

    cursor: pointer;
  }
.group-header{
    height: 80px;
    padding: 10px;
    border-bottom: 1px solid #e2e2e2;
    background: #fff;
    align-items: center;

    .title{
        margin-top: 12px;
        color:#101317;
        margin-left: 2px;
    }
    .btn{
        padding-top: 20px;
        float:right;
    }
    .btn-item{
        // margin-left:-8px;
        //  margin-right:-8px;
        margin:3px;
    }
}
.action-bar-holder{
    height:80px;
}
.action-bar{
    height:80px;
}
.div-inline{ 
    display:inline
    }
.search-input{
    display: inline-block;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    position: relative;
    cursor: text;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
    height:31px;
    padding-top:5px;
    padding-bottom:4px;
    width:238px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: -20px;
}
.search-input:focus,.search-input:hover{
    border-color: @primary-color;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(45,140,240,.2);
}
.search-icon{
    position: relative;
    z-index: 2;
    font-size: 20px;
    color: @border-color-base;
    left: 10px;
}
.search-button{
    position: relative;
    right: 30px;
    z-index: 2;
    font-size: 18px;
    color: @border-color-base;
}
.search-panel{
   // position: relative;
    min-width: 260px;
  
}


.sf-button-create{
    height: 30px;
    background: #409c9c;
    border: 1px solid #409c9c;
    border-radius: 4px;
    position: relative;
    // top: 1px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    margin-top: -3px;
    padding-top: 3px;
} 
.sf-content-panel{
    background-color: @background-color;
    // height: 85%;
    height: calc(~"100% - 44px");
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

.sf-root-panel{
    height: 100%;
}

.sf-header-panel{
    // border-bottom: 1px solid #d8dde8;
    height: 44px;
    color: @title-color;
    background-color: @background-color;
    padding-left: 18px;
    line-height: 44px;
}

.sf-vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
        top: 0;
    }

    .ivu-modal-content{
        background-color: transparent !important;
        box-shadow: none !important;
    }
}
</style>

<template>
    <div class="root-function">

        <transition-group
            z-index="1"
            :enter-active-class="enterActiveClass"
            :leave-active-class="leaveActiveClass">
             <div v-show="!modalEdit" key="list" style="height:100%;">
                <div :class="'dcb'">
                <div  class="header-panel" style="height:46px;background:rgba(255,255,255,1);border-bottom:#E8E8E8 solid 1px">
                     <div style="float:left;font-size: 16px">
                 
                    <span>{{title?title:"新闻管理"}}</span>
                </div>

                <div style="float:right;margin-right:30px;">
                    <Button type="primary"  class="button-create" 
                        v-if="true"  
                        v-on:click="showCreateArticle" style="    
                            background: white;
                            color: #409C9C;">
                        新建
                    </Button>
                </div>
                <div style="float: right;margin-right: -12px;line-height:0px;margin-top:8px;">
                        <div class="search-panel">
                            <Icon type="ios-search" class="search-icon" v-on:click="monitorKeyboard"></Icon>
                            <input :placeholder="'输入标题进行搜索'" v-model="searchValue"  @keyup.13="monitorKeyboard($event)" class="search-input"/>
                            <Button type="text"   @click="deleteSearchValue" class="search-button" style="padding:0px;line-height: inherit;" v-show="searchValue!= ''">
                                <i class="iconfont icon-shanchuliucheng" style="font-size:10px"/>
                            </Button>
                        </div>
                </div>
                </div>
                <div style="width:100%;height:100%;padding:12px">
                <div v-if="showGroup" style="width:100%;height:44px;border-bottom:1px solid #E8E8E8 ;background-color:white">
                    <div    @click="groupAllSelect" style="width:100px;height:42px;float:left;text-align:center">
                       <div style="height:42px;padding-top:19px;font-size:14px;font-weight:600;"><span :style="(!(checkedGroupId&&checkedGroupId!=''))?'color:#409C9C':''">全部</span></div>
                        <div v-if="!(checkedGroupId&&checkedGroupId!='')" style="height:1px;width:28px;background-color:#409C9C;margin-left:34px"></div>
                    </div>
                    <div   v-for="element in groupList" :key="element.orderField" @click="groupClick(element)" style="width:100px;height:42px;float:left;text-align:center">
                       <div style="height:42px;padding-top:13px;font-size:14px;font-weight:600;padding-top:19px;"> <span :style="element.selected?'color:#409C9C':''">{{element.title}}</span></div>
                        <div v-if="element.selected" style="height:1px;width:28px;background-color:#409C9C;margin-left:34px"></div>
                    </div>
                   <div style="width:50px;height:44px;text-align:center;padding-top:16px;float:right" @click="showGroupEdit"> <Icon class="iconfont icon-shezhi"></Icon></div>
                </div>
                <news-query :groupId="checkedGroupId" @batchPublish="publishNews" @batchDelete="discardNews" :functionGroup="functionGroup" :titleSearch="searchValue" :fieldDefine="listFieldDefine" :title="config.title" ref="newsQuery" @activity="onActivityEnroll" @rowClick="onRowClick" />
        </div>
        </div>
            </div>
            <div v-show="modalEdit" key="editor" style="height:100%;position:absolute;top:0px;left:0px;right:0px;">
                <div style="height:46px;width:100%;padding:7px;background:white;padding-right:12px;border-bottom:#E8E8E8 1px solid">       
                    <div style="margin-top:10px;float:left;width: calc(100% - 300px);overflow: hidden;padding-top:1px;text-overflow: ellipsis;" @click="goBackToList" > 
                        <div style="float:left;">
                            <i class="ivu-icon ivu-icon-ios-undo" style="font-size:20px; margin-left: 10px; margin-right: 10px;"/>
                        </div>
                        <div style="float:left; margin-top: 3px; margin-left: 4px;">
                            <span style="font-size:14px;font-family:'苹方-简 中黑体';font-weight:500;color:#555555;">{{this.edittingTitle}}</span>
                        </div>
                    </div>  
                    <i-button v-show="modalEditArticle" type="primary" size="large" @click.native="saveArticle" style="float:right;height:32px;font-size:13px">保存</i-button>
                    <i-button v-show="modalEditCarousel&&!modalEditArticle" type="primary" size="large" @click.native="saveCarousel" style="float:right;height:32px;font-size:13px">保存</i-button>  
                    <i-button  v-show="modalEditCarousel||modalEditArticle" :type="this.edittingPublished?'':'primary'" size="large"  @click.native="changePublished" style="float:right;margin-right:10px;height:32px;font-size:13px">{{this.edittingPublished?"已发布":"发布"}}</i-button>
                    <!-- <div v-show="modalEditArticle" style="float:right;margin-right:10px">
                        <Dropdown trigger="click">
                            <Button   class="sf-button-create" style="height:31px;background:white;font-size:12px;padding-top:4px;margin-top:1px;margin-left:4px "
                                >
                                <span style="color:#409C9C" @click.stop="previewMobile">预览</span>
                                <Icon type="ios-arrow-down" style="color:#409C9C"></Icon>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem @click.native="previewPC"><Icon size="14" type="ios-desktop-outline" />&nbsp;电脑</DropdownItem>
                                <DropdownItem @click.native="previewMobile"><Icon size="14" type="ios-phone-portrait" />&nbsp;手机</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div> -->
                </div>
                <ArticleEdit v-show="modalEditArticle"  v-if="modalEditArticleVIF" :fieldList="fieldList" :id="editId" @saveOk="cancelArticleEdit" ref="articleEditor"></ArticleEdit>
            </div>
        </transition-group>
 
        <Create :visibleMap="visibleMap" v-model="modal_create" :select="selectItem"  v-if="createVIF" @ok="refreshData">
        </Create>
        <CreateArticle :groupId="checkedGroupId" :fieldList="fieldList" v-model="modal_article_create" :functionGroup="config.function" :article="selectItem"  v-if="create_articleVIF" @ok="refreshData">
        </CreateArticle>
        <Modal v-model="dialogMessage.show" :title="dialogMessage.title" size="x-small" @on-ok="doBatch(dialogMessage.item)" :mask-closable="false" class-name="visitIndex">
            <div style="width: 100%; height: 88px;">
                <span style="font-size: 15px; width: 100%; line-height:88px; text-align:center; float:left;">{{dialogMessage.message}}</span>
            </div>
        </Modal>
        <!-- <bModal size="small"  title="分组编辑" v-if="groupEditVIF" v-model="groupEditShow">
            <div style="width:100%;height:35px;">
                <Button     class="button-batch" type="primary" v-on:click="createGroup"  style="height:26px;font-size:12px;padding-top:4px;margin-left:4px;margin-right:15px;float:right;">
                     添加
                 </Button>
            </div>
            <div style="height:280px; overflow:auto">
                <Table   ref="groupTable" :columns="groupTableColumns" :data="groupList"></Table>

            </div>
            <div style=" background-color:#e3e8ee;width:100%;height:1px;"></div>
        </bModal>
        <bModal title="移动至分组" @on-ok="moveToGroupOk"   v-model="moveToGroupShow">
           <Dropdown trigger="click" @on-click="onGroupSelected">
            <Button class="button-select-group">
                            {{this.selectedGroup.title}}
                <Icon type="md-arrow-dropdown"></Icon>
            </Button >
                <Dropdown-menu  slot="list">
                <Dropdown-item v-for="(item, index) in groupList" :key="index" 
                :name="item.id">{{ item.title }}</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
        </bModal>
        <bModal title="分组名称" @on-ok="saveGroupTitle"   v-model="editGroupTitleShow">
             <Input v-model="groupTitle" placeholder="分组名称" />
        </bModal>
        <Modal v-model="previewMobileShow" footer-hide class-name="sf-vertical-center-modal" :width="383" :z-index="999999999999999">
            <PreviewMobile ref="previewMobile" :contentId="editId"></PreviewMobile>
        </Modal> -->
    </div>
</template>

<script>
// import Helper from "../../commons/custom-query/helper";
import Create from './create.vue';
import CreateArticle from '../article/create.vue'
//import PreviewMobile from '../article/preview-mobile.vue'
//import Card from './card.vue';
import ArticleEdit from '../article/editor.vue';
//import draggable from 'vuedraggable'
import NewsQuery from './news-query.vue'
import news_Config from '../news-config.js';
const functionConfig = news_Config;

export default {
   
    data(){
        return {
            functionConfig:functionConfig,
            createVIF:false,
            modal_create:false,
            enrollTargetId:"",
            selectItem:{},
            
            searchValue:"",
            filterData:{
                published:"a1",
                valid:"b1",
                sendMsg:"c1"
            },
            //previewMobileShow:false,
            edittingTitle:"",
            edittingPublished:false,
            hideCarousel:false,
            showFilter:false,
            showGroup:false,
            enterActiveClass: "animated slideInRight",
            leaveActiveClass: "animated slideOutLeft",
            modal_carousel_create:false,
            create_carouselVIF:false,
            modal_article_create:false,
            create_articleVIF:false,
            modalEditArticleVIF:true,
            modalEdit:false,
            modalEditArticle:false,
            carouselPreviewVIF:false,
            carouselPreviewShow:false,
            modalEditCarousel:false,
            moveToGroupFlag:"",
            noGroupSelected:true,
            fieldList: null,
            previewId:"",
            functionGroup:"",
            filterDefine:{},
            editGroupTitleShow:false,
            dialogMessage: {
                show: false,
                message: "",
                title: "",
                type: "",
                data:""
            },
            //noGroupSelected :null,
            editingGroup:{},
            editId:"",
            checkedGroupId:null,
            groupTitle:"",
            groupEditMode:false,
            moveToGroupShow:false,
            sideModal:false,
            selectedGroup:{title:"请选择分组"},
            createConfig:{
                function:"abc"
            },
            groupList:[],
            visibleMap:{
                title:false
            },
            sels:[],
                editable: true,
                isDragging: false,
                delayedDragging: false,
            accept :false,
            listFieldDefine:{

            },
            groupEditShow:false,
            groupEditVIF:false,
            groupTableColumns:[
                    // {
                    //     type: 'selection',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: ' ',
                        key: 'action',
                        width: 150,
                        align: 'right',
                        render: (h, params) => {
                            if(this.groupList.length==1){
                                return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon-shanchu",
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            this.deleteGroup(params.row);
                                        }
                                    }
                                }, 'View')]);
                            }else if(params.index == 0){
                                return h('div', [
                                 h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon--Wdown-t",
                                    on: {
                                        click: () => {
                                             this.downGroup(params.row);
                                            // this.show(params.index)
                                        }
                                    }
                                }, 'move'),
                                h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon-shanchu",
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            this.deleteGroup(params.row);
                                        }
                                    }
                                }, 'View'),
                            ]);
                            }else if (params.index == this.groupList.length-1){
                                return h('div', [
                                 h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon--Wup-t",
                                    on: {
                                        click: () => {
                                           this.upGroup(params.row);
                                        }
                                    }
                                }, 'move'),
                                h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon-shanchu",
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            this.deleteGroup(params.row);
                                        }
                                    }
                                }, 'View')
                            ]);
                            }else {
                                return h('div', [
                                 h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon--Wup-t",
                                    on: {
                                        click: () => {

                                            this.upGroup(params.row);
                                        }
                                    }
                                }, 'move'),
                                 h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon--Wdown-t",
                                    on: {
                                        click: () => {
                                            this.downGroup(params.row);
                                        }
                                    }
                                }, 'move'),

                                h('Icon', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    class:"iconfont icon-shanchu",
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            this.deleteGroup(params.row);
                                        }
                                    }
                                }, 'View')
                            ]);
                            }
                            
                        }
                    }
                ],
            config: {
                "title":"公告",
                "function":functionConfig["publish-zone-news"],
                "group":true
            }
        }
    },
    mounted(){
        var that = this;
        this.initWithConfig(this.config);

    },
    props:{
            function: {
                type: String
            },
            // config:{
            //     type: Object,
            //     required: true,
            //     default: function() {
            //         return {};
            //     }
            // },
            title:{
                type:String
            }
    },
    watch:{
        "config":function(config){
            this.modalEdit = false;
            this.initWithConfig(this.config);
        },
        isDragging(newValue) {
            if (newValue) {
                this.delayedDragging = true;
                return;
            }
            this.$nextTick(() => {
                this.delayedDragging = false;
            });
        },
        modalEdit(newValue, oldValue){
            if(newValue){
                this.enterActiveClass = "animated slideInRight";
                this.leaveActiveClass = "animated slideOutLeft";
            }else{
                this.enterActiveClass = "animated slideInLeft";
                this.leaveActiveClass = "animated slideOutRight";
            }
        }
    },
    methods: {
        showGroupEdit(){
            this.groupEditVIF = true;
            this.groupEditShow = true;
        },
        monitorKeyboard(){
            this.$refs.newsQuery.titleFilter(this.searchValue);
        },
        changeGroupEditMode(){
            this.groupEditMode=!this.groupEditMode;
            return;
        },
        changePublished(){
            console.log('start')
            var that = this;
            this.selectItem.published = !this.selectItem.published;
            this.edittingPublished = this.selectItem.published;
            var jsonData = {methodParameters:[this.selectItem.id]};
            var purl2 = `/news/publish/${[this.selectItem.id]} `
            GMS.$http.post(purl2,JSON.stringify(jsonData),{
                headers: {
                    post: {
                    'Content-Type': 'application/json',
                    },
                }
            }).then(response =>{
                this.edittingPublished = response.data.data
                that.refreshData();
            }).catch(error =>{
                that.refreshData();
                console.log(error)
            })
        },
        saveArticle(){
            if(this.$refs.articleEditor){
                this.$refs.articleEditor.doOk();
            }
        },
        saveCarousel(){
            if(this.$refs.carouselEditor){
                this.$refs.carouselEditor.doOk();
            }
        },
        goBackToList(){
            this.refresh();
            this.modalEditArticle = false;
            this.modalEditCarousel = false;
            this.modalEdit = false;
        },
        editGroupName(element){
              this.editingGroup = element;
            this.editGroupTitleShow = true;
        },
        deleteSearchValue(){
            this.searchValue = "";
            this.$refs.newsQuery.titleFilter("");
        },
        createGroup(){
            this.editingGroup = {
                id:null
            };
            this.editGroupTitleShow = true;
        },
        previewArticle(){

        },
        upGroup(element){
            var that = this;
            var totalLength=this.groupList.length;
            if(element.orderField == 0||totalLength<=1){
                return;
            }
            var newGroupList=[];
            var upper = {};
            var select = {};
           this.groupList.map((group,index)=>{
               group.orderField = index;
               if(group.id == element.id){
                   select=group;
               }else if(!select.id){
                   upper = group;
               }
               newGroupList.push(group);
           });
           if(upper.id && select.id){
               var upperOrder = upper.orderField;
               upper.orderField = select.orderField;
               select.orderField = upperOrder;
               var saveGroupData={
                    function:this.config.function,
                    groups:newGroupList
                }
                // TODO: 使用GMS.$http
                // SEDU.Util.invokeServer({
                //     path : '/news/groups',
                //     contentType: "application/json",
                //     type : 'POST',
                //     data: JSON.stringify(saveGroupData)
                // }).then((data, textStatus, response) => {
                //     that.loadGroup();
                //     this.editGroupTitleShow = false;
                // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //     that.loading = false;
                // });
           }

        },
        downGroup(element){
            var that = this;
            var totalLength=this.groupList.length;
            if(totalLength<=1){
                return;
            }
            var newGroupList=[];
            var downer = {};
            var select = {};
           this.groupList.map((group,index)=>{
               group.orderField = index;
               if(group.id == element.id){
                   select=group;
               }else if(select.id){
                   downer = group;
               }
               newGroupList.push(group);
           });
           if(downer.id && select.id){
               var downerOrder = downer.orderField;
               downer.orderField = select.orderField;
               select.orderField = downerOrder;
               var saveGroupData={
                    function:this.config.function,
                    groups:newGroupList
                }
                // TODO：
                // SEDU.Util.invokeServer({
                //     path : '/news/groups',
                //     contentType: "application/json",
                //     type : 'POST',
                //     data: JSON.stringify(saveGroupData)
                // }).then((data, textStatus, response) => {
                //     that.loadGroup();
                //     this.editGroupTitleShow = false;
                // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //     that.loading = false;
                // });
           }

        },
        saveGroupTitle(){
            var that = this;
            if(this.editingGroup.id){
                this.editingGroup.title = this.groupTitle;
            
                var saveGroupData={
                    function:this.config.function,
                    groups:[this.editingGroup]
                }
                // TODO:
                // SEDU.Util.invokeServer({
                //     path : '/news/groups',
                //     contentType: "application/json",
                //     type : 'POST',
                //     data: JSON.stringify(saveGroupData)
                // }).then((data, textStatus, response) => {
                //     that.loadGroup();
                //     this.editGroupTitleShow = false;
                // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //     that.loading = false;
                // });
                
            }else{
                var newGroupData=[{
                    function:this.config.function,
                    title:this.groupTitle,
                    orderField:0
                }];
                var saveGroupDatas={
                    function:this.config.function,
                    groups:newGroupData
                }
                // TODO:
                // SEDU.Util.invokeServer({
                //     path : '/news/groups',
                //     contentType: "application/json",
                //     type : 'POST',
                //     data: JSON.stringify(saveGroupData)
                // }).then((data, textStatus, response) => {
                //     console.log(data);
                //     that.loadGroup();
                // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //     that.loading = false;
                // });
            }
            this.editGroupTitleShow = false;
        },

        groupAllSelect(){
             this.groupList.map((e)=>{
                e.selected= false;
            });
            this.noGroupSelected = true;
            this.checkedGroupId = "";
        },
        onGroupSelected(ele){
            this.groupList.map((group)=>{
                if(group.id == ele){
                    this.selectedGroup = group;
                }
            });
            
        },
        deleteGroup(element){
            this.dialogMessage.type="group";
            this.dialogMessage.show = true;
            this.dialogMessage.title = "删除";
            this.dialogMessage.message = "是否删除该分组？";
            this.dialogMessage.data = element;
        },
        groupClick(element){
           
            this.checkedGroupId = element.id;
            this.groupList.map((e)=>{
                e.selected = false;
                if(e.id == element.id){
                    e.selected = true;
                }
            });
            this.noGroupSelected = false;
        },
        saveGroup(){
            console.log(this.groupList);
        },
        orderList() {
            this.groupList = this.groupList.sort((one, two) => {
                return one.order - two.order;
            });
        },
        onMove({ relatedContext, draggedContext }) {
            const relatedElement = relatedContext.element;
            const draggedElement = draggedContext.element;
            return (
                (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
            );
        },
        moveToGroup(){
            this.selectedGroup={title:"请选择分组"};
            this.moveToGroupShow = true;
        },
        moveToGroupOk(){
           
            var that = this;
            var ids=[];
            var toGroup = {
                function:this.config.function,
                id:this.selectedGroup.id
            };
            this.sels.map((sel)=>{
                ids.push(sel.id);
            });
            var givenData = {
                to:toGroup,
                ids:ids
            }
            // TODO: 这里为什么要调用查询组件接口获取数据
            // SEDU.Util.invokeServer({
            //     path : '/news/groups/moveGivenData',
            //     contentType: "application/json",
            //     type : 'POST',
            //     data:JSON.stringify(givenData)
            // }).then((dataStr, textStatus, response) => {
            //    Helper.query(this.queryConfig.queryBus);
            // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
            //     // console.log("err");
            //     that.loading = false;
            // });
           
        },
        refreshData: function() {
            this.refresh();
        },
        loadGroup(){
            var that = this;
            // SEDU.Util.invokeServer({
            //     path : '/news/groups?function='+this.config.function,
            //     contentType: "application/json",
            //     type : 'GET'
            // }).then((dataStr, textStatus, response) => {
            //     // console.log();
            //     var data  = JSON.parse(dataStr)
            //     if(data.code == 200){
            //         var groupList = [];
            //         data.data.map((group)=>{
            //             group.fixed = false;
            //             group.selected = false;
            //             if(that.checkedGroupId&&that.checkedGroupId==group.id){
            //                group.selected = true; 
            //             }
            //             groupList.push(group);
            //         });
            //     }
            //     this.groupList = groupList;
            // }).catch((XMLHttpRequest, textStatus, errorThrown) => {
            //     that.loading = false;
            // });
        },

        initWithConfig:function(config){
            this.functionGroup = config.function.name;
            var that = this;
            this.createConfig = {function:this.config.function};
            
            this.showGroup = this.config.group;
            if(this.showGroup){
                this.loadGroup();
            }
           
            if(config.function){
                
                var fConfig = config.function;
                if(fConfig.listFieldDefine){
                    this.listFieldDefine  = fConfig.listFieldDefine;
                }else{
                    this.listFieldDefine  = {};
                }
                if(fConfig.hideCarousel){
                    this.hideCarousel = true;
                }else{
                    this.hideCarousel = false;
                }
               if(fConfig.tableFilter) this.filterDefine = fConfig.tableFilter;
               this.showFilter = (fConfig.showFilter) ;

                if(fConfig&&fConfig.fieldList){
                    this.fieldList = fConfig.fieldList;
                }
            }
             
        },
        onActivityEnroll(data){
            this.enrollTargetId = data.id;

            this.edittingPublished = data.published;
            this.edittingTitle = data.title;
            this.editId =  this.selectItem.id;
            this.modalEdit=true;
        },
        onRowClick(data){
            if(this.accept){
                this.accept = false;
                return;
            }
            
            this.selectItem = data;
            this.edittingTitle = data.title;
            this.edittingPublished = data.published;
            this.editId =  this.selectItem.id;
             this.$nextTick(()=>{

                if(data.typeName == "carousel"){
                    this.modalEditCarousel = true;
                    this.modalEditArticle = false;
                }else{
                    this.modalEditArticle = true;
                    this.modalEditCarousel = false;
                }
                this.modalEdit = true;
             });
        },
        cancelArticleEdit(){
            this.refresh();
        },
        refresh() {
            this.loadGroup();
            this.$refs.newsQuery.refresh();
        },
     
        showCreateCarousel(){

            this.selectItem = {function:this.config.function};
            this.create_carouselVIF = true;
            this.modal_carousel_create = true;
        },
        showCreateArticle(){

            this.selectItem = {function:this.config.function};
            this.create_articleVIF = true;
            this.modal_article_create = true;
        },
        publishNews(sels){
            this.dialogMessage.type="publish";
            this.dialogMessage.show = true;
            this.dialogMessage.title = "发布";
            this.dialogMessage.message = "是否发布这些新闻";
            this.dialogMessage.data = sels;
        },
        discardNews(sels){
            this.dialogMessage.type="news";
            this.dialogMessage.show = true;
            this.dialogMessage.title = "删除";
            this.dialogMessage.message = "删除后无法恢复，是否确认要删除这些新闻？";
            this.dialogMessage.data = sels;
        },
        previewPC(){
            // TODO:
            // if(this.editId){
            //      let url = window.location.origin + SEDU.Config.previewPath + this.editId;
            //     window.open(url);
                
            // }else{
            //    this.$Message.info({
            //         content: '请先进行内容保存'
            //     });
            // }
        },
        // previewMobile(){
        // //     if(this.editId){
        // //         this.$nextTick(()=>{
        // //             this.$refs['previewMobile'].refreshContent();
        // //             this.previewMobileShow = true;
        // //         });
                
        // //     }else{
        // //        this.$Message.info({
        // //                 content: '请先进行内容保存'
        // //             });
        // //     }
        //  },
        sticky(){
            var that = this;
            for(var i = 0; i < this.sels.length; i++) {
                var jsonData = {methodParameters:[this.sels[i].id]};
                // TODO:
                // SEDU.Util.invokeServer({
                //     path: '/biz/simple/com.beecode.inz.opm.news.bill.News/simpleLoad',
                //     contentType: "application/json",
                //     data: JSON.stringify(jsonData),
                //     type: 'POST'
                // }).then((data, textStatus, response) => {
                //     var result = JSON.parse(data.result);
                //     result.sticky = true;
                //     var array = [];
                //     array.push(JSON.stringify(result));
                //     array.push("置顶新闻: "+ result.title);
                //     var jsonData2 = {methodParameters:array};
                //     SEDU.Util.invokeServer({
                //         path: '/biz/simple/com.beecode.inz.opm.news.bill.News/simpleSaveAndSpecifyLog',
                //         contentType: "application/json",
                //         data: JSON.stringify(jsonData2),
                //         type: 'POST'
                //     }).then((data, textStatus, response) => {
                //         that.refreshData();
                //     }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //         that.refreshData();
                //     });
                // });
            }
        },
        unsticky(){
            var that = this;
            for(var i = 0; i < this.sels.length; i++) {
                var jsonData = {methodParameters:[this.sels[i].id]};
                console.log(jsonData)
                // TODO:
                // SEDU.Util.invokeServer({
                //     path: '/biz/simple/com.beecode.inz.opm.news.bill.News/simpleLoad',
                //     contentType: "application/json",
                //     data: JSON.stringify(jsonData),
                //     type: 'POST'
                // }).then((data, textStatus, response) => {
                //     var result = JSON.parse(data.result);
                //     result.sticky = false;
                //     var array = [];
                //     array.push(JSON.stringify(result));
                //     array.push("置顶新闻: "+ result.title);
                //     var jsonData2 = {methodParameters:array};
                //     SEDU.Util.invokeServer({
                //         path: '/biz/simple/com.beecode.inz.opm.news.bill.News/simpleSaveAndSpecifyLog',
                //         contentType: "application/json",
                //         data: JSON.stringify(jsonData2),
                //         type: 'POST'
                //     }).then((data, textStatus, response) => {
                //         that.refreshData();
                //     }).catch((XMLHttpRequest, textStatus, errorThrown) => {
                //         that.refreshData();
                //     });
                // });
            }
        },
        onSelectionChange(sel) {
            this.sels = sel;
        },
        doBatch(){
            var that = this;
            
            if(this.dialogMessage.type=="news"){
                var sels = this.dialogMessage.data;
                for(var i = 0; i < sels.length; i++) {
                    var jsonData = {methodParameters:[sels[i].id]};
                    var url = `/gms/bill/deleted/bill.announcementBillDefine/${[sels[i].id]} `
                    GMS.$http.post(url,JSON.stringify(jsonData),{
                    headers: {
                        post: {
                        'Content-Type': 'application/json',
                        },
                    }
                    }).then(response => {
                            that.refreshData();
                    }).catch(error => {
                            that.refreshData();
                    });
                }
            }else  if(this.dialogMessage.type=="publish"){
                var sel = this.dialogMessage.data;
                for(var j = 0; j < sel.length; j++) {
                    var jsonDatas = {methodParameters:[sel[j].id]};
                    console.log(jsonDatas)
                    var purl = `/news/publish/${[sel[j].id]} `
                    GMS.$http.post(purl,JSON.stringify(jsonDatas),{
                        headers: {
                            post: {
                            'Content-Type': 'application/json',
                            },
                        }
                    }).then(response =>{
                        this.edittingPublished = response.data.data
                        that.refreshData();
                    }).catch(error =>{
                        that.refreshData();
                        console.log(error)
                    })
                }
            }
        }  
    },
    computed:{
        dragOptions() {
        return {
            animation: 0,
            group: "description",
            disabled: true,
            ghostClass: "ghost"
        };
        },
        listString() {
        return JSON.stringify(this.groupList, null, 2);
        }
    },

    components:{
        'Create': Create,
        // 'CreateCarousel':CreateCarousel,
        'CreateArticle':CreateArticle,
        //'Card':Card,
        ArticleEdit,
        // CarouselEdit,
        //PreviewMobile,
        //draggable,
        // PreviewCarousel,
        NewsQuery
        // Enroll
    }
}
</script>