<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>

  <nav class="o_nav_1">
      <li><a class="a_1 " v-on:click="toggle('A004')"
      :class="{'active':selecttype=='A004'}"></a></li>
      <li><a class="a_2" v-on:click="toggle('A002')"
      :class="{'active':selecttype=='A002'}"></a></li>
      <li><a class="a_3" v-on:click="toggle('A001')"
      :class="{'active':selecttype=='A001'}"></a></li>
      <li><a class="a_4" v-on:click="toggle('A003')"
      :class="{'active':selecttype=='A003'}"></a></li>
      <li><a class="a_5" v-on:click="toggle('A005')"
      :class="{'active':selecttype=='A005'}"></a></li>
  </nav>

  
  
  <!--basic-user-info start-->
  <table class="itable basic-user-info" style="margin-top:80px">
    <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">
            一级
          </td>
          <td class="td-day  padd_10"></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-yesorno select-style padd_10">          
            <select-ui :list="typeselects"  :empty="tru e"
            :selected.sync="item.parentid">              
            </select-ui>
          </td> -->
         <td class="td-code  padd_10">
         一级
         </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">
         一级
         </td>        
       <!--  <td>{{item.status | ft-status}}</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>

            <a class="btn-d btn-d-activate"  
            v-link="{path:'/platformInsChild/'+selecttype+'/'+item.code}">
            详情</a>
        </td>
      </tr>      
    </tbody>
    
  </table> 

 
    
  <!--basic-user-info end-->

</div>
</template>
<script>
module.exports={
  data:function(){
    return {
      list:[
        
      ],newobj:{
        menuname:'',parentid:'',status:0,menuurl:''
      },editlist:[],addrow:0,
      statusselects:[
        {value:0,label:'无效'},{value:1,label:'有效'}
      ],selecttype:'A004',selectlist:[]
    }
  },computed:{
    typeselects:function(){
      var arr=[];
      for(var i=0;i<this.list.length;i++){
        if(this.list[i].parentid==0){
          arr.push({value:this.list[i].id,label:this.list[i].title})
        }
      }
      return arr;
    }
  },methods:{
    toggle:function(type){
        this.selecttype=type;
        for(var i=0;i<this.list.length;i++){
          if(this.list[i].code==type){
            this.selectlist=this.list[i].menuList
          }
        }
    },
    getData:function(casetxt){//请求数据     
      Ajax.post('/platform/sys_helper_queryProSelect').then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list',result.data);
              this.toggle(this.selecttype)
          }
      }.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.selecttype;


        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(){//添加
        var obj={};
        obj.menuname=this.newobj.menuname;
        obj.menuurl='';
        obj.parentcode=this.selecttype;

        Ajax.post('/platform/sys_helper_addMenu',obj).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.addrow=0;
            }
        }.bind(this))
    }
  },route:{
    activate:function(){
      this.getData();
    }
  }
}
</script>