<template>
	<div class="app-container">
		<el-dialog title="角色管理" class="hastransfer" :visible.sync="visibleFlag" width="50%" center :before-close="handleClose">
			<div class="contain">
				<el-transfer v-model="value2" :props="defaultProps" :data="data2" :titles="['可选列表', '已选列表']">
				</el-transfer>
			</div>
			<span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				data2: [],
				value2: [],
				defaultProps: {
					key: 'roleCode',
					label: 'roleName'
				}
			}
		},
		props: [
			'visibleFlag',
			'rolesInfo',
			'checkInfo'
		],
		methods: {
			//关闭对话框函数
			handleClose(done, val) {
				this.$emit("changeVisible", false);
				this.value2 = [];
			},
			//对话框确定回调
			confirm() {
				this.$emit("receiveData", this.value2);
				this.handleClose();
			},

			getLables() {
				const tempCheckedLabels = [];
				const tempData = this.data2;
				const tempValue = this.value2;
				for(let i = 0; i < tempValue.length; i++) {
					for(let j = 0; j < tempData.length; j++) {
						if(tempValue[i] === tempData[j].id) {
							tempCheckedLabels.push(tempData[j].roleName);
							break;
						}
					}
				}

				return tempCheckedLabels;
			}
		},
		updated() {
			this.data2 = this.rolesInfo//所有角色数据
			console.log(this.data2)
			console.log(this.checkInfo,"test")
			if(this.checkInfo.length>0) {
				this.value2 = this.checkInfo
				this.checkInfo =[]
			}
		},
		watch: {
			value2: {
				handler: function(newVal, oldVal) {
					this.value2 = newVal
				},
				deep: true
			}
		}
	}
</script>
<style>

</style>