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

const props = defineProps({
  isGraphDisplay: {
    type: Boolean,
    default: true
  },
});

const isGraph = ref(false);

watch(() => props.isGraphDisplay, (val) => {
  isGraph.value = val;
}, {
  immediate: true
})

const emits = defineEmits(["displaySwitchChange"]);

const switchChange = (val) => {
  isGraph.value = val
  emits('displaySwitchChange', val);
}

</script>

<template>
  <div className='g6-component-topbar-content'>
    <div :class="isGraph ? 'selected g6-component-topbar-item' : 'g6-component-topbar-item'" @click="switchChange(true)">
      关系网
    </div>
    <div :class="!isGraph ? 'selected g6-component-topbar-item' : 'g6-component-topbar-item'" @click="switchChange(false)">
      桑基图
    </div>
  </div>
</template>

<style scoped lang="scss">
.g6-component-topbar-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid var(--el-color-primary);
  border-radius: 32px;
  padding: 4px;
  width: 138px;
  height: 32px;
}

.g6-component-topbar-item {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999999;
  cursor: pointer;

  &.selected {
    background: #4FA1A4;
    border-radius: 32px;
    color: #fff;
  }
}
</style>