<template>
  <div>
    <div class="wel__title">
      <i class="el-icon-menu title" style="margin-right: 10px;color: dodgerblue;"></i>
      常用菜单
    </div>
    <el-row :gutter="20" style="display: flex;flex-wrap: wrap">
      <el-col :xs="3" :sm="3" :xl="2" v-for="(item,index) in currentMenu">
        <div class="wel__menu" @click="handleClick(item,index)">
          <el-badge :value="badgeValue">
            <i :class="item.source" style="display: block;font-size: 50px;"></i>
            <span>{{item.menuName}}</span>
          </el-badge>
        </div>
      </el-col>
      <el-col :xs="3" :sm="3" :xl="2">
        <div class="wel__menu" @click="modal = true,badgeValue='删除'" style="padding-top: 5px">
          <div class="wel__menu-img" style="padding-bottom: 5px">
              <i class="el-icon-plus"></i>
          </div>
          <span>添加</span>
        </div>
      </el-col>
    </el-row>

    <div v-if="modal" class="wel__modalCont" @mousedown="move">
      <i class="wel__close el-icon-close" @click="modal = false,badgeValue=''"></i>
      <ul class="wel__modal">
        <li v-for="(item,index) in notMenu" :key="index">

          <div class="wel__modal-title">{{item.name}}</div>
          <div v-for="(secondMenu,sidx) in item.children" :key="sidx">
            <div v-if="!secondMenu.children">
              <div class="wel__modal-li" v-hide="secondMenu.show == false || secondMenu.name.indexOf('模块') != -1">
                <div class="wel__modal-title" style="margin-left: 10px">{{secondMenu.name}}</div>
                <el-button type="primary" round size="mini" @click="addmenu(secondMenu,sidx)">添加</el-button>
              </div>
            </div>
            <div v-else>
              <div class="wel__modal-title" style="margin-left: 30px">{{secondMenu.name}}</div>
              <div v-for="(thirdMenu,tidx) in secondMenu.children" :key="tidx">
                <div v-if="!thirdMenu.children">
                  <div class="wel__modal-li" v-hide="thirdMenu.show == false || thirdMenu.name.indexOf('模块') != -1">
                    <div class="wel__modal-title" style="margin-left: 50px">{{thirdMenu.name}}</div>
                    <el-button type="primary" round size="mini" @click.native="addmenu(thirdMenu,tidx)">添加</el-button>
                  </div>
                </div>
                <div v-else>
                  <div class="wel__modal-title" style="margin-left: 70px">{{thirdMenu.name}}</div>
                  <div v-for="(forthMenu,fordx) in thirdMenu.children" :key="fordx">
                    <div class="wel__modal-li" v-hide="forthMenu.show == false || forthMenu.name.indexOf('模块') != -1">
                      <div class="wel__modal-title" style="margin-left: 70px">{{forthMenu.name}}</div>
                      <el-button type="primary" round size="mini" @click.native="addmenu(forthMenu,fordx)">添加</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>
    <!--    <div v-if="modal" class="wel__modalCont" @mousedown="move">-->
    <!--      <i class="wel__close el-icon-close" @click="modal = false,badgeValue=''"></i>-->
    <!--      <ul class="wel__modal">-->
    <!--        <li v-for="(item,index) in notMenu" >-->
    <!--          <div class="wel__modal-title">{{item.name}}</div>-->
    <!--          <div class="wel__modal-li" v-for="(items,indexs) in item.child">-->
    <!--            <img class="wel__modal-img" src="http://img4.imgtn.bdimg.com/it/u=1688026885,2773767715&fm=26&gp=0.jpg" alt="">-->
    <!--            <span>{{items.name}}</span>-->
    <!--            <el-button type="primary" round size="mini" @click="addmenu(items,indexs)">添加</el-button>-->
    <!--          </div>-->
    <!--        </li>-->
    <!--      </ul>-->
    <!--    </div>-->
  </div>

</template>

