<script lang="ts" setup>
import Header from './header.vue'
import Assocmodule from './assocmodule.vue'
import Assocmenu from './assocmenu.vue'
import { findApplicationById } from "@/api/application/application"
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted,reactive,nextTick } from 'vue'
import menuconfig_treeadd_white from '@/assets/svg/menuconfig_treeadd_white.svg'
import icon_user_connect_white from '@/assets/svg/user_connect_white.svg'
import icon_permission_more_white from '@/assets/svg/icon_more-vertical_outlined_white.svg'
import { ElTree,FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMenuTree,addMenu,updateMenuById,deleteMenuById } from '@/api/permission/menu'
import type {
  NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
const projectInfo:any =ref({})
const route = useRoute()
const router = useRouter()
const applicationId:any =ref("")
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const treeData:any = ref([])
const defaultProps = {
  children: 'children',
  label: 'name'
}
const treeloading = ref(false)
const hoverNodeId = ref(null)
const currentNodeId = ref(null)
const preventcombo = ref(false)
const dialogVisible = ref(false)
const title = ref('')
const ruleForm:any = ref({})
const ruleFormRef = ref<FormInstance>()
const rules = ref({
  name: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
  ],
})
const showmodule = ref(false)
const assocdialog = ref(false)
// 关联
const assocmenuname = ref('')
const assoccurrentid = ref('')
const isFormCreate = ref(false)
const dataInitState = ref(true)

const rightloading = ref(false)
const moduleinfo = ref({})
const handleMouseEnter = (node) => {
  hoverNodeId.value = node.key; 
};
const handleMouseLeave = () => {
  hoverNodeId.value = null;
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if(preventcombo.value){
        return
      }
      preventcombo.value = true
      if(ruleForm.value.id !== ''){
        updateMenuById(ruleForm.value).then(res => {
          ElMessage({
            type: 'success',
            message: '修改成功',
          })
          dialogVisible.value = false
          preventcombo.value = false
          gettree()
        })
      }else{
        addMenu(ruleForm.value).then(res => {
          ElMessage({
            type: 'success',
            message: '新增成功',
          })
          dialogVisible.value = false
          preventcombo.value = false
          gettree()
        })
      }
    } else {
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drop:', draggingNode,dropNode, dropType,ev)
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
   if (draggingNode.level === dropNode.level) {
          return type === 'prev' || type === 'next'
        } else {
          // 不同级进行处理
          return false
        }
}
onMounted(() => {
  if (route.query.id) {
    applicationId.value = route.query.id
    findApplicationById(applicationId.value).then(res => {
      res.data.data.typename = '菜单设置'
      projectInfo.value = res.data.data
    })
    gettree()
  }
})
function assocclick(data:any){
  isFormCreate.value = false
  dataInitState.value = false
  assocmenuname.value = data.name
  currentNodeId.value = data.id
  if(data.module_id !== '' && data.module_id !== undefined){
    assoccurrentid.value = data.module_id
  }else{
    assoccurrentid.value = ''
  }
  assocdialog.value = true
}

function gettree() {
   treeloading.value = true
   const params = { 
    appId: applicationId.value,
    name:'',
    isdisplay:''
   }
   getMenuTree(params).then(res => {
    treeloading.value = false
    treeData.value = res.data
   }) 
}
function querytree() {
  treeloading.value = true
  const params = { 
    appId: applicationId.value,
    name:filterText.value,
    isdisplay:''
   }
   getMenuTree(params).then(res => {
    treeloading.value = false
    treeData.value = res.data
   }) 
}
function nodeclick(data:any,node:any){
  moduleinfo.value = {}
  currentNodeId.value = node.key
  showmodule.value = false
  assocdialog.value = false
  if(data.module_id !== '' && data.module_id !== undefined){
    moduleinfo.value = data
    showmodule.value = true
  }else{
    showmodule.value = false
  }
}
function addtree(){
  title.value = '新增菜单'
  ruleForm.value = {
    id:'',
    appId:applicationId.value,
    name: '',
    code:'',
    parentid:'0',
    type:'01'
  }
  dialogVisible.value = true;
}
function addchilnode(data:any){
  title.value = '新增子菜单'
  ruleForm.value = {
    id:'',
    appId:applicationId.value,
    name: '',
    code:'',
    parentid:data.id,
    type:'01'
  }
  dialogVisible.value = true;
}
function rename(data:any){
  title.value = '重命名'
  ruleForm.value = JSON.parse(JSON.stringify(data))
  dialogVisible.value = true;
}
function deltree(data:any){
    ElMessageBox.confirm(
    '确定删除该条信息吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    deleteMenuById(data.id).then(res => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        gettree()
      })
    })
    .catch(() => {
   
    })
}
function handleClose() {
  ruleFormRef.value?.resetFields();
  dialogVisible.value = false;
}
function assochandleClose() {
  assocdialog.value = false;
}
function assocsubmit(){
  assocdialog.value = false;
  gettree()
}
</script>

