<style>
.btn-move{cursor: move;    position: absolute;
    right: 0px;
    bottom: 0px;    border-width: 7px;
    border-style: dashed solid solid dashed;
    border-color: transparent #d9d9dc #d9d9dc transparent;
  }

.w240{position: relative;}
</style>

<template>
<div class="container resource " style="min-height: 490px;" >

  <div class="pop-banner clearfix">
      
    <form class="search-bar">
      <div class="search-btn"  v-on:click="getData('search')">
        <input type="submit" value="搜索"> 
      </div>
      <input type="text"  v-model="search.searchWord" 
      placeholder="输入关键字" style="color: #373737;" v-rule> 
    </form>  


    <div class="operate-btns">
      <a href="javascript:void(0)" class="fbtn fb-modify"
      v-on:click="disabled=false">修改</a>
      <a 
      v-if="'/public/act:addAct' | myqx"
      v-link="{path:'/cmsdetailedit/'+$route.params.type+'/0'}"
       class="fbtn fb-add">添加</a>      
      <a href="javascript:void(0)"
      v-if="'/public/act:delAct' | myqx" class="fbtn fb-remove"
      v-on:click="remove()">删除</a>	
      <a href="javascript:;" class="fbtn fb-refresh"
       v-on:click="getData('refresh')">刷新</a>
    </div>
    <h3 class="current-module">{{typetitle}}</h3>
  </div>
  
  <!--table-->
  <table class="itable basic-user-info data-ind-table">
    <thead>
      <tr>
        <th class="w70">选择</th>
        <th class="w90">序号</th>
        <th class="w300"  style="text-align:left;">标题</th>
        <!-- <th class="w150">排序</th> -->
        <th class="w150">日期</th>

        <th class="w150">类型</th>
        <th  class="w240">操作</th>
      </tr>
     </thead>
    <tbody class="tbody">
      <tr v-for="item in list | orderBy 'consort' -1" 
      :data-id="item.guid">
        <td  class="w70">
          <div class="checkbox-control checkbox-alone">

              <input type="checkbox" id="ch_{{item.guid}}" v-model="item.check" :disabled="disabled">
              <label for="ch_{{item.guid}}" class="checkbox"></label>
          </div>
        </td>
        <td  class="w90">{{$index+1}}</td>
        <td  style="text-align:left;" class="w300" >{{item.title}}</td>
        <!-- <td>{{item.consort}}</td> -->
        <td  class="w150">{{item.pubdate}}</td>
        
        <td  class="w150">{{item.typecode | ft-case typeselects }}</td>
        <td class="w240">
              
            <a class="btn-d btn-d-activate" 
            href="#!/cmsdetailedit/{{$route.params.type}}/{{item.guid}}">
            详情
            </a>
            <a class="btn-d btn-d-activate"   href="javascript:" 
            v-on:click="up(item,$index)">
            上移
            </a>
            <a class="btn-d btn-d-activate"   href="javascript:"
            v-on:click="down(item,$index)"
            >
            下移
            </a>
            <a href="javascript:" class="btn-move" ></a>
        </td>
      </tr>            
    </tbody>
  </table> 
   <!--end table-->
    
  
    <pagination 
   @page-change="getData" 
   :class="['m-20-0']"
   :page-no.sync="search.page" 
   :total-pages.sync="search.totalPages"></pagination>
  

</div>
</template>

<script>
module.exports={
	data:function(){
		return {
			list:[
          
      ],search: {
          size: 20,
          page: 1,
          totalPages: 0,searchWord:'',typecode:''       
      },disabled:false,typeselects:[],typetitle:''
		}
	},methods:{
    up:function(item,index){
        if(this.list[0].guid==item.guid){
          return ;
        }
        this.setorderguid(item.guid,this.list[index-1].guid)
    },
    down:function(item,index){
      if(this.list[this.list.length-1].guid==item.guid){
        return ;
      }
      this.setorderguid(item.guid,this.list[index+1].guid)
    },
    setorderguid:function(upguid,downguid){
        Ajax.post('/cms/public_act_updateSort',{
            upguid:upguid,downguid:downguid  
        }).then(function(res){

          this.getData();
        }.bind(this))
    },
    setorderguids:function(item){
        Ajax.post('/cms/public_act_updateSortByList',
          JSON.stringify(item)).then(function(res){

          this.getData();
        }.bind(this))
    },
    getData:function(casetxt){//请求数据
        if(casetxt){
          if( casetxt=='search' && this.search.searchtxt.length==''){
            return ;
          }
          this.search.page=1;       
        }
        this.search.typecode=this.$route.params.type;                
        Ajax.post('/cms/public_act_getAll',
          this.search).then(function(res){
            var result=res.data;

            if(result.data){
                this.$set('list',result.data.list);
                this.search.totalPages = result.data.totalPages || 0;
            }

            setTimeout(function(){
                this.binddrag();
            }.bind(this),500)
            
        }.bind(this))
    },remove:function(){
      if(this.disabled==true){
        return ;
      }
      var ids=[];
      var arrdel=[]
      for(var i=0;i<this.list.length;i++){
        if(this.list[i].check==1){
          ids.push(this.list[i].guid);
          arrdel.push(this.list[i])
        }
      }

      if(ids.length>0){
        Ajax.post('/cms/public_act_delAct',
          JSON.stringify(ids))
        .then(function(res){
            var result=res.data;

            if(result.errorCode==0){
                this._arrremove(this.list,arrdel)
            }
        }.bind(this))
      }
    },_arrremove:function(arr,arrdel){
        for(var i=0;i<arrdel.length;i++){
          arr.$remove(arrdel[i])
        }
    },gettype:function(){
      Ajax.get('/cms/typelist',{
        type:this.$route.params.type
      }).then(function(res){
           var result=res.data;

            if(result.data){
              var arr=[];
              for(var i=0;i<result.data.length;i++){
                arr.push({
                  value:result.data[i].id,
                  label:result.data[i].title
                })                           
              }
              this.$set('typeselects',arr);     
            }
            this.getData();
      }.bind(this))
    },binddrag:function(){
        window.tbody=$('.tbody');

        var that=this;
        tbody.sortable({
            opacity: 0.6,
            revert: true,
            cursor: 'move',
            handle: '.btn-move',
            start:function(e,ui){

            },
            out:function(e,ui){

            },
            update:function(e,ui){
                var guid=ui.item.attr('data-id');
                var guid2=''

                var arr=[];
                tbody.children('tr').each(function(){
                    arr.push($(this).attr('data-id'))
                })

                that.setorderguids(arr);
            }
        });
    }
  },route:{
		activate:function(){
		    //this.getData();
        this.gettype();
		}
	},watch:{
    '$route.path':function(val){

      this.getData();
    },'search.typecode':function(val){

      for(var i=0;i<this.typeselects.length;i++){
        if(this.typeselects[i].value==val){
          this.typetitle=this.typeselects[i].label;
        }
      }

    }
  }
}
</script>