<script>
import { onMounted, ref } from "vue"
import { get } from '../../utils/request'
import Dashboard from '@/components/icon/menu_dashboard.vue'
import Product from '@/components/icon/menu_product.vue'
import Team from '@/components/icon/menu_team.vue'
import License from '@/components/icon/menu_license.vue'
import Device from '@/components/icon/menu_device.vue'
import Settings from '@/components/icon/menu_setting.vue'
import Support from '@/components/icon/menu_support.vue'
import Order from '@/components/icon/menu_order.vue'
import Logout from '@/components/icon/logout.vue'
import Download from '@/components/icon/menu_download.vue'
import { userStore } from '@/store/userInfo'

export default {
  name: 'sideMenu',
  components: {
    Dashboard,
    Product,
    Team,
    License,
    Device,
    Settings,
    Support,
    Order,
    Download,
    Logout
  },
  data() {
    return {
      userName: '',
      email: '',
      role: '',
      isNoAdmin: false
    }
  },
  mounted() {
    this.role = userStore().user.role
    if (this.$route.query && this.$route.query.type === 'isNoAdmin') {
      this.isNoAdmin = true
    }
  },
  methods: {
    logout() {
      get('/pdf-tech/logout').then((res) => {
        if (res.data.code === 200 && res.data.msg == 'success') {
          this.$router.push('/login')
        }
      })
      this.$cookies.remove('accessToken')
      userStore().clearUserInfo()
    },
    updateUserInfo() {
      get(
        '/pdf-tech/vppMember/getMemberInfo'
      ).then((res) => {
        if (res.data.code === 200 && res.data.msg == 'success') {
          userStore().setUserInfo(res.data.result)
        }
      })
    }
  },
  filters: {
    avatar() {
      if (userStore().user.userName) {
        return userStore().user.userName.trim().substr(0, 1).toUpperCase()
      }
    },
    name() {
      if (userStore().user.userName) {
        return userStore().user.userName
      }
    },
    email() {
      if (userStore().user.userName) {
        return userStore().user.email
      }
    }
  },
  computed: {
    path() {
      if (this.$route.path === '/manage-team/create-team' || this.$route.path === '/manage-team/edit-team') {
        return '/manage-team'
      } else if (this.$route.path === '/manage-member/add-member' ||
        this.$route.path.indexOf('/manage-member/edit-member') !== -1) {
        return '/manage-member'
      } else if (this.$route.path === '/manage-admin/add-admin' ||
        this.$route.path.indexOf('/manage-admin/edit-admin') !== -1) {
        return '/manage-admin'
      } else {
        return this.$route.path
      }
    },
    roles() {
      if (this.role?.indexOf("1") !== -1) {
        return 'Super Admin'
      } else if (this.role?.indexOf("2") !== -1) {
        return 'Team Admin'
      } else if (this.role?.indexOf("4") !== -1) {
        return 'Reseller'
      } else {
        return 'Team member'
      }
    }
  }
}
</script>

<template>
  <div class=" flex flex-col justify-between h-100vh">
    <div class="aside ">
      <div class="user-info">
        <div class="head-photo">
          <p>{{ userName | avatar() }}</p>
        </div>
        <div class="info">
          <p>{{ userName | name() }}</p>
          <p>{{ email | email() }}</p>
        </div>
        <div class="type">{{ roles }}</div>
      </div>
      <el-menu :default-active="path" active-text-color="#1460F3" text-color="#232A40" router>
        <!-- <div v-if="role?.indexOf('2') !== -1 || role?.indexOf('1') !== -1"> -->
        <div>
          <el-menu-item index="/dashboard" :disabled="isNoAdmin">
            <Dashboard />
            <span>Home</span>
          </el-menu-item>
          <el-menu-item :index="isNoAdmin ? '/product?type=isNoAdmin' : '/product'">
            <Product />
            <span>Products</span>
          </el-menu-item>
          <el-menu-item index="/order" :disabled="isNoAdmin">
            <Order />
            <span>Order</span>
          </el-menu-item>
          <el-submenu index="3" :disabled="isNoAdmin">
            <template slot="title">
              <Team />
              <span>Team Management</span>
            </template>
            <el-menu-item index="/manage-team" :disabled="isNoAdmin">Manage Team</el-menu-item>
            <el-menu-item index="/manage-member" :disabled="isNoAdmin">Manage Member</el-menu-item>
            <el-menu-item index="/manage-admin" :disabled="isNoAdmin">Manage Admin</el-menu-item>
          </el-submenu>
          <el-submenu index="4" :disabled="isNoAdmin">
            <template slot="title">
              <License />
              <span>Manage License</span>
            </template>
            <el-menu-item index="/license-management" :disabled="isNoAdmin">Manage License</el-menu-item>
            <el-menu-item index="/assign-license" :disabled="isNoAdmin">Assign License</el-menu-item>
            <el-menu-item index="/batch-cancel-license" :disabled="isNoAdmin">Batch Remove</el-menu-item>
          </el-submenu>
          <el-menu-item index="/manage-device" :disabled="isNoAdmin">
            <Device />
            <span>Unbind Device</span>
          </el-menu-item>
        </div>
        <div v-if="role?.indexOf('4') !== -1">
          <el-menu-item index="/reseller-manage-product" :disabled="isNoAdmin">
            <Product />
            <span>Product Management</span>
          </el-menu-item>
          <el-menu-item index="/reseller-manage-license" :disabled="isNoAdmin">
            <License />
            <span>Manage License</span>
          </el-menu-item>
        </div>
        <el-menu-item :index="isNoAdmin ? '/download?type=isNoAdmin' : '/download'">
          <Download />
          <span>Download</span>
        </el-menu-item>
        <el-submenu index="6" :disabled="isNoAdmin">
          <template slot="title">
            <Settings />
            <span>Settings</span>
          </template>
          <el-menu-item index="/samlsetting" v-if="role?.indexOf('1') !== -1" :disabled="isNoAdmin">Directory
            Settings</el-menu-item>
          <el-menu-item index="/settings" :disabled="isNoAdmin">Personal Settings</el-menu-item>
        </el-submenu>
        <el-menu-item index="/support" :disabled="isNoAdmin">
          <Support />
          <span>Contact Us</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div @click="logout()"
      class="logout py-10px w-full max-w-260px bg-[#F6F7F9] flex items-center cursor-pointer sticky bottom-0">
      <Logout class="ml-27px" /><span class="ml-11px text-14px text-[#232A40] font-bold">Log out</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.aside {
  padding: 48px 20px 0;
  background-color: #fff;

  ::v-deep .el-submenu.is-active,
  ::v-deep .el-submenu.is-active .el-submenu__title {
    color: #1460F3 !important;
  }

  ::v-deep .el-submenu__title {
    color: #232A40 !important;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;

    .head-photo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #8D9CB9;

      p {
        font-weight: 700;
        font-size: 30px;
        line-height: 39px;
        color: #FFF;
      }
    }

    .info {
      margin-top: 8px;
      text-align: center;
      word-wrap: break-word;
      word-break: break-all;

      & p:first-child {
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        color: #232A40;
      }

      & p:last-child {
        font-size: 14px;
        line-height: 20px;
        color: #505258;
      }
    }

    .type {
      margin-top: 8px;
      padding: 4px 12px;
      height: 24px;
      background: #EEF4FF;
      border-radius: 31px;
      font-size: 12px;
      line-height: 16px;
      color: #2752A6;
      font-weight: 700;
    }
  }
}
</style>