<template>
   <div>
      <Header :projectInfo="projectInfo" />
      <div class="permission-box">
        <div class="permission-leftbox">
          <div class="permission-leftbox-title">
            <div>菜单列表</div>
            <div>
              <el-icon @click="addtree">
                <menuconfig_treeadd_white class="svg-icon" />
              </el-icon>
            </div>
          </div>
          <el-input v-model="filterText" placeholder="请输入" @blur="querytree" />
          <el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
            default-expand-all :expand-on-click-node="false" highlight-current draggable @node-drop="handleDrop"
            :allow-drop="allowDrop" @node-click="nodeclick" style="height: calc(100vh - 210px);margin-top: 10px;overflow: auto;">
            <template #default="{ node, data }">
              <div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
                @mouseleave="handleMouseLeave()">
                <div>{{ node.label }}</div>
                <div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;" >
                    <div @click.stop="assocclick(data)">
                      <el-icon style="font-size: 16px;margin-top: 13px;">
                        <icon_user_connect_white class="svg-icon"/>
                      </el-icon>
                    </div>
                    <div style="margin-left: 8px;">
                      <el-popover placement="right" trigger="click">
                        <template #reference>
                          <el-icon style="font-size: 16px;margin-top: 13px;">
                              <icon_permission_more_white class="svg-icon"/>
                           </el-icon>
                        </template>
                        <div class="menu-item" @click.stop="addchilnode(data)">添加子菜单</div>
                        <div class="menu-item" @click.stop="rename(data)">重命名</div>
                        <div class="menu-item" @click.stop="deltree(data)">删除</div>
                      </el-popover>
                    </div>
                </div>
                </div>
            </template>
        </el-tree>
        </div>
        <div v-if="showmodule" v-loading="rightloading" class="permission-rightbox">
          <Assocmodule v-if="showmodule" :applicationId="applicationId" :moduleinfo="moduleinfo" />
        </div>
      </div>
      <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <Assocmenu v-if="assocdialog" :assoccurrentid="assoccurrentid" 
      :applicationId="applicationId" :assocmenuname="assocmenuname" :projectname="projectInfo.name"
       :currentNodeId="currentNodeId" @assochandleClose="assochandleClose" @assocsubmit="assocsubmit" />
    </div> 
</template>

<style lang="less" scoped>
.permission-box{
   background: rgb(21,21,21);
   height: calc(100vh - 60px);
   display: flex;
   .permission-leftbox{
      width: 260px;
      height: 100%;
      border-right: 1px solid #4f5052;
      background: rgb(37,38,38);
      padding: 10px;
      .permission-leftbox-title{
        color: #F2F4F5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        margin-top: 10px;
        margin-bottom: 10px;
      }
   }
   .permission-rightbox{
      width: calc(100% - 260px);
      height: calc(100vh - 75px);
      padding: 13px;
      overflow: auto;
   }
}
.menu-item{
  height: 30px;
  line-height: 30px;
  font-size:14px;
  background: rgba(41, 41, 41, 1);
  padding-left: 20px;
  cursor: pointer;
}
.menu-item:hover{
  background: #434343;
}
.assocbox{
  height: calc(100vh - 112px);
  display: flex;
  .assocbox-left{
    width: 290px;
    height: 100%;
    border-right: 1px solid #4f5052;
    :deep(.el-tree-node__content){
      padding-left: 5px !important;
    }
  }
  .assocbox-right{
    width: calc(100% - 290px);
    overflow: auto;
    height: calc(100% - 15px);
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 8px;
  }
}
 :deep( .assocdialog .ed-dialog__body){
    padding: 0px 0px;
  }
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
    background: #409eff;
    color: #ffffff;
  }
  :deep(.el-tree){
    background:transparent;
    color: #ffffff;
    font-size: 14px;
   }
   :deep(.el-tree-node__content){
    height: 40px;
    line-height: 40px;
  }
  :deep(.el-tree-node__content:hover){
    background: rgba(61,158, 255, 0.1);
    color: #0089FF;
  }
  :deep(.custom-tree-node){
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
    background: #409eff;
    color: #ffffff;
  }
  :deep(.el-tree-node:focus>.el-tree-node__content){
    background:rgb(37,38,38);
    color: #ffffff;
  }
  :deep(.ed-popover.ed-popper){
    padding: 10px 0px !important;
  }
  :deep(.el-text){
    color: #ffffff;
  }
  .keywordsClass{
    margin-left:10px;
    margin-top: 10px;
    width: calc(100% - 20px) ;
    height: 40px;
    background: inherit;
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 1);
    border-radius: 4px;
    :deep(.ed-input__wrapper){
      background-color: rgba(37, 38, 38, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(51, 51, 51, 0);
      border-radius: 4px;
      box-shadow:none ;
      border: none !important;
    }
    :deep(.ed-input__inner){
      background-color: rgba(37, 38, 38, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(51, 51, 51, 0);
      border-radius: 4px;
      color: #fff;
    }
    :deep(.ed-input-group__prepend){
      background-color: rgba(37, 38, 38, 1);
      border: 0;
      box-shadow:0 0 0 1px transparent ;
      padding:0 10px;
      padding-right: 0;
    }
    :deep(.ed-input__wrapper:hover){
      border: none;
    }
  }
  .querybox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
  }
  .dvPreviewRef{
    position: relative;
    z-index:1;
  }
