<template>
  <section class="AiTreePath">
    <AiTreePath v-if="parent" v-bind="$props" :current="parent" v-on="$listeners"/>
    <div v-else v-text="`全部`" @click="$emit('click','all')"/>
    <u-icon v-if="label" name="arrow-right" size="32" color="#ccc"/>
    <div v-text="label" @click="$emit('click',current)"/>
  </section>
</template>
<script>
export default {
  name: "AiTreePath",
  props: {
    current: {default: null},
    prop: {default: () => ({})},
    paths: {default: () => []}
  },
  computed: {
    options: v => ({
      id: 'id',
      label: 'name',
      parent: 'parentId',
      ...v.prop
    }),
    label: v => v.current?.[v.options.label] || "",
    parent: v => v.paths?.[v.current?.[v.options.parent]]
  }
}
</script>
<style scoped lang="scss">
.AiTreePath {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 36px;
  line-height: 40px;
  font-family: PingFang-SC;
}
</style>
