<script lang="ts" setup name="topbar">
import { ref, watch } from 'vue';

const props = defineProps({
  isFieldLineage: {
    type:Boolean,
    default: false
  },
  /** 显示字段级血缘关系开关，还是表级血缘关系开关 */
  type: {
    type: String,
    default: 'field'
  }
});

/** 是否展开字段级别的血缘关系。 */
const showFieldLineage = ref(false);

/** 是否展开表级别的血缘关系 */
const showTableLineage = ref(false);

watch(() => props.isFieldLineage, (val) => {
  showFieldLineage.value = val;
  showTableLineage.value = val;
}, {
  immediate: true
})

const emits = defineEmits(["lineageSwitchChange", "handleClick"]);

const switchChange = (val) => {
  emits('lineageSwitchChange', val, props.type);
}

const handleClick = (e) => {
  emits('handleClick', e);
}

</script>

<template>
  <div className='g6-component-topbar-content'>
    <div className='g6-component-topbar-item' @click="handleClick">
      <span>字段级血缘关系</span>
      <el-switch v-if="props.type != 'table'" v-model="showFieldLineage"  @change="switchChange" @click="handleClick" />
      <el-switch v-else v-model="showTableLineage"  @change="switchChange"  @click="handleClick" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.g6-component-topbar-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 0px 12px;
}

.g6-component-topbar-item {
  display: flex;
  align-items: center;
  padding: 0px 10px;
  line-height: 30px;
}

.g6-component-topbar-item>span {
  font-size: 14px;
  margin-right: 10px;
}
</style>