</style>
<style>
.el-message-box{
    background: #212121;
  }
  .el-message-box__content{
    color: #ffffff;
  }
  .el-message-box__title{
    color: #ffffff;
  }
  .el-message-box__btns .el-button{
    color: #F2F4F5;
    background-color: #212121;
    border: 1px solid #434343;
  }
  .el-message-box__btns .el-button--primary{
    background: #0089ff;
    border-color: #0089ff;
  }
  .ed-form-item__label{
    color: #D2D2D2;
  }
  .ed-input__wrapper {
    background-color: #252626;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(67, 67, 67, 0);
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #434343;
  }
  .ed-form-item.is-error .ed-input__wrapper{
    box-shadow: none;
    border: 1px solid #f54a45;
  }
  .ed-input__wrapper.is-focus{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-input__wrapper:hover{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-input__inner{
    color: #fff;
  }
  .ed-button {
    color: #ffffff;
    background-color: rgb(54,55,56);
    border: 1px solid #363636;
  }
  .ed-button:focus, .ed-button:hover{
    color: #ffffff;
    background-color: rgb(54,55,56);
    border: 1px solid #363636;
  }
  .ed-button--primary{
    background-color: #0089ff;
    border-color:#0089ff ;
  }
  .ed-button--primary:focus, .ed-button--primary:hover{
    background-color: #0089ff;
    border-color:#0089ff ;
  }
  .ed-button.is-disabled{
    color: #949494;
    background-color: rgb(54,55,56);
    border: 1px solid rgb(54,55,56);
  }
  .ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
    color: #949494;
    background-color: rgb(54,55,56);
    border: 1px solid rgb(54,55,56);
  }
  .el-table{
    background-color: rgb(33,33,33);
  }
  .el-table tr{
    background: rgb(40,40,40);
    border-color: #434343;
  }
  .el-table th.el-table__cell {
    background-color: rgb(40,40,40);
    border-color: #434343;
  }
  .el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
    background-color: rgb(40,40,40);
  }
  .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
    background-color: #434343;
  }
  .el-table__border-bottom-patch, .el-table__border-left-patch{
    background-color: #434343;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-color: #434343;
  }
  .ed-checkbox__inner{
    background: transparent;
    border-color: #787878;
  }
  .ed-checkbox__input.is-disabled .ed-checkbox__inner{
    background: #434343;
    border-color: #787878;
  }
  .el-table thead{
    color: #E4E4E4;
  }
  .el-table .el-table__cell{
    background: #212121;
    color: #F2F4F5;
  }
  .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right{
    background: #212121;
  }
  .hover-row > td {
    background-color: rgb(48,48,48) !important;
  }
  .ed-checkbox__input.is-checked .ed-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
  }
  .ed-switch.is-checked .ed-switch__core{
    border-color: #0089ff;
    background-color: #0089ff;
  }
  .ed-textarea__inner{
    background-color: #252626;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(67, 67, 67, 0);
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #434343;
    color: #fff;
  }
  .ed-textarea__inner:hover{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-textarea__inner:focus{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-input.is-disabled .ed-input__wrapper{
    border: 1px solid #434343;
    background: #212121;
    box-shadow: none;
  }
  .el-loading-mask{
    background-color: rgba(41, 41, 41, 0.9)
  }
  .ed-popover.ed-popper{
    background: rgba(41, 41, 41, 1);
    border: 1px solid #434343;
    color: #fff;
    padding: 10px 0px;
   }
   .ed-dialog__header{
    padding: 13px 20px;
    border-bottom: 1px solid #333333;
    margin-right: 0px;
    }
    .ed-dialog__headerbtn{
      color: #ffffff;
      top: 11px !important;
      right: 15px !important;
    }
    .ed-dialog__body{
      background: rgb(33,33,33);
    }
    .ed-dialog__footer{
      background: rgb(33,33,33);
    }
    .ed-dialog__title{
    color: #ffffff;
    }
    .ed-dialog {
    border: 1px solid #5f5f5f;
    border-radius: 4px;
    background: rgb(33,33,33);
    }
    .el-tree-node__expand-icon{
      color: #ffffff
    }

</style>