<template>
  <div class="mainMaster">
    <div class="menu">
      <img
        src="../../assets/img/logo.png"
        style="width: 100%; margin-bottom: 2em"
        alt=""
      />
      <div
        @click="() => selectMenuFunc(item)"
        v-for="(item, index) in menu"
        :key="index"
        :class="{
          'menu-item': true,
          active: selectMenu == item.path,
        }"
      >
        <span
          :class="{ menu_iconfont: true, [item.icon]: true }"
          style="margin-right: 5px;font-size: 20px;"
        >
        </span>
        {{ item.title }}
      </div>
    </div>
    <router-view class="rightMain" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const Router = useRouter();
const Route = useRoute();
const selectMenu = ref(Route.fullPath);
const menu = [
  {
    title: '智能校对',
    icon: 'icon-baoliao',
    path: '/main_home/proofread',
  },
  {
    title: '数据汇聚',
    icon: 'icon-RectangleCopy2',
    path: '/main_home/analysis',
  },
  {
    title: '地域热点',
    icon: 'icon-address',
    path: '/main_home/analysis_map',
  },
  {
    title: '报料中心',
    icon: 'icon-RectangleCopy3',
    path: '/main_home/reporting',
  },
  {
    title: '账号分析',
    icon: 'icon-RectangleCopy1',
    path: '/main_home/convergence',
  },
  {
    title: 'H5商城',
    icon: 'icon-RectangleCopy',
    path: '/main_home/H5Mall',
  },
  {
    title: 'AI绘图',
    icon: 'icon-aihuihua',
    path: '/main_home/easy_diffusion',
  },
  {
    title: 'AI对话',
    icon: 'icon-ai-chat',
    path: '/main_home/qh',
  },
  {
    title: 'AI+写作',
    icon: 'icon-ai-chat',
    path: '/main_home/AIeditor',
  },
];

for (let i = 0; i < menu.length; i++) {
  const v = menu[i];
  if (v.path === Route.fullPath) {
    document.title = v.title;
    break;
  }
}

const selectMenuFunc = item => {
  if (!item.path || Route.fullPath == item.path) return;
  selectMenu.value = item.path;
  document.title = item.title;
  Router.push({
    path: item.path,
    query: {},
  });
};
</script>

<style scoped>
.mainMaster {
  width: 100vw;
  height: 100vh;
  min-width: 960px;
  overflow: auto;
  display: flex;
}

.mainMaster .menu {
  position: relative;
  display: inline-block;
  max-width: 230px;
  min-width: 200px;
  padding: 32px 15px 0;
  background-color: #393b48;
  height: 99.7%;
  flex: 1;
}

.mainMaster .icon {
  width: 1.8em;
  margin-right: 6px;
  margin-top: 0.6em;
  float: left;
}

.mainMaster .rightMain {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
}

.menu-item {
  padding: 0 16px;
  height: 3em;
  line-height: 3em;
  cursor: pointer;
  font-size: 15px;
  color: #f3f3f3;
}
.mainMaster .min-item {
  padding-left: 5px;
  text-align: center;
  padding-right: 5px;
  width: 60px;
  background-color: #ddd;
}

.min-item .menu-item {
  padding: 10px 0px;
}
.min-item .icon {
  margin: 0;
}
.menu-item:hover {
  color: rgb(64, 158, 255);
}
.active {
  font-weight: 600;
  border-radius: 8px;
  color: rgb(64, 158, 255);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
