<template>
  <!-- 折叠菜单栏项 -->
  <div :class="['collapseMenuItem']">
    <div :class="[
      'item',
      isHaveChildren ? 'father' : 'son',
      isEnterItem ? 'mouseEnter' : '',
    ]" :style="{ height: props.itemHeight }" @click="itemClick" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <header>
        <div class="iconContainer">
          <textIcon :icon="'dropDown'" :class="[
            'icon',
            isHideChildren ? '' : 'unfolded',
            isEnterItem ? 'mouseEnter' : '',
          ]" v-if="isHaveChildren" />
          <!-- <div
            :class="['sonLine', isEnterItem ? 'mouseEnter' : '']"
            v-else
          ></div> -->
        </div>
        <!-- <q-avatar
          icon="folder"
          size="32px"
          font-size="20px"
          :text-color="isEnterItem ? 'grey-8' : 'grey-5'"
          class="itemIcon"
        /> -->
        <textIcon :icon-content="props.itemInfo.icon ? props.itemInfo.icon : 'folder'"
          :class="['pathIcon', isEnterItem ? 'mouseEnter' : '']" :is-mat-icon="true" />
        <a class="title">{{ props.itemInfo.menuName }}</a>
      </header>
      <main style="width:65%;">
        <div class="row q-col-gutter-md items-center">
          <div class="col-xl-4 col-lg-6 col-xs-12">
            <span class="q-mr-md">当前路径:{{ props.itemInfo.path }}</span>
          </div>
          <div class="col-xl-6 col-lg-6 col-xs-12">
            <span>组件地址:{{ props.itemInfo.component }}</span>
          </div>
          <div class="col-xl-2 col-lg-6 col-xs-12">
            <span>排序:{{ props.itemInfo.orders }}</span>
          </div>
        </div>
      </main>
      <footer>
        <toggleBtn class="toggle" ref="toggle" :toggle-init="isToggle" :toggle-click="statusBtnClick" />
        <textIcon :icon="'add'" :class="['addIcon', isEnterItem ? 'mouseEnter' : '']" :is-icon-pointer="true"
          :iconClick="addBtnClick" :is-click-diff="false" />
        <textIcon :icon="'edit'" :class="['editIcon', isEnterItem ? 'mouseEnter' : '']" :is-icon-pointer="true"
          :iconClick="editBtnClick" :is-click-diff="false" />
        <textIcon :icon="'delete'" :class="['deleteIcon', isEnterItem ? 'mouseEnter' : '']" :is-icon-pointer="true"
          :iconClick="deleteBtnClick" :is-click-diff="false" />
      </footer>
    </div>
    <div :class="['itemChidren', isHideChildren ? 'hide' : '']">
      <slot></slot>
    </div>
  </div>
</template>
<script setup="context" lang="ts">
import { ref, useSlots, PropType, watch } from 'vue';
import textIcon from '../textIcon.vue';
import toggleBtn from '../toggleBtn.vue';
import { iconNames } from '../moduleType';

const slots = useSlots();
const props = defineProps({
  itemInfo: {
    type: Object as PropType<menuItemType>,
    required: true,
  },
  itemHeight: {
    type: String,
    default: '5vh',
  },
  // itemTitle: {
  //   type: String,
  //   required: true,
  // },
  // itemPath: {
  //   type: String,
  //   required: true,
  // },
  // itemIcon: {
  //   type: String,
  //   default: 'folder'
  // },

  // toggleInit:{
  //   type:Boolean,
  //   default:false
  // },
  deleteShow: {
    type: Function as PropType<(e: any) => void>,
    required: true,
  },
  addShow: {
    type: Function as PropType<(e: any) => void>,
    required: true,
  },
  editShow: {
    type: Function as PropType<(e: any) => void>,
    required: true,
  },
  statusShow: {
    type: Function as PropType<(status: any, id: any) => void>,
    required: true,
  },
});
// const itemIcon=ref('folder');

//props.itemInfo.status==='启用'
const isToggle = ref(props.itemInfo.status === 0);
//获取组件this
// const _this = getCurrentInstance();

