<script lang="ts" setup>
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import FormCreate from '@/viewsnew/common/FormCreate.vue'
import { initCanvasData } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { moduleList } from '@/api/application/module'
import { ElTree,FormInstance } from 'element-plus'
import { publicTree } from '@/utils/validate';
import { setModuleId } from '@/api/permission/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import Navbar from '@/viewsnew/application/SfcEditor/NavbarEditor/previewNavSfc.vue'
import { getMenuTree } from '@/api/permission/menu'
const props = defineProps({
  applicationId:String,
  assoccurrentid:String,
  assocmenuname:String,
  currentNodeId:String,
  projectname:String
})
const defaultPropss = {
  children: 'children',
   label: "name"
}
const emits = defineEmits(['assochandleClose','assocsubmit'])
const keywords = ref('')
const dvMainStore = dvMainStoreWithOut()
const showPosition = ref("preview")
const dvPreviewRef = ref(null)
const state = reactive({
  canvasDataPreview: null,
  canvasStylePreview: null,
  canvasViewInfoPreview: null,
  dvInfo: null,
  curPreviewGap: 0
})
const moduleInfo  = ref({})
const isFormCreate = ref(false)
const busiFlag = ref('dataV')
const dataInitState = ref(true)
const downloadStatus = ref(false)
const moduleloading = ref(false)
const rightloading = ref(false)
const assocdialog = ref(false)
const assocmenuname = ref('')
const moduletreeData = ref([])
const moduletreeRef = ref<InstanceType<typeof ElTree>>()
const assoccurrentid = ref('')
const isNavbar = ref(false)
const menuList:any = ref([])
const loadCanvasData = (dvId, weight?, ext?) => {
  const initMethod = initCanvasData
  dataInitState.value = false
  initMethod(
    dvId,
    { busiFlag: busiFlag.value, resourceTable: 'core' },
    function ({
      canvasDataResult,
      canvasStyleResult,
      dvInfo,
      canvasViewInfoPreview,
      curPreviewGap
    }) {
      dvInfo['weight'] = weight
      dvInfo['ext'] = ext || 0
      state.canvasDataPreview = canvasDataResult
      state.canvasStylePreview = canvasStyleResult
      state.canvasViewInfoPreview = canvasViewInfoPreview
      state.dvInfo = dvInfo
      state.curPreviewGap = curPreviewGap
      dataInitState.value = true
      dvMainStore.updateCurDvInfo(dvInfo)
      nextTick(() => {
        dvPreviewRef.value?.restore()
      })
    }
  )
}
const handleNodeClick = (e: any) => {
  if(e.node_type == '01'){
    assoccurrentid.value  = ''
    moduletreeRef.value!.setCurrentKey(null)
    return
  }
  assoccurrentid.value = e.id
   // 树节点点击
  isFormCreate.value = false
  dataInitState.value = false
  isNavbar.value = false
  if(e.type == '0301'){
    busiFlag.value = 'dashboard'
    loadCanvasData(e.id,9,0)
  }else if(e.type == '03'){
    busiFlag.value = 'dataV'
    loadCanvasData(e.id,9,0)
  }else if(e.type == '04'||e.type == '05'||e.type == '06'||e.type == '09'){
    moduleInfo.value = e
    isFormCreate.value = true
  } else if(e.type == '02'){
    const params = { 
    appId: props.applicationId,
    name:'',
    isdisplay:''
   }
   getMenuTree(params).then(res => {
    menuList.value = res.data
    isNavbar.value = true
   })
  }
  rightloading.value = false
}
function assochandleClose(){
  assocdialog.value = false
  emits('assochandleClose')
}
function assocsubmit(){
  const params = { 
    id: props.currentNodeId,
    moduleId: assoccurrentid.value
 }
  setModuleId(params).then(res => {
    if(res.data.code == '0'){
      ElMessage({
        type: 'success',
        message: '关联成功',
      })
      assocdialog.value = false;
      emits('assocsubmit')
    }else{
      ElMessage({
        type: 'error',
        message: '关联失败',
      })
      emits('assochandleClose')
    } 
  })
}
function getInit(){
  moduleloading.value = true
  rightloading.value = true
  let params = {appId:props.applicationId}
  moduleList(params).then(res => {
    moduletreeData.value = publicTree(res.data.data,"")
    moduleloading.value = false
    if(assoccurrentid.value !== ''){
      moduletreeRef.value!.setCurrentKey(assoccurrentid.value)
      let paramss = {appId:props.applicationId}
      moduleList(paramss).then(ress => {
        let list:any = {}
        const arr = ress.data.data
        arr.forEach((item:any) => {
          if(item.id === assoccurrentid.value){
            list = item
          }
        })
        
        handleNodeClick(list)
        moduleloading.value = false
        rightloading.value = false
      })
    }else{
      moduletreeRef.value!.setCurrentKey(null)
      moduleloading.value = false
      rightloading.value = false
    }
  })
}
onMounted(() => {
  isFormCreate.value = false
  dataInitState.value = false
  assocdialog.value = true
  assoccurrentid.value = props.assoccurrentid
  assocmenuname.value = props.assocmenuname
  getInit()
})
function handleDatasetName() {

}
</script>
<template>
  <el-dialog v-model="assocdialog" class="assocdialog" title="关联模块" width="80%" :before-close="assochandleClose">
        <div class="assocbox">
          <div class="assocbox-left">
            <el-input placeholder="请输入" class="keywordsClass" maxlength="64" v-model="keywords" @blur="handleDatasetName">
              <template #prepend>
                <img src="@/assets/newimg/u62.png" alt="">
              </template>
            </el-input>
            <el-tree v-loading="moduleloading" ref="moduletreeRef" :data="moduletreeData" node-key="id" :props="defaultPropss"
            default-expand-all :expand-on-click-node="false" highlight-current
            @node-click="handleNodeClick" style="margin-top: 10px;height: calc(100vh - 270px);overflow: auto;" />
          </div>
          <div v-loading="rightloading" class="assocbox-right">
            <div class="querybox">
              <div>
                菜单名称：{{assocmenuname}}
              </div>
              <div>
                <el-button type="primary" style="min-width: 50px;" @click="assocsubmit">确定</el-button>
                <el-button style="min-width: 50px;" @click="assochandleClose">取消</el-button>
              </div>
            </div>
            <div>
              <dv-preview
            ref="dvPreviewRef"
            class="dvPreviewRef" 
            v-if="state.canvasStylePreview && dataInitState"
            :show-position="showPosition"
            :canvas-data-preview="state.canvasDataPreview"
            :canvas-style-preview="state.canvasStylePreview"
            :canvas-view-info-preview="state.canvasViewInfoPreview"
            :dv-info="state.dvInfo"
            :cur-preview-gap="state.curPreviewGap"
            :download-status="downloadStatus"
          ></dv-preview> 
          <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
          <Navbar v-if="isNavbar" :isFixed="true" :applicationId="props.applicationId" 
          :menuList="menuList" :projectName="props.projectname" :isExecuteEvent="true" ></Navbar>
            </div>
           
          </div>
        </div>
      </el-dialog>
</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);
    height: calc(100vh - 130px);
    overflow: auto;
    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>