<template>
  <div style="display:inline">
    <el-button size="mini" type="primary" icon="el-icon-edit" @click="drawer = true">编 辑</el-button>
    <el-dialog
      title="设置账号角色"
      :visible.sync="drawer"
      :with-header="true"
      width="650px">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in data.usersite" :key="item.index" :label="item.sitename" :name="item.index">
          </el-tab-pane>
        </el-tabs>
        <div>
          <el-transfer
            v-model="value"
            :data="rolelist"
            @change="handleChange">
          </el-transfer>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      drawer:false,
      activeName:'0',
      usersite:[],
      rolelist:[],
      value:[]
    }
  },
  methods:{
    queryRole (siteid) {
      let param = {
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 100,
          "typename": "role",
          "parameter": {
            "siteid": siteid
          }
        }
      }
      this.$api.requested(param).then(res=>{
        this.rolelist = []
        res.data.map((e)=>{
          this.rolelist.push({
            key: e.roleid,
            label: `${ e.rolename }`
          })
        })
      })
    },
    handleClick () {
      let siteid = this.data.usersite[this.activeName].siteid
      this.queryRole(siteid)
      this.setValue()  
    },
    // 匹配已激活的选项
    setValue () {
      this.selection_role = this.data.usersite[this.activeName].userrole
      this.value = []
      this.selection_role.map(e=>{
        this.value.push(e.roleid)
      })
    },
    onClick (item) {
      item.check === true?this.deleteRole(item):this.addRole(item)
      item.check = item.check === true?false:true
    },
    addRole (roleids) {
      let param = {
        "classname": "webmanage.users.users",
        "method": "addUserRole",
        "content": {
          "userid": this.data.userid,
          "roleids":roleids
        }
      }
      this.$api.requested(param).then(res=>{
        res.code === 1?'':this.$notify({
          message:res.data,
          type:'error'
        })
        res.code === 1?this.$emit('onSuccess',this.data):''
      })
    },
    deleteRole (roleids) {
      let param = {
        "classname": "webmanage.users.users",
        "method": "deleteUserRole",
        "content": {
          "userid": this.data.userid,
          "roleids":roleids
        }
      }
      this.$api.requested(param).then(res=>{
        res.code === 1?'':this.$notify({
          message:res.data,
          type:'error'
        })
        res.code === 1?this.$emit('onSuccess',this.data):''
      })
    },
    handleChange (value, direction, movedKeys) {
      
      if (direction === 'right') {
        this.addRole(movedKeys)
      } else {
        this.deleteRole(movedKeys)
      }
    }
  },
  mounted () {
    
  },
  watch: {
    drawer (val) {
      let siteid = this.data.usersite[0].siteid
      val?this.queryRole(siteid):''
      val?this.setValue():''
      val?this.activeName = '0':''
    }
  }
}

</script>
<style>
.role_panel{
  padding: 10px;
  border:1px solid #ebe3e3;
  font-size: .875rem;
  cursor: pointer;
  border-radius: 4px;
  color:#666;
  transition: .2s linear;
}
</style>
<style scoped>
.on{
  border:1px solid #4f7bfd;
  background: #4f7bfd;
  color:#fff;
}
</style>