<template>
  <div class='page_middle_container adminList'>
    <div class='page_middle_title'>
      {{item && item.id ? $config.label.table.modify:$config.label.table.create}}
      <i class='el-icon-close page_middle_close' @click='closeInfo'></i>
    </div>
    <div class='page_middle_content'>
      <div class='page_middle_permissions_title'>
        <div>
          <div class='box_select_tab'>
              <div class='box_select_left'>
                <div clas='box_select_main'>
                  <div class='box_select_ones' v-for='(item,index) in list' :class='{box_select_ones_select:type=="all" && curIndex==index}' :key='index' @click='selectTab("all",index)'>{{item.permission}}</div>
                </div>
              </div>
              <div class='box_select_banner'>
                    <div><el-button size='mini' @click='doPrepAll' type="primary" icon="el-icon-arrow-left">全左移</el-button></div>
                    <div><el-button size='mini' @click='doPrep' type="primary" icon="el-icon-arrow-left">左移</el-button></div>
                    <div><el-button size='mini' @click='doNext' type="primary">右移<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
                    <div><el-button size='mini' @click='doNextAll' type="primary">全右移<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
              </div>
              <div class='box_select_right'>
                  <div clas='box_select_main'>
                      <div class='box_select_ones' v-for='(item,index) in permissions' :class='{box_select_ones_select:type=="mine" && curIndex==index}' :key='index' @click='selectTab("mine",index)'>{{item.permission}}</div>
                  </div>
              </div>
          </div>
          <div class='pageMiddle_row'>
              <el-button type="primary" @click="closeInfo">取消</el-button>
              <el-button type="primary" @click="doCommit">{{item.id ? '修改':'新增'}}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'pageMiddle',
  props:{
    item:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data(){
    return {
      data:{
        username:'',
        passwd:'',
        surepasswd:'',
      },
      list:[{"id":4,"permission":"dsada22","code":"21321","type":0,"disabled":0,"level":0},{"id":5,"permission":"231321","code":"12111","type":1,"disabled":0,"level":1},{"id":6,"permission":"12312","code":"121312","type":0,"disabled":0,"level":0},{"id":7,"permission":"d@asascas","code":"121cv","type":0,"disabled":0,"level":0}],
      permissions:[{"id":1,"permission":"权限","code":"aaa","type":0,"disabled":0,"level":0},{"id":2,"permission":"权限2","code":"bbb","type":0,"disabled":0,"level":1},{"id":3,"permission":"权限3","code":"ccc","type":0,"disabled":1,"level":0}],
      loading:false,
      curIndex:'',
      type:""
    }
  },

  mounted(){
    if(this.item.id) this.loadData()
  },
  methods:{
    loadData(){
      // this.$axios.get(this.$urls.permissionList.list).then((res)=>{
      //   this.initData(res.data);  //所有权限
      // })
    },
    initData(list){
      // this.data = {...this.item};
      // let url = `${this.$urls.adminList.permission}?admin_id=${this.data.id}`
      // this.$axios.get(url).then(res=>{
      //     this.data.permission = res.data
      //     this.permissions = list.filter(x=>(this.data.permission.map(j=>j.permission) || []).indexOf(x.permission) > -1) ;
      //     this.list = list.filter(x=>this.data.permission.map(j=>j.permission).indexOf(x.permission) == -1);
      // })
    },
    selectTab(type,index){
      this.type = type;
      this.curIndex = index;
    },
    doPrep(){
      if(this.type == 'mine' && this.curIndex !== ''){
        let item = this.permissions.splice(this.curIndex,1);
        this.list = this.list.concat(item)
        this.type = this.curIndex = '';
      }else{
        this.type = this.curIndex = '';
      }
    },
    doNext(){
      if(this.type == 'all' && this.curIndex !== ''){
        let item = this.list.splice(this.curIndex,1);
        this.permissions = this.permissions.concat(item)
        this.type = this.curIndex = '';
      }else{
        this.type = this.curIndex = '';
      }
    },
    doPrepAll(){
      this.list = this.list.concat(this.permissions.splice(0))
    },
    doNextAll(){
      this.permissions = this.permissions.concat(this.list.splice(0))
    },
    closeInfo(){
      this.$emit('closeInfo')
    },
    formatData(){
      return true;
    },
    doCommit(){
      if(this.loading || !this.formatData()){
        return;
      }
      this.loading = true;
      this.update()
    },
    update(){
      let url = this.$urls.adminList.update_permisson;
      let data = {
        account_id:this.data.id,
        permission_id_list:this.permissions.map(x=>x.id)
                }
      // console.log(this.data)
      // console.log(data)
      // return
      this.$axios.post(url,data).then(()=>{
        setTimeout(()=>{this.loading = false;},1000)
        this.$tips.success({text:'修改成功'})
        this.$emit('closeInfo',true)
      }).catch(()=>{
        setTimeout(()=>{this.loading = false;},1000)
      })
    },
  },

}
</script>
<style scoped>
.adminList .page_middle_permissions_title{
  display: flex;
  justify-content: center;
}
.adminList .box_select_tab{
  display: flex;
}
.adminList .box_select_left,.box_select_right{
  width:150px;
  height:486px;
  /* background:red; */
  border:1px solid #911C61;
  padding:10px;
  overflow: scroll;
}
.adminList .box_select_banner{
  width:120px;
  height:486px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center
}
.adminList .box_select_banner button{
  margin:20px 0;
  width:90px;
}
.adminList .box_select_ones{
  text-align: left;
  padding:10px 10px;
  font-size:14px;
}
.adminList .box_select_ones_select{
  background:#0100c8;
  color:#fff;
  border-radius:2px;
}
.adminList .pageMiddle_row{
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
</style>