<template>
  <div class="fbg-menu">
    <ul class="fbg-menu-list">
      <li class="fbg-menu-list-item fbg-menu-list-app active">
        <span> <i class="fbgiconfont icon-kuaijiecaidan fbg-menu-list-icon" /></span>
        <div class="fbg-submenu">
          <div class="fbg-submenu-box">
            <ul class="fbg-submenu-box-main" style="min-width: 120px;padding:0px;">
              <li v-for="(item,index) in shortcutDataList" :key="index">
                <div class="fbg-submenu-title" @click="handleClick(item.path, item)">
                  <i :class="item.icon" />
                  <span>{{item.label}}</span>
                </div>
              </li>
              <fbg-divider class="fbg-divider" />
              <li>
                <div class="fbg-submenu-title" @click="dialogVisible = true">
                  <i class="fbgiconfont icon-bianji" />
                  <span>编辑快捷菜单</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="fbg-menu-list-item" v-for="(item, index) in menuList" :key="index">
        <div @click="handleClick(item.path, item)"><span>{{item.label}}</span></div>
        <div class="fbg-submenu" v-if="item.children && item.children.length">
          <div class="fbg-submenu-box">
            <ul class="fbg-submenu-box-main" :style="{minWidth:item.permissions === 'FPS' ? '320px !important' : '220px !important'}">
              <li v-for="(child, i) in item.children" :key="i">
                <div class="fbg-submenu-title">
                  <i :class="(child.icon ? child.icon :'') + ' ' + (child.iconClass || '')" />
                  <span>{{child.label}}</span>
                </div>
                <ul class="fbg-submenu-container" v-if="child.children && child.children.length">
                  <li v-for="(page, k) in child.children" :key="k" class="fbg-submenu-container-item" @click="handleClick(page.path, page)">{{page.label}}</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="fbg-menu-list-search">
        <i class="fbg-icon-search" @click="isShowSearchBox = !isShowSearchBox"/>
        <div :class="{'fbg-menu-list-search-box': true, open: isShowSearchBox, hide: !isShowSearchBox}">
          <el-input ref="mainRef" v-model="searchContent" icon="search" @select="handleSelectMenu" @iconClick="handleSearch" :autocomplete="autocompleteFun" style="width: 275px;"/>
          <span style="color: #ccc;vertical-align: middle;">|</span>
          <i class="fbg-icon-close fbg-menu-list-search-close" @click="isShowSearchBox = false"/>
        </div>
      </li>
    </ul>

    <fbg-dialog title="编辑快捷菜单" :visible.sync="dialogVisible" width="800px">
      <div class="fbg-dialog-body">
        <ul class="fbg-menu-selected-list" >
          <li v-for="(item, index) in shortcutDataList" :key="index" class="fbg-menu-selected-item">
            <span>{{item.label}}</span>
            <i class="fbgiconfont icon-guanbishanchu" style="padding-left:10px;" @click="handleClose(index, item)"/>
          </li>
        </ul>
        <fbg-row class="fbg-shortcut-menu" v-for="(item, index) in editMenuList" :key="index">
          <fbg-col class="fbg-shortcut-menu-title"  :span="4">
            {{item.label}}：
          </fbg-col>
          <fbg-col class="fbg-shortcut-content" :span="20" >
            <fbg-row>
              <fbg-col v-for="(child, i) in item.children" :key="i" :class="{'fbg-shortcut-menu-item': true, 'active': child.isActive}" :span="4" @click.native="handleSelectedClick(child, item)">{{child.label}}</fbg-col>
            </fbg-row>
          </fbg-col>
        </fbg-row>
      </div>
      <div slot="footer">
        <fbg-button type="primary" @click="handleConfirm" style="margin-right: 10px;">确定</fbg-button>
        <fbg-button @click="handleCancel">取消</fbg-button>
      </div>
    </fbg-dialog>
  </div>
</template>
<script>
import {Divider, Row, Col} from 'element-ui';
import Dialog from '../dialog';
import Button from '../button';
import Input from '../input';