<script>
  import {getList, add, remove} from "@/api/system/commonmenu";
  import {getCustomRoutes} from "@/api/system/menu";

  export default {
    name: "common-menu",
    data(){
      return{
        modal: false,
        badgeValue:'',
        currentMenu: [],//当前已添加的菜单
        notMenu: [],//列表的菜单
      }
    },
    created(){
      let _this = this;
      _this.loadMenu().then(function(){
        _this.removemenu({add:true});
      });
    },
    directives: {
      hide: {
        inserted: function(el,binding){
          el.style.display = binding.value == true ? 'none' : '';
        },
        update: function(el, binding){
          el.style.display = binding.value == true ? 'none' : '';
        }
      }
    },
    methods:{
      loadMenu(){
        let _this = this;
        return new Promise(function(resolve, reject){
          //    1、currentMenu
          getList(1, 10, {}).then(function(res){
            if (res.data.code == 200){
              let data = res.data.data;
              _this.currentMenu = data.records;
            }
            //    2、notMenu
            // getCustomRoutes().then(function(res){
            //   if (res.data.code == 200){
            //     _this.notMenu = res.data.data;
            //   }
            //   resolve({});
            // });
          });
        });
      },
      addmenu(items,indexs){
        let commonMenu = {};
        commonMenu.menuId = items.id;
        commonMenu.menuName = items.name;
        commonMenu.path = items.path;
        commonMenu.source = items.source;
        add(commonMenu).then(() => {
          this.currentMenu.push(commonMenu);
          this.removemenu();
        }, error => {
          console.log(error);
        });

        //1、添加数据库记录，添加到菜单view，删除列表view
      },
      removemenu(add){
        let arr = this.notMenu;
        if(this.currentMenu != null && this.currentMenu.length > 0){
          for(let j of arr){
            for (let i=0; i<j.children.length;i++) {
              if (!j.children[i].children || j.children[i].children.length == 0){
                let add = this.currentMenu.find((item)=>{
                  return item.menuName == j.children[i].name
                });
                if(add!==undefined){
                  // j.children.splice(i,1);
                  j.children[i].show = false;
                }else {
                  j.children[i].show = true;
                }
              }else{
                for (let k = 0; k < j.children[i].children.length; k++){
                  let add = this.currentMenu.find((item)=>{
                    return item.menuName == j.children[i].children[k].name
                  });
                  if(add!==undefined){
                    // j.children[i].children.splice(k,1);
                    j.children[i].children[k].show = false;
                  }else{
                    j.children[i].children[k].show = true;
                  }
                }
              }
            }
          }
        }
        this.notMenu = JSON.parse(JSON.stringify(arr));
        // this.notMenu = this.$store.getters.menu;

      },

      handleClick(item,index){
        if(this.modal){
          this.$confirm("确定删除此菜单?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              return remove(item.menuId);
            })
            .then(() => {
              this.currentMenu.splice(index,1);
              this.removemenu();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
        }else{
          //菜单点击
          this.$router.push({
              path:item.path,
            },
          );
        }
      },
      move(e){
        let odiv = e.target;        //获取目标元素
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        document.onmousemove = (e)=>{       //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          //移动当前元素
          odiv.style.left = left + 'px';
          odiv.style.top = top + 'px';
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }

    },
  }
</script>

<style scoped lang="scss">
  .wel {
    &__title {
      font-size: 16px;
      font-weight: bold;
    }
    &__menu {
      cursor: pointer;
      text-align: center;
      margin: 20px 0;
      &:hover &-img {
        transform: translateY(-10px);
        transition: all 0.4s;
      }
      &-img {
        width: 62px;
        height: 62px;
        margin: 5px auto;
        display: block;
        i {
          font-size: 30px;
          line-height: 62px;
          border: 1px dashed black;
          display: block;
        }
      }
      span {
        font-size: 14px;
      }
    }
    &__modalCont{
      position: fixed;
      top: 35%;
      left: 30%;
      width: 550px;
      padding: 10px 30px 30px 30px;
      border-radius: 4px;
      background: #fff;
      border: 1px solid #000;
      z-index: 1;
      cursor: move
    }
    &__close{
      font-size: 25px;
      float: right;
      margin-bottom: 10px;
      cursor:pointer;
    }
    &__modal{
      overflow-y: auto;
      width: 500px;
      height: 400px;
      padding:0;
      margin: 0;
      cursor: default;
      &-img{
        width: 62px;
        height: 62px;
      }
      &-title{
        height: 50px;
        line-height: 50px;
        font-weight: bold;
      }
      &-li{
        margin-left: 20px;
        display: flex;
        margin-bottom: 5px;
        justify-content: space-between;
        align-items: center;
        margin-right: 10px;
      }
    }
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
  {
    width: 4px;
    height: 4px;
    background-color: ghostwhite;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: ghostwhite;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background: lightgrey;
  }
</style>