const isHideChildren = ref(true); // 是否隐藏子集
const isHaveChildren = ref(false); // 是否有子集
const isEnterItem = ref(false); // 背景颜色
const toggle = ref();

// watch(isToggle,(newValue)=>{
//   props.statusShow(newValue,props.itemInfo.pathName);
// })
const statusBtnClick = (e: any) => {
  isToggle.value = !isToggle.value;
  props.statusShow(isToggle, props.itemInfo.id);
};
const addBtnClick = () => {
  // console.log('添加按钮点击');
  props.addShow(props.itemInfo);
};
const deleteBtnClick = () => {
  // console.log('删除按钮点击');
  // console.log(props.itemInfo.id);
  props.deleteShow(props.itemInfo);
};
const editBtnClick = () => {
  // console.log('编辑按钮点击');
  props.editShow(props.itemInfo);
};

//获取插槽

const itemClick = ref<(e: any) => void>();
const mouseEnter = () => {
  isEnterItem.value = true;
};
const mouseLeave = () => {
  isEnterItem.value = false;
};
const childrenJudge = () => {
  const childrenMenu = slots.default?.();
  //插槽检测
  if (childrenMenu != undefined && childrenMenu?.length > 0) {
    isHaveChildren.value = true;
    itemClick.value = (e: any) => {
      isHideChildren.value = !isHideChildren.value;
    };
  } else {
    isHaveChildren.value = false;
  }
};
childrenJudge();
watch(() => props.itemInfo, (newValue) => {
  childrenJudge();
})

</script>
<style style lang="scss" scoped>
.collapseMenuItem {
  a {
    font-size: 15px;
    font-weight: 400;
  }

  .item {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    position: relative;
    border-radius: 5px;
    transition: all 0.3s;

    &.father {
      cursor: pointer;
      font-weight: bolder;

      &.mouseEnter {
        // background-color: white;
        background-color: #e8e8e8;
      }
    }

    &.son {
      &.mouseEnter {
        // background-color: white;
        background-color: #e8e8e8;
      }
    }

    >header {
      margin-left: 5px;
      display: flex;
      height: 100%;
      flex-direction: row;
      align-items: center;
      font-weight: 400;

      >.iconContainer {
        width: 22.5px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        >.icon {
          transition: all 0.3s;
          color: $primary;
          opacity: 0.9;

          &.mouseEnter {
            opacity: 1;
          }

          &.unfolded {
            transform: rotate(90deg);
          }
        }

        >.sonLine {
          width: 2.3px;
          height: 100%;
          margin-left: 8px;
          background-color: $primary;
          opacity: 0.4;

          &.mouseEnter {
            opacity: 1;
          }
        }
      }

      >.pathIcon {
        width: 32px;
        height: 32px;
        font-size: 25px;
        transition: all 0.3s;
        color: #bdbdbd;
        margin-bottom: 1px;

        &.mouseEnter {
          color: #616161;
        }
      }

      // > .itemIcon {
      //   transition: all 0.3s;
      // }
      >.title {
        margin-left: 5px;
        font-weight: bold;
        color: #000000;
      }
    }

    >footer {
      margin-right: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;

      a {
        font-size: 18px;
      }

      >.toggle {
        height: 80%;
        width: 35px;
        margin-right: 15px;
        margin-top: 3px;
        color: #616161;
      }

      >.add {
        margin-right: 15px;
        margin-top: 3px;
        font-size: 21px;
        color: $positive;
      }

      >.edit {
        margin-right: 15px;
        color: $info;
      }

      >.delete {
        color: $negative;
      }
    }
  }

  .itemChidren {
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 30px;

    //展开动画CSS(不推荐,元素过多会出问题)
    // max-height:100vh;
    // overflow: hidden;
    // transition: all 1s;

    //透明动画CSS(能用)
    // transition: all 0.3s;
    // opacity: 1;
    &.hide {
      max-height: 0vh;
      //展开动画CSS(不推荐,元素过多会出问题)
      //  overflow: hidden;
      //  transition: all 0.4s;

      //透明动画CSS(能用)
      //   opacity: 0;
      display: none;
    }
  }
}
</style>
