<style>
.btn-d-cancel{border:1px #cfd4d7 solid;background:#cfd4d7;color:#fff;}
</style>
<template>
<div class="container resource" style="min-height: 490px;">

  <div class="pop-banner clearfix">
    <div class="operate-btns"> 
        <a   class="fbtn fb-add"  v-show="!addrow"
          v-on:click="addrow=!addrow">添加</a>
        <a href="javascript:void(0)" class="fbtn fb-save" 
         v-show="addrow" v-on:click="add()">保存</a>
        <a href="javascript:;" class="fbtn fb-refresh"
          v-on:click="getData('refresh')">刷新</a>
        
      </div>
    <h3 class="current-module">帮助中心栏目</h3>
  </div>
  
  
  <!--basic-user-info start-->
  <table class="itable basic-user-info" >
    <thead>
      <tr>
        <th class="w100">序号</th>
        <th class="w350">名称</th>
         <th class="w200">路由</th>  
        <!-- <th class="w200">分类</th>  -->     
        <!-- <th class="w100">状态</th> -->
        <th class="">操作</th>
      </tr>
    </thead>

    <tbody v-show="addrow">    
      <tr>
          <td>          
          </td>
          <td class="td-code  padd_10">
            <input type="text" v-model="newobj.menuname"></td>         
          
          <td class="td-name  padd_10">
            <input type="text" v-model="newobj.menuurl"></td>  
          </td>
          <!-- <td class="td-day  padd_10">
              <select-ui :list="typeselects"  :empty="true"
              :selected.sync="newobj.parentcode">              
              </select-ui>
          </td> -->
          <td></td>
      </tr>
    </tbody>

    <tbody  v-for="item in selectlist" >    
      <tr v-if="item.edit==1">
          <td>
          {{$index+1}}
          </td>
          <td class="td-code  padd_10">
            <input type="text" v-model="item.title">
          </td>
         <td class="td-code  padd_10">
         <input type="text" v-model="item.path"
         </td>
          <td>
            <a class="btn-d btn-d-activate"  href="javascript:"
             v-on:click="save($index)">
            保存</a>
            <a class="btn-d btn-d-cancel"  href="javascript:"
             v-on:click="edit($index)">
            取消</a>
          </td>
      </tr>

      <tr :class="{'tr_sty_red':item.status==0}" v-else>
        <td>{{$index+1}}</td>
        <td>{{item.title}}</td>
       <!--  <td>{{item.menuList | ft-case typeselects '父类' }}</td> -->
        <td class="td-code  padd_10">
         {{item.path}}
         </td>        
        <td>
            <a class="btn-d btn-d-activate"  href="javascript:"
              v-on:click="edit($index)">
            修改</a>
            <a class="btn-d btn-d-red" href="javascript:"
              v-on:click="remove($index)">
            删除</a>
        </td>
      </tr>      
    </tbody>
    
  </table> 
 
    
  <!--basic-user-info end-->

</div>
</template>
<script>
module.exports={
  data:function(){
    return {
      list:[
        
      ],newobj:{
        menuname:'',parentcode:'',menuurl:''
      },editlist:[],addrow:0,selecttype:'',selectlist:[],selectparent:'',
      typeselects:[]
    }
  },methods:{
    settypeselect:function(){
        var arr=[];
        for(var s=0;s<this.list.length;s++){
          if(this.list[s].code==this.selecttype){

            for(var u=0;u<this.list[s].menuList.length;u++){

              arr.push({  
                value:this.list[s].menuList[u].code,
                label:this.list[s].menuList[u].title
              })           
            }          
          }
        }   
        this.typeselects=arr;
    },
    toggle:function(){        
        for(var i=0;i<this.list.length;i++){
          if(this.list[i].code==this.selecttype){

            for(var y=0;y<this.list[i].menuList.length;y++){

                if(this.list[i].menuList[y].code==this.selectparent){
                  this.selectlist=this.list[i].menuList[y].menuList
                  return ;
                }
            } 
          }
        }
    },
    getData:function(casetxt){//请求数据    
      this.selecttype=this.$route.params.type;
      this.selectparent=this.$route.params.id; 
      this.newobj.parentcode=this.$route.params.id; 
      Ajax.post('/platform/sys_helper_queryProSelect').then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list',result.data);
              this.toggle()
              this.settypeselect();
          }
      }.bind(this))
    },edit:function(index){//修改  状态
      var obj=Object.assign({},this.selectlist[index],
        {edit:this.selectlist[index].edit?0:1});      
      if(obj.edit==1){
        this.editlist[index]=Object.assign({},obj);
      }else{
        obj=this.editlist[index];
        obj.edit=0;
      }           
      this.$set('selectlist['+index+']',obj)
    },save:function(index){//单个保存
        var obj={}
        obj.menucode=this.selectlist[index].code;
        obj.menuname=this.selectlist[index].title;
        obj.menuurl=this.selectlist[index].path;
        obj.parentcode=this.selectparent;

        Ajax.post('/platform/sys_helper_updateMenu',obj
          ).then(function(res){
            var result=res.data;
            this.editlist[index].edit=0;

            if(result.errorCode==0){
                //obj.edit=0;
                //this.$set('selectlist['+index+']',this.editlist[index])
                this.selectlist[index].edit=0;
            }
        }.bind(this))

    },remove:function(index){//删除
      this.MessageBox({
        title: '提示',
        message: '是否删除',
        type: 'success',
        showCancelButton: true
      }).then(function(action) {    
          if(action=="confirm"){
              var id=this.selectlist[index].code;
              Ajax.post('/platform/sys_helper_delMenu',{
                menucode:id
              }).then(function(res){
                  var result=res.data;

                  if(result.errorCode==0){
                      this.selectlist.splice(index,1)
                  }
              }.bind(this))
          }  
      }.bind(this));
    },add:function(){//添加        

        Ajax.post('/platform/sys_helper_addMenu',
          this.newobj).then(function(res){
            var result=res.data;

            if(result.errorCode==0){
              this.newobj.id=result.id;
              this.getData();
              //this.list.unshift(this.newobj);
              /*this.newobj=Object.assign({},{
                menuname:'',menuurl:''
              });*/
              this.newobj.menuname='';
              this.newobj.menuurl="";

              this.addrow=0;
            }
        }.bind(this))
    }
  },route:{
    activate:function(){
      this.getData();
    }
  }
}
</script>