export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    shortcutData: {
      type: Array,
      default() {
        return [];
      }
    },
    bindKey: {
      type: String,
      default: 'id'
    },
    confirm: {
      type: Function,
      default() {
        return () => {};
      }
    },
    useRouter: {
      type: Boolean,
      default: true
    }
  },
  components: {
    'fbg-divider': Divider,
    'fbg-dialog': Dialog,
    'fbg-row': Row,
    'fbg-col': Col,
    'fbg-button': Button,
    'fbg-input': Input
  },
  data() {
    return {
      isShowSearchBox: false,
      dialogVisible: false,
      searchContent: '',
      shortcutDataList: [],
      editMenuList: [],
      menuList: [],
      flatMenuList: [],
      shortcutDataCache: []
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(data) {
        this.menuList = this.createdMenuList(data);
        this.flatMenuList = this.flatArray(this.menuList);
        this.editMenuList = this.createdMenuData(this.menuList);
        this.shortcutDataList = this.createdShortcutDataList(this.editMenuList, this.shortcutDataCache);
      }
    },
    shortcutData: {
      immediate: true,
      deep: true,
      handler(data) {
        this.initShortcutData(data);
      }
    },
    dialogVisible: {
      immediate: true,
      handler() {
        this.initShortcutData(this.shortcutData);
      }
    },
    searchContent: {
      immediate: true,
      handler(value) {
        this.$emit('searchConetntChange', value);
      }
    },
    isShowSearchBox: {
      immediate: true,
      handler(value) {
        if (value) {
          let timer = setTimeout(() => {
            this.$refs.mainRef.focus();
            clearTimeout(timer);
            timer = null;
          }, 300);
        }
      }
    }
  },
  methods: {
    flatArray(list) {
      const arr = [];
      list && list.forEach(item => {
        arr.push(item);
        if (item.children && item.children.length) {
          const children = this.flatArray(item.children);
          arr.push(...children);
        }
      });
      return arr;
    },
    handleSelectedClick(item) {
      const flag =  !item.isActive;
      this.$set(item, 'isActive', flag)
      const value = item[this.bindKey];
      if (flag) {
        this.shortcutDataCache.push(value);
        this.shortcutDataList.push(item);
      } else {
        const index = this.shortcutDataCache.indexOf(value);
        if (index > -1) {
          this.shortcutDataCache.splice(index, 1);
          this.shortcutDataList.splice(index, 1);
        }
      }
      this.$emit('selected', item, this.shortcutDataCache);
    },
    async handleConfirm() {
      const res = await this.confirm(this.shortcutDataCache);
      if (res) {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = false;
      }
    },
    handleCancel() {
      this.shortcutDataCache = [...this.shortcutData];
      this.dialogVisible = false;
    },
    handleClose(index, item) {
      this.$set(item, 'isActive', !item.isActive);
      this.shortcutDataCache.splice(index, 1);
      this.shortcutDataList.splice(index, 1);
    },
    handleClick(path, item) {
      if ( (!item.children || (item.children instanceof Array && !item.children.length)) && item.path) {
        this.pushRouter(path);
      }
    },
    handleSelectMenu(item) {
      this.pushRouter(item.path);
    },
    handleSearch() {

    },
    pushRouter(path) {
        if (this.useRouter) {
        this.$router.push({
          path: path
        });
      }
    },
    async autocompleteFun(value) {
      const arr = [];
      this.flatMenuList.forEach(item => {
        if (item.label.indexOf(value) > -1) {
          if (item.path) {
            arr.push({
              label: item.label,
              path: item.path
            });
          }
        }
      });
      return arr;
    },
    createdMenuList(data) {
      const arr = [];
      data.forEach(item => {
        const _item = {...item};
        arr.push(_item);
        if (item.children instanceof Array && item.children.length) {
          _item.children = [];
          item.children.forEach(child => {
            const _child = {...child};
            _item.children.push(_child);
            if (child.children instanceof Array && child.children.length) {
              _child.children = [];
              child.children.forEach(page => {
                _child.children.push({...page, icon: child.icon, iconClass: child.iconClass});
              });
            } else {
              _child.children = [{...child}];
            }
          });
        }
      })
      return arr;
    },
    // 初始化快捷菜单数据
    initShortcutData(data) {
      this.shortcutDataCache = [...data];
      this.shortcutDataList = this.createdShortcutDataList(this.editMenuList, this.shortcutDataCache);
    },
    // 创建快捷菜单数据列表
    createdShortcutDataList(data, value) {
      const arr = [];
      data.forEach(item => {
        item.children instanceof Array && item.children.forEach(child => {
          if (value.indexOf(child[this.bindKey]) > -1) {
            this.$set(child, 'isActive', true);
            arr.push(child);
          } else {
            this.$set(child, 'isActive', false);
          }
        })
      })
      return arr;
    },
    // 创建编辑菜单的数据
    createdMenuData(data) {
      const arr = [];
      data.forEach(item => {
        const obj = {...item};
        obj.children = [];
        item.children instanceof Array && item.children.forEach(child => {
          child.children instanceof Array && child.children.forEach(page => {
            obj.children.push({...page, icon: child.icon});
          });
        })
        if (item.children instanceof Array && item.children) {
          arr.push(obj);
        }
      });
      return arr;
    }
  }
}
</script>
<style lang="scss">
.fbg {
  &-menu {
    &-list {
      &-search {
        &-box {
          .fbg-input-item {
            border: 0px!important;
          }
          .fbg-input {
            position: static;
          }
          .fbg-input-search-box {
            box-shadow: 0px 0px 3px $themeShadowColor;
            border: 0px;
            z-index: 100;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.fbg {
  &-divider {
    margin: 0px 10px;
    width: auto;
  }
  &-menu {
    width: 100%;
    background-color: $themeColor;
    color: #fff;
    box-sizing: border-box;
    padding: 0px 30px;
    &-list {
      font-size: 0px;
      &-icon {
        font-size: 16px;
      }
       &-app {
         font-size: 16px;
         .fbg-submenu {
            min-width: 130px;
            &-title {
              cursor: pointer;
            }
            &-title:hover {
              background-color: $hoverBackgroundColor;
              span {
                color: $themeColor;
              }
            }
         }
      }
      .active {
        background-color: $activeThemeColor;
      }
      &-search {
        line-height: 40px;
        float: right;
        position: relative;

        &-close {
          color: #666;
          font-size: 18px!important;
          padding-left: 3px;
          vertical-align: middle;
        }
        &-box {
          width: 310px;
          position: absolute;
          z-index: 99;
          background-color: #fff;
          right: 0px;
          transition: transform 0.3s,visibility 0.3s;
          transform-origin:50% 50%;
          box-shadow: 0px 1px 5px $themeShadowColor;
          padding: 1px 5px;
          margin-top: 10px;
        }
        &-box.open {
          visibility: visible;
          transform: rotateY(0deg);
        }
        &-box.hide {
          transform: rotateY(80deg);
          visibility: hidden;
        }
        i {
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
        }
      }
      &-item {
	    transition: background-color 0.5s;
	    background-color: $themeColor;
        vertical-align:bottom;
        line-height: 40px;
        padding: 0 12px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        &:hover {
          background-color: $activeThemeColor;
          .fbg-submenu {
            visibility: visible;
            &-box {
              &-main {
			    opacity: 1;
			    transform: translate(0, 0);
              }
            }
          }
        }
      }
	  .fbg-menu-list-app {
	  	.fbg-submenu-title {
	  	  span {
	  	  	font-size: 12px !important;;
	  	  }
	  	}
	  }
    }
    &-selected {
      &-list {

      }
      &-item {
        border: 1px solid $themeColor;
        border-radius: 3px;
        text-align: center;
        color: $themeColor;
        padding: 3px 12px;
        margin-right: 10px;
        display: inline-block;
      }
    }
    .fbg-submenu-title {
		i {
			font-size: 18px;
		}
	}
  }
  &-shortcut {
    &-menu {
      &-title {
        margin-top: 10px;
      }
      .active {
        color: $themeColor;
      }
      &-item {
        margin-top: 10px;
        &:hover {
          color: $themeColor;
        }
        transition: all 0.3;
      }
    }
  }
  &-submenu {
    position: absolute;
    top: 100%;
    left: 0px;
    visibility: hidden;
    line-height: normal;
    display: inline-block;
    background-color: #fff;
    z-index: 999999;
    &-box {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 10px;
      padding-top: 0px;
      top: 0px;
      left: -10px;
      &-main {
        padding: 10px;
        position: relative;
        transition: all 0.3s ease-out;
        box-shadow: 0px 1px 8px $themeShadowColor;
        min-width: 200px;
        background-color: #fff;
	    opacity: 0;
	    transform: translate(0, -25px);
      }
    }
    &-title {
      color: #333;
      cursor: default;
      padding: 8px 10px;
      span {
		color: #333333;
		font-size: 14px;
        margin-left: 5px;
      }
    }
    &-container {
      padding-left: 36px;
      &-item {
        display: inline-block;
        color: #666;
        width: 90px;
        font-size: 12px;
        padding: 5px 0px;
        &:hover {
          color: $themeColor;
        }
      }
    }
  }
}
</style>
