<template>
  <div class="menu_item" :class="[isCollapse ? 'hideSide' : 'openSide']" :style="[isCollapse ? { width: sideHideWidth } : { width: sideOpenWidth }]">
    <div
      :class="['logo_title', { paddingLeft31: isCollapse, paddingLeftInstance: !isChildren }]"
      :style="[isCollapse ? { width: sideHideWidth } : { width: sideOpenWidth }]"
      @click="onTitle()"
    >
      <div class="menu_change_container">
        <img :src="logoImage" class="menu_change_image" v-if="isChildren && !isCollapse" />
        <div class="slider" v-if="isChildren && !isCollapse"></div>
      </div>
      <img :src="logoImg" alt="" />
      <span class="title">{{ sysName }}</span>
    </div>
    <el-scrollbar class="scrollbar_box" wrap-class="scrollbar-wrap">
      <el-menu
        :unique-opened="uniqueOpened"
        :collapse="isCollapse"
        mode="vertical"
        :background-color="menuBg"
        :active-text-color="menuActiveText"
        :text-color="menuText"
        class="menu_box el-menu-vertical-demo"
        :default-active="activePath"
      >
        <menu-item
          :data="menuData"
          :title="title"
          :children="children"
          :sideHideWidth="sideHideWidth"
          :sideOpenWidth="sideOpenWidth"
          :isCollapse="isCollapse"
          :visible="visible"
          :visibleContrary="visibleContrary"
          @activeIndex="toRouterPath"
        ></menu-item>
      </el-menu>
    </el-scrollbar>

    <!-- 添加抽屉，用于子应用 -->
    <el-drawer v-if="isChildren" direction="ltr" append-to-body :visible.sync="showDrawer" :size="360" :close-on-press-escape="false" :with-header="false">
      <div class="drawer_container">
        <div class="drawer_header">
          <div class="back_to_base_app" @click="backToGp3">
            <i class="el-icon-home"></i>
            <span class="back_text">工作台</span>
          </div>
          <i class="el-icon-close" @click="closeDrawer"></i>
        </div>
        <!-- 搜索框 -->
        <div class="drawer_search">
          <el-input placeholder="输入名称来搜索" prefix-icon="el-icon-search" v-model="searchAppName" clearable></el-input>
        </div>
        <div class="app_handle_container">
          <!-- 我的应用 -->
          <div class="my_app_text marginTop0">我的应用</div>
          <!-- 我的app 列表 -->
          <div class="drawer_app_container">
            <div class="collapse_content" v-for="(group, groupIndex) in appList" :key="group.groupId">
              <div class="collapse_group_name" @click.stop="group.showCollapse = !group.showCollapse">
                <i :class="['el-icon-caret-right', { rorate_90: group.showCollapse }]"></i>
                <span class="app_name">{{ group.groupName }}</span>
              </div>
              <!-- 点击展开的项目 -->
              <div class="collapse_item_content" v-if="group.showCollapse">
                <div class="collapse_item" v-for="(app, appIndex) in group.apps" :key="app.id" @click.stop="handoffApp(app)">
                  <div class="app_icon_bg" :style="{ background: app.appThemeColor }">
                    <i :class="['firefly-el-icon', app.appIcon?app.appIcon:'el-icon-ff-resources']"></i>
                  </div>
                  <span class="app_name">{{ app.appName }}</span>
                </div>
              </div>
            </div>

            <div class="has_nodata" v-if="appList.length <= 0">暂无数据</div>
          </div>

          <!-- 最近使用 -->
          <div class="my_app_text" v-if="lastUseList.length > 0">最近使用</div>
          <div class="drawer_app_container">
            <div class="collapse_content">
              <div class="collapse_item_content">
                <div class="collapse_item" v-for="(app, appIndex) in lastUseList" :key="app.serviceId" @click.stop="handoffApp(app)">
                  <div class="app_icon_bg" :style="{ background: app.appThemeColor }">
                    <i :class="['firefly-el-icon', app.appIcon?app.appIcon:'el-icon-ff-resources']"></i>
                  </div>
                  <span class="app_name">{{ app.appName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import MenuItem from './menuItem.vue';
// import './iconfont/iconfont.css';
import { debounceFun } from '../../../../utils/debounce.js';

const GP3_APP_USE_LIST = 'GP3_APP_USE_LIST';
export default {
  name: 'FireflyMenu',
  components: { MenuItem },
  data() {
    return {
      showDrawer: false,
      searchAppName: '',
      logoImage:  require('../../../image/fireflyMenu/left.png'),
      appList: [],
      copyAppList: [],
      lastUseList: []
    };
  },
  props: {
    // 判断是否是子应用用的菜单组件
    isChildren: {
      type: Boolean,
      default: true
    },
    // lastUseList 最近使用的列表
    useList: {
      type: Array,
      default: () => []
    },
    // 判断是否取反
    visibleContrary: {
      type: Boolean,
      default: false
    },
    // 菜单是否隐藏(必填)
    visible: {
      type: String,
      default: null,
      require: true
    },
    // logo图(非必填)
    logoImg: {
      type: String,
      default: () => require('../../../image/fireflyMenu/logo.png')
    },
    // 系统名称(必填)
    sysName: {
      type: String,
      default: '',
      require: true
    },
    // 控制菜单是收起还是展开(非必填)
    isCollapse: {
      type: Boolean,
      default: true
    },
    // 菜单背景色(非必填)
    menuBg: {
      type: String,
      defalut: '#ffffff'
    },
    // 菜单的文字颜色(非必填)
    menuText: {
      type: String,
      default: '#444'
    },
    // 激活菜单的文字颜色(非必填)
    menuActiveText: {
      type: String,
      default: '#45b2ff'
    },
    // 菜单路由(必填)
    menuData: {
      type: Array,
      default: '',
      require: true
    },
    // 侧边宽度隐藏(非必填)
    sideHideWidth: {
      type: String,
      default: '88px'
    },
    // 侧边宽度打开(非必填)
    sideOpenWidth: {
      type: String,
      default: ''
    },
    // 当前路由(非必填)
    activeIndex: {
      type: String,
      default: ''
    },
    // title的背景图片
    titleBgImg: {
      type: String,
      default: () => require('../../../image/fireflyMenu/top_nav_bg.png')
    },
    // 路由子节点 默认children(非必填)
    children: {
      type: String,
      default: 'children'
    },
    // 菜单传值
    title: {
      type: String,
      default: 'title'
    },
    // // 默认展开的菜单
    // opends: {
    //   type: Array,
    //   default: [],
    // },
    // 当前点击的path(非必填)
    activePath: {
      type: String,
      default: ''
    },
    uniqueOpened: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    searchAppName: debounceFun(function (newV, oldV) {
      this.searchAppByName();
    }),
    useList(newV, oldV) {
      this.lastUseList = newV
    }
  },

  created() {
    if (this.isChildren) {
      const appList = localStorage.getItem(GP3_APP_USE_LIST) && localStorage.getItem(GP3_APP_USE_LIST) != '[]' ? JSON.parse(localStorage.getItem(GP3_APP_USE_LIST)) : [];
      appList.forEach(app => {
        app.showCollapse = false;
      });
      this.appList = appList;
      this.copyAppList = appList;
    }
  },
  methods: {
    toRouterPath(path) {
      this.$emit('activeIndex', path);
    },
    // 点击title的方法
    onTitle() {
      this.showDrawer = true;
    },

    // 点击返回 gp3
    backToGp3() {
      this.$emit('titleClick');
    },

    // 切换 app
    handoffApp(app) {
      this.$emit('handoffApp', app);
    },

    // 处理鼠标事件
    handleMouseEvent(type) {
      if (!this.isChildren) return;
      // if (type == 'over') {
      //   this.logoImage = require('../../../image/fireflyMenu/d-arrow-left.png');
      // } else {
      //   this.logoImage = require('../../../image/fireflyMenu/d-arrow-left.png');
      // }
    },

    // 关闭抽屉
    closeDrawer() {
      this.showDrawer = false;
      this.$emit('closeDrawer');
    },

    searchAppByName() {
      const appName = this.searchAppName;
      if (!appName) {
        return (this.appList = this.copyAppList);
      }
      const copyAppList = JSON.parse(JSON.stringify(this.copyAppList));
      const filterList = copyAppList.filter(appInstance => {
        const appList = appInstance.apps.filter(app => app.appName.includes(appName));
        if (appList.length > 0) {
          appInstance.apps = appList;
          return appInstance;
        }
      });
      this.appList = filterList;
    }
  }
};
</script>
<style lang="scss" scoped>
@import '../../../css/fireflyMenu.scss';
</style>
