<template>
  <div class="header-nav">
    <div class="logo">
      <img :src="logoSrc" alt="logo" class="logo-icon" />
      <span class="logo-text">{{ title || versionCodeFilter(areaUid) }}</span>
      <span class="logo-version">{{ versionFilter(version) }}</span>
    </div>
    <div class="menu-container">
      <ul class="menu">
        <template v-for="(item, index) in routeList" :key="index">
          <li v-if="routeShow(item.show)" :class="path === item.path ? 'active' : ''">
            <template v-if="!item.children">
              <RouterLink v-if="item.type === 'current'" :to="item.path">{{ item.name }}</RouterLink>
              <a v-else :href="item.path">{{ item.name }}</a>
            </template>
            <Dropdown v-else overlayClassName="header-nav-dropdown">
              <a class="ant-dropdown-link" @click.prevent>
                {{ item.name }}
                <DownOutlined />
              </a>
              <template #overlay>
                <Menu>
                  <template v-for="(c, i) in item.children" :key="i">
                    <Item v-if="routeShow(c.show)" :key="i">
                      <a :href="c.path">{{ c.name }}</a>
                    </Item>
                  </template>
                </Menu>
              </template>
            </Dropdown>
          </li>
        </template>
      </ul>
    </div>

    <div class="user-info">
      <div class="user">
        <img src="@/assets/img/nav/user.svg" class="user-icon" />
        <span class="user-name">{{ userName || "用户" }}</span>
      </div>
      <div class="options">
        <ul>
          <li>
            <div class="user-config">
              <a href="/#/user_info">用户设置</a>
            </div>
          </li>
          <li><div class="logout" @click="logout">退出登录</div></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from "vue";
  import { Menu, Dropdown, Modal } from "ant-design-vue";
  import { DownOutlined } from "@ant-design/icons-vue";
  import { useRoute, RouterLink } from "vue-router";
  import { version } from "../../../package.json";
  import { getUserName, getUserPermission, VersionCodeEnum } from "@/utils/user";

  const { Item } = Menu;

  const routeList = [
    {
      name: "首页",
      path: "/",
      type: "current",
    },
    {
      name: "事件管理",
      path: "/#/alarm_record",
      show: "city",
    },
    {
      name: "事件管理",
      path: "/#/alarm_management",
      show: ["highWay", "service"],
    },
    {
      name: "监控管理",
      children: [
        {
          name: "事件监控",
          path: "/#/event_monitor",
        },
        {
          name: "实时监控",
          path: "/#/point_preview",
        },
      ],
    },
    {
      name: "数据分析",
      children: [
        {
          name: "高速道路分析",
          path: "/#/analysis_management?type=highway",
          show: "highWay",
        },
        {
          name: "市区道路分析",
          path: "/#/analysis_management?type=city",
          show: "city",
        },
        {
          name: "服务区流量分析",
          path: "/#/analysis_management?type=service",
          show: "service",
        },
      ],
    },
    {
      name: "车辆管理",
      show: "service",
      children: [
        {
          name: "在场车辆",
          path: "/#/present_car",
        },
        {
          name: "车辆档案",
          path: "/#/car_record",
        },
      ],
    },
    {
      name: "设备管理",
      path: "/#/device_management",
    },
  ];

  export default defineComponent({
    components: {
      Menu,
      Dropdown,
      Item,
      DownOutlined,
      RouterLink,
    },
    setup() {
      const route = useRoute();
      const path = route.path;

      const userPermission = getUserPermission();
      const versionCode = userPermission?.versionCode;
      const areaUid = userPermission?.areaUid;
      const title = userPermission?.title;
      const icon = userPermission?.iconHashName;
      const userName = getUserName();

      // logo
      const logoSrc = computed(() => {
        return icon ? `/api/media/${icon}` : require("@/assets/img/nav/LOGO.png");
      });

      const origin = window.location.origin;
      const logout = () => {
        Modal.confirm({
          title: "确定退出吗？",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            localStorage.clear();
            window.location.href = origin;
          },
        });
      };

      const versionCodeFilter = (val: VersionCodeEnum | undefined) => {
        switch (val) {
          case VersionCodeEnum.高速:
            return "高速公路交通管理系统";
          case VersionCodeEnum.城市:
            return "市区道路交通管理系统";
          case VersionCodeEnum.服务区:
            return "高速服务区管理系统";
          default:
            return "";
        }
      };

      const versionFilter = (val: string) => {
        return val ? val.split("-")[0] : "";
      };

      const routeShow = (show: string | string[] | undefined) => {
        if (versionCode) {
          if (!show) return true;

          if (typeof show === "string") {
            return versionCode === show;
          }

          return show.indexOf(versionCode) > -1;
        } else {
          return true;
        }
      };

      return {
        routeList,
        routeShow,
        version,
        versionCode,
        areaUid,
        title,
        logoSrc,
        versionCodeFilter,
        versionFilter,
        userName,
        logout,
        path,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import "~@/assets/style/global.less";
  .header-nav {
    width: 100%;
    height: 60px;
    padding: 0;
    box-sizing: border-box;
    background: @themeColor;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 999;

    .logo {
      display: inline-block;
      width: 30%;
      padding-left: 32px;
      height: 100%;
      line-height: 60px;
      font-size: 18px;
      color: #fff;
      vertical-align: top;
      text-align: left;
      box-sizing: border-box;
      flex: none;
      overflow: hidden;

      .logo-icon {
        width: 130px;
        vertical-align: middle;
        margin-right: 20px;
      }
      .logo-text {
        font-size: 16px;
        color: #f1f1f4;
        vertical-align: sub;
      }
      .logo-version {
        font-size: 12px;
        color: #fff;
        opacity: 0.5;
        vertical-align: sub;
        padding-left: 5px;
      }
    }

    .menu-container {
      height: 100%;
      flex: auto;
      box-sizing: border-box;

      .menu {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        flex: auto;
        margin: 0;
        padding: 0;

        li {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0.7;

          &:hover {
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
          }
          &.active {
            opacity: 1;
            background: @activeColor;
          }

          a {
            display: inline-flex;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            align-items: center;
            color: #fff;

            .name {
              font-size: 14px;
            }
          }
        }
      }
    }

    .user-info {
      display: inline-block;
      height: 100%;
      font-size: 14px;
      color: #fff;
      position: relative;
      background: @themeColor;
      .user {
        display: inline-block;
        cursor: pointer;
        padding: 0 20px;
        line-height: 60px;

        .user-icon {
          width: 24px;
          vertical-align: middle;
          margin-right: 5px;
        }
        .user-name {
          vertical-align: middle;
        }
      }
      .options {
        position: absolute;
        left: 0;
        top: 60px;
        width: 100%;
        padding: 0 20px;
        border-radius: 8px;
        display: none;
        box-sizing: border-box;
        box-shadow: 1px 2px 5px 0 #333;
        background: @themeColor;

        ul {
          position: static;

          li {
            font-size: 14px;
            height: 28px;
            line-height: 28px;
            margin: 10px 0;
            text-align: center;
            cursor: pointer;
            opacity: 1;
            color: #fff;
            opacity: 0.7;

            a {
              color: #fff;
            }

            &:hover {
              opacity: 1;
              // background: rgba(0, 0, 0, 0.2);
            }
          }
        }
      }

      &:hover .options {
        display: inline-block;
      }
    }
  }
</style>

<style lang="less">
  @import "~@/assets/style/global.less";
  .header-nav-dropdown {
    .ant-dropdown-menu {
      background: @themeColor;
      color: #fff;
      width: 200px;
      left: -20px;
      top: 5px;
      border-radius: 4px;

      li {
        background: @themeColor;
        color: #fff;

        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }

        a {
          color: #fff;
          opacity: 0.7;

          &:hover,
          &.active {
            opacity: 1;
          }
        }
      }
    }
  }
</style>
