<template>

<div style="margin-bottom: 3px; height: 40px; line-height: 40px;">
  <el-tree-select 
    v-model="leftValue1" style="width: 270px;" :data="leftTreeSource" placeholder="关联表单主表字段"
    check-strictly :render-after-expand="false" filterable  @change="leftChanged" />
  <span style="margin-left: 8px;margin-right: 8px;">的值填充到</span>
  <el-tree-select 
    v-model="rightValue1" style="width: 270px;" :data="rightTreeSource"
    check-strictly :render-after-expand="false"  placeholder="当前表单字段" filterable @change="rightChanged" />
    <Delete style="width: 22px; height: 22px; margin-right: 35px;cursor: pointer; color: #50A6FF;margin-top: 10px; display: block; float:right" @click="delRole" />
</div>
  


</template>

<script setup lang="ts">


const props = defineProps({
  leftTreeSource: {
    type: Object,
    default() {
      return {}
    }
  },
  rightTreeSource: {
    type: Object,
    default() {
      return {}
    }
  },
  leftValue: {
    type: String,
    default() {
      return {}
    }
  },
  rightValue: {
    type: String,
    default() {
      return {}
    }
  },
  currentKey: {
    type: String,
    default() {
      return {}
    }
  },
})
const leftValue1 = ref()
const rightValue1 = ref()

leftValue1.value = props.leftValue
rightValue1.value = props.rightValue



let emit = defineEmits(["update:leftValue", "update:rightValue","delRole","childRoleRightChanged"]);

function leftChanged(){
  emit('update:leftValue',leftValue1)
}
function rightChanged(){
  emit('update:rightValue',rightValue1)
  emit('childRoleRightChanged')
}

function delRole(){
  //alert(props.currentKey)
  emit('delRole',props.currentKey)
  emit('childRoleRightChanged')
}
onMounted(() => {
  emit('childRoleRightChanged')
})


</script>

<style></style>