import { defineComponent, ref, watch } from 'vue';
import styles from '../index.module.less';
import { NImage } from 'naive-ui';
import radiusIcon from '../images/radiusIcon.png';
export default defineComponent({
  emits: ['checkNavBar'],
  props: ['item'],
  name: 'layoutSilder',
  setup(props, { emit }) {
    const openNavBar = (item: any) => {
      emit('checkNavBar', item);
    };
    const myItem = ref(props.item);
    watch(
      () => props.item,
      val => {
        myItem.value = val;
      },
      {
        deep: true
      }
    );
    return () => (
      <>
        <div
          onClick={() => openNavBar(myItem.value)}
          class={[
            styles.silderItem,
            myItem.value.isActive ? styles.isActiveItem : ''
          ]}>
          <NImage
            width="26"
            height="26"
            src={
              myItem.value.isActive
                ? myItem.value.activeIcon
                : myItem.value.normalIcon
            }
            preview-disabled></NImage>
          <p>{myItem.value.name}</p>
          {myItem.value.isActive ? (
            <NImage src={radiusIcon} class={styles.radiusIcon}></NImage>
          ) : null}
        </div>
      </>
    );
  }
});