<template>
  <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
   <el-aside :style="AsideObj">
        <el-menu
            style="height: 100vh; overflow-x: hidden"
            background-color="rgb(170, 113, 81)"
            :collapse="isCollapse"
            :collapse-transition="false"
            text-color="#fff"
            router
            active-text-color="#ffd04b">
          <div style="height: 80px; color: white; font-weight: bold;
           display: flex; align-items: center; justify-content: center">
            <img src="../../assets/logo.png" alt="" style="height: 30px">
            <span style="margin-left: 5px" v-show="isShow">泠珑水阁管理系统</span>
          </div>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
                <span>用户管理</span>
            </template>

            <el-menu-item index="/PersonalCenter">
              <el-icon><UserFilled /></el-icon>
              <span slot="title">个人中心</span>
            </el-menu-item>

            <el-menu-item index="/UserManagement">
              <el-icon><List /></el-icon>
              <span slot="title">用户列表</span>
            </el-menu-item>

          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>商品管理</span>
            </template>

            <el-menu-item index="/AddProduct">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加商品</span>
            </el-menu-item>

            <el-menu-item index="/MerchandiseCenter">
              <el-icon><UserFilled /></el-icon>
              <span slot="title">商品中心</span>
            </el-menu-item>

            <el-menu-item index="/TypeManagement">
              <el-icon><Menu /></el-icon>
              <span slot="title">类别管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>优惠券管理</span>
            </template>
            <el-menu-item index="/AddCoupons">
              <el-icon><Menu /></el-icon>
              <span slot="title">添加优惠券</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>订单管理</span>
            </template>

            <el-menu-item index="/OrderList">
              <el-icon><Menu /></el-icon>
              <span slot="title">订单列表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
    </el-aside>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { defineProps } from 'vue';
import emitter from '@/utils/emitter'
import router from '@/router';
import {List} from "@element-plus/icons-vue";
defineProps(['send-data'])

const showLog = ref(true)

const isCollapse = ref(false)
const isShow = ref(true)
const sideWidth = ref(200)
const AsideObj = ref({
  width: '200px'
})

emitter.on('Aside', (value:any) => {
  showLog.value = value
  if(showLog.value){
    AsideObj.value.width = '64px'
    isCollapse.value = true
    isShow.value = false
    sideWidth.value = 64
  }else{
    AsideObj.value.width = '200px'
    isCollapse.value = false
    isShow.value = true
    sideWidth.value = 200
  }

})




</script>
<style scoped>

</style>