<template>
  <div>
    
    <div style="margin-top:6px">
    <el-transfer
      v-model="depts"
      :data="userOptions"
      :titles="['组员列表', '选择的组员']"
      :props="{ key : 'id' , label: 'name' }"
    >
    <span slot-scope="{ option }">{{ option.sort }} - {{ option.name }}</span>
    </el-transfer>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="confirm()">确认</el-button>
    </div>
  </div>
</template>
<style lang="scss">
.el-transfer-panel {
  width: 470px;
}
.el-transfer__buttons {
  padding: 0 2px;
  .el-button {
    display: block;
  }
}

</style>
<script>
import { getUserList } from "@/api/user";
export default {
  name: "leaderinit",
  data() {
    return {
      depts: [],
      userOptions: [],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      getUserList().then((res) => {
        this.userOptions = res.data.results;
      });
    },
    confirm(){
        if( this.depts.length>0){
            var data = {
            depts:this.depts
        }
        this.$emit('handleChose', data)
        }else{
            this.$message.error('请选择单位!')
        }
        
    }
  },
};
</script>