import { defineComponent, ref, watch } from 'vue';
import styles from '../index.module.less';
import { NImage } from 'naive-ui';
import radiusIcon from '../images/radiusIcon.png';
import radiusIcon1 from '../images/radiusIcon-1.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 ? (
          <img src={radiusIcon} class={styles.radiusIcon} />
          // <img src={radiusIcon1} class={styles.radiusIcon1} />
        ) : null}
      </div>
    );
  }
});
