import { defineComponent, ref, watch } from 'vue';
import styles from './index.module.less';
import { NSpace, NBreadcrumb, NBreadcrumbItem } from 'naive-ui';
import icon_back from './images/icon_back.png';
import icon_separator from './images/icon_separator.png';
// import activeArrow from './images/activeArrow.png';
// import arrow from './images/arrow.png';
import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
  props: {
    list: {
      type: Array,
      required: true,
      default: [] as any
    }
  },
  emits: ['back'],
  name: 'CBreadcrumb',
  setup(props, { emit, attrs }) {
    const router = useRouter();
    const route = useRoute();
    const lastNum = ref(props.list?.length || 0);
    const list = ref(props.list as any);
    watch(
      () => props.list,
      (value: any) => {
        list.value = value;
      },
      { deep: true, immediate: true }
    );
    return () => (
      <div class={styles.CBreadcrumb}>
        <NSpace align="center" wrapItem={false} size={16}>
          <img
            style={{ cursor: 'pointer' }}
            src={icon_back}
            class={styles.icon_back}
            onClick={() => {
              emit('back');
              router.go(-1)
            }}
          />
          <NBreadcrumb separator="">
            {list.value &&
              list.value.map((item: any, index: number) => (
                <>
                  <NBreadcrumbItem
                    onClick={() =>
                      router.push({
                        path: item.path,
                        query: { ...route.query }
                      })
                    }>
                    {item.name}
                  </NBreadcrumbItem>
                  {index != lastNum.value - 1 ? (
                    <img class={styles.separator} src={icon_separator} />
                  ) : null}
                </>
              ))}
          </NBreadcrumb>
        </NSpace>
      </div>
    );
  }
});
