const $ = require("jquery");
require("babel-polyfill");
const echarts = require("echarts");
require("./../css/knowledgeUpdate.less");
require("./../css/common.less");
// require("ztree");
require('./../resources/images/icon.png');
require('./../resources/images/iconOpen.png');
require('./../resources/images/iconClose.png');
require('./../resources/images/node.png');
require('./../resources/images/radioUnSelect.png');
require('./../resources/images/radioSelect.png');
require('./../resources/images/iconSlideUp.png');
require('./../resources/images/iconSlideDown.png');
require('./../resources/images/iconSelect.png');
require('./../resources/images/syflogo.png');
require('./../resources/images/logo.png');
require('./../resources/images/logo_shaoyifu.png');
require('./../resources/zTree/js/jquery.ztree.core.min.js');
require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
const iconUp = require('./../resources/images/iconUp.png');
const iconDown = require('./../resources/images/iconDown.png');
const { post, api, ifHideLogo, getUrlArgObject } = require('./api.js');
const { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, expandProperty,
  setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./graphMap.js');
/**右侧侧边栏折叠*/
let isRightCollapse = false
window.select_type = "疾病";
window.select_type_noSearch = "疾病";
window.refreshTree = true
let disease = getUrlArgObject("disease")
// 用来存储节点操作的数据
window.knowledgeMapData = {}
window.knowledgeMapSetting = {
  operation: "edit", //操作类型,修改
  showLegend: true, //是否显示图例
  draggable: false, //是否能拖拽节点
  zTree: false,//是否有zTree
  expandPropertyId: [],//存储展开属性的nodeId
  expandRelationshipsId: [],//存储展开关系的nodeId
  currentNodeId: -1,//存储右侧显示的节点的nodeId
}

setHei()
ifHideLogo();
function setHei() {
  const clientHei = $(window).height()
  const contentHei = 580
  $(".left").css("height", contentHei + 'px')
  $(".right").css("height", contentHei + 'px')
  if (select_type == "疾病") {
    setTabBottomHei(1)
  } else {
    setTabBottomHei(2)
  }
  $("#main").css("height", contentHei - 20 - 20 - 10 + 'px')
}
$(window).resize(function () {
  setHei()
  // getGraph(graphTxt,select_type);
})

//关系图
getGraph(disease || "艾滋病", select_type, true);
// getTree(1, 1, disease || "艾滋病");
$('#searchInp').val(disease || "艾滋病")

//选择类型
$('.select').click(function (e) {
  e.stopPropagation();
  hideSlide('selectList')
  const selectListShow = $('.selectList').css('display')
  if (selectListShow == 'none') {
    $('.iconSlide').attr('src', './images/iconSlideUp.png')
  } else {
    $('.iconSlide').attr('src', './images/iconSlideDown.png')
  }
  $('.selectList').fadeToggle()

})
$('.search-type .selectList .selectItem').click(function () {
  select_type_noSearch = $(this).attr('data-id')
  const txt = $(this).text()
  const oldTxt = $(".selectedName").html()
  setSelectName(txt)

  $("#searchInp").attr("placeholder", `请输入${txt}名称`)
  if (txt != oldTxt) {
    $('#searchInp').val("")
  }
})

$('.dropdown').on('click', function (el) {
  el.stopPropagation();
  // hideSlide()
  $(".dropdown").not($(this)).find(".selectList").slideUp()
  $(this).find(".selectList").slideToggle()
})




//搜索节点名
$("#searchInp").bind("input propertychange", function (event) {
  const val = $("#searchInp").val().trim()
  if (val) {
    getNode(val, select_type_noSearch)
  } else {
    $(".tabNameList").hide()
  }
});

//切换条目
$('.radioItem').click(function (e) {
  const initDiag = disease || "艾滋病"
  const type = $(this).attr('data-type')
  // $(this).children('img').attr('src')
  $('.iconRadio').attr('src', '/images/radioUnSelect.png')
  $(this).children('img').attr('src', '/images/radioSelect.png')
  $('#searchInp').val(initDiag)
  getTree(type, 1, initDiag);
  getGraph(initDiag, select_type);
  // updateTree(initDiag)
})

//搜索
$('#searchBtn').click(function (e) {
  e.stopPropagation()
  hideSlide()
  const val = $('#searchInp').val().trim()
  if (val) {
    const clientHei = $(window).height()
    const contentHei = clientHei - 80
    $(".tabNameList").hide()
    getGraph(val, select_type_noSearch).then(() => {
      if (!window.refreshTree) {
        return
      }
      select_type = select_type_noSearch

      if (select_type == '疾病') {
        // $('#searchInp').val("高血压3级")
        getTree(1, 1, val);
      } else if (select_type == '药品通用名') {
        getTree(0, 2, val);
      } else if (select_type == '症状') {
        getTree(0, 3, val);
      } else if (select_type == '手术和操作') {
        getTree(0, 4, val);
      } else if (select_type == '实验室检查') {
        getTree(0, 5, val);
      } else if (select_type == '辅助检查') {
        getTree(0, 6, val);
      }
      if (select_type == '疾病') {
        $('.iconRadio').attr('src', '/images/radioUnSelect.png')
        $('.ICD10 img').attr('src', '/images/radioSelect.png')
        $(".radioList").show()
        setTabBottomHei(1)
      } else {
        $(".radioList").hide()
        setTabBottomHei(2)
      }
      let renderTabInfo = getTab(select_type)
      renderTab(renderTabInfo)

    })



  } else {
    $('.tabNameListNoSearch').show()
  }
})



let renderTabInfo = getTab("疾病")
renderTab(renderTabInfo)

$(".tabList").click(function (e) {
  e.stopPropagation()
  hideSlide()
})
$(".hideTabList").click(function (e) {
  e.stopPropagation()
  hideSlide()
})

//点击页面其他地方关闭下拉
$('html').click(function () {
  hideSlide()
  // const selectListShow = $('.selectList').css('display')
  // const tabNameListShow = $('.tabNameList').css('display')
  // const tabNameListNoSearchShow = $('.tabNameListNoSearch').css('display')
  // const hideTabListShow = $('.hideTabList').css('display')
  // if(selectListShow == 'block'){
  //     $('.selectList').hide()
  //     $('.iconSlide').attr('src','./images/iconSlideDown.png')
  // }
  // if(tabNameListShow == 'block'){
  //     $('.tabNameList').hide()
  // }
  // if(tabNameListNoSearchShow == 'block'){
  //     $('.tabNameListNoSearch').hide()
  // }
  // if(hideTabListShow == 'block'){
  //     hideHideTab()
  // }
})



let toggleTabHtml = ""
$(".right-aside-collapse").on("click", function () {
  isRightCollapse = !isRightCollapse

  if (isRightCollapse) {
    toggleTabHtml = $("#tabList > .toggleTab").html()
    $("#tabList > .toggleTab").empty()
    // document.querySelector('.toggleTab').style.display = 'none';
    $(".right").animate({ "width": '110px' }, function () {
    })
    const contentWidth = $(".content").width()
    const leftWidth = (contentWidth - 110).toString() + 'px'
    // console.log("contentWidth", leftWidth);
    $(".content .left").animate({ 'width': leftWidth, }, function () {
      window.graphMap.resize()
      // console.log("graphMap", window.graphMap)
    })

  } else {
    $("#tabList > .toggleTab").html(toggleTabHtml)
    $(".right").animate({ "width": '394px' })
    const contentWidth = $(".content").width()
    const leftWidth = (contentWidth - 394).toString() + 'px'
    $(".content .left").animate({ 'width': leftWidth, }, function () {
      window.graphMap.resize()
      // console.log("graphMap", window.graphMap)
    })
  }
})

// 接收来自home.html的数据
window.addEventListener("message", function (event) {
  // console.log("message", event.data);
  if (event.data.operation == "left-collapse") {
    const contentWidth = $(".content").width()
    console.log("contentWidth", contentWidth)
    let leftWidth = 0
    if (isRightCollapse) {
      leftWidth = (contentWidth - 110).toString() + 'px'
      $(".content .left").css('width', leftWidth)

    } else {
      leftWidth = (contentWidth - 394).toString() + 'px'
      $(".content .left").css('width', leftWidth)

    }
    console.log("leftWidth", leftWidth);
    window.graphMap.resize()
  }
  if (event.data.operation === 'update-graph') { //重新绘制关系图
    reDrawGraph()
  }
})

$("div[class*='contextmenu']").on("contextmenu", function (event) {
  event.preventDefault()
})

$("div[class*='contextmenu'] .contextmenu-item").on("click", function () {
  const opType = $(this).attr("data-id")
  const title = $(this).attr("title")
  const showFooter = true
  const dialogVisible = true
  const data = {
    opType, title, data: window.knowledgeMapData, showFooter, dialogVisible
  }
  menuOperation(opType, data)
})

$(".dropdown[select='off'] .selectList .selectItem").on("click", function () {
  const opType = $(this).attr("data-id")
  const title = $(this).attr("title")
  const showFooter = true
  const dialogVisible = true
  const data = {
    opType, title, showFooter, dialogVisible, data: {}
  }
  menuOperation(opType, data)

})



// 自定义的菜单和部分下拉框的操作
function menuOperation(opType, data) {
  data.width = ""
  console.log("menuOperationData", data);
  let selectedName = ""
  let searchInp = ""
  const parentURL = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/home.html";
  switch (opType) {
    case 'expandProperty': //展开属性
      expandProperty(data.data, true)
      break
    case 'modifyEntityName-dropdown':
      selectedName = $(".selectedName").html().trim()
      searchInp = $("#searchInp").val().trim()
      // console.log("modifyEntityName-dropdown", selectedName, searchInp);
      data.data = { selectedName, searchInp }
      window.parent.postMessage(data, parentURL);
      break
    case 'deleteEntity-dropdown':
      selectedName = $(".selectedName").html().trim()
      searchInp = $("#searchInp").val().trim()
      // console.log("modifyEntityName-dropdown", selectedName, searchInp);
      data.data = { selectedName, searchInp }
      window.parent.postMessage(data, parentURL);
      break
    case 'deleteRelationship':
      let endId = 0
      let endLabel = "string"
      let property = {}
      let relationshipType = "string"
      let startId = 0
      let startLabel = "string"
      window.mapData.node.forEach((element, index) => {
        if (index == data.data.target) {
          endId = element.nodeId

        }
      });
      window.parent.postMessage(data, parentURL);
      break
    case "modifyRelationshipName-dropdown":
      data.showFooter = false
      window.parent.postMessage(data, parentURL);
      break
    case "modifyProperty-dropdown":
      data.showFooter = false
      window.parent.postMessage(data, parentURL);
      break
    case "expandRelationships": //右键展开关系
      if (data.data.name === 0 || data.data.expanded) return;
      post(api.getGraph, {
        "inputStr": data.data.properties.name,
        "labelName": data.data.type
      }).then(res => {
        const { code, msg } = res.data
        const nodeLength = window.graphMapUpdatedData.node.length
        if (code == '0') {
          const newNodeData = res.data.data
          // debugger
          // console.log("newNodeData ", newNodeData)
          newNodeData.node.forEach((node, index) => {
            let nodeIndex = -1
            if (index === 0) {
              nodeIndex = data.data.name
              //标志该节点已经展开过
              window.graphMapUpdatedData.node[nodeIndex].expanded = true
            } else {
              nodeIndex = nodeLength + index - 1
              node.name = nodeIndex
              // 检查是否存在节点
              // const hasNodeCheck = window.graphMapUpdatedData.node.some((j) => {
              //   if (node.nodeId === j.nodeId) {
              //     nodeIndex = j.name
              //     return true
              //   }
              // })
              // 如果节点不存在，则新增节点
              // if (!hasNodeCheck) {
              //   window.graphMapUpdatedData.node.push(node)
              // }
              window.graphMapUpdatedData.node.push(node)
            }
            newNodeData.links.forEach(link => {
              if (link.source === index) {
                link.source = nodeIndex
              };
              if (link.target === index) {
                link.target = nodeIndex
              }
            })
          })

          window.graphMapUpdatedData.links = window.graphMapUpdatedData.links.concat(newNodeData.links)
          // console.log("graphMapUpdatedData", window.graphMapUpdatedData)
          window.graphMap.setOption({
            series: [{
              type: 'graph',
              data: window.graphMapUpdatedData.node,  // 更新节点数据
              links: window.graphMapUpdatedData.links,  // 更新边数据
            }]
          }, false);  // 仅更新指定的部分，不重绘图表

        }
      }).catch(err => {

      })
      break
    case "addRelationship-dropdown":
      data.width = "700px"
      window.parent.postMessage(data, parentURL);
      break
    default:
      window.parent.postMessage(data, parentURL);
  }
}




$(document).on("click", ".content .right .entity-node .box-content .text .select-sign span", function () {
  // $(this).attr("class", "icon-rect-select")
  if ($(this).hasClass("icon-rect-select")) {
    $(this).attr("class", "icon-rect-selected")
    // console.log("icon-rect-select")
  } else {
    $(this).attr("class", "icon-rect-select")
    // console.log("icon-rect-selected")
  }
})
// 右侧实体删除
$(document).on("click", ".content .right .entity-node .delete-entity", function () {
  if (confirm("确定要删除选中的实体吗？")) {
    const entityNodeId = []
    $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
      if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
        entityNodeId.push(Number($(textElement).attr("nodeId")))
        // $(textElement).remove()
      }
    })
    post(api.deleteEntity, entityNodeId).then(res => {
      const { data, code, msg } = res.data
      if (code == '0') {
        reDrawGraph()
      }
    }).catch(err => {
      console.log("deleteEntity接口报错", err)
    })
    console.log("entityNodeId", entityNodeId)
  }

})

// 右侧实体合并
$(document).on("click", ".content .right .entity-node .merge-entity", function () {
  const entityNode = []
  $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
    if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
      entityNode.push(window.graphMapUpdatedData.node[Number($(textElement).attr("nodeIndex"))])
      // $(textElement).remove()
    }
  })
  if (entityNode.length !== 2) {
    alert("实体合并只能选择两个")

  } else if (entityNode[0].type !== entityNode[1].type) {
    alert("合并的两个实体需要类型相同")
  }
  else {
    const entityVO = {
      "firstId": entityNode[0].nodeId,
      "firstLabel": entityNode[0].type,
      "firstName": entityNode[0].properties.name,
      "newLabel": entityNode[0].type,
      "newName": "",
      "secondId": entityNode[1].nodeId,
      "secondLabel": entityNode[1].type,
      "secondName": entityNode[1].properties.name
    }
    const data = {
      opType: "merge-entity",
      showFooter: true,
      dialogVisible: true,
      data: entityVO,
      title: "实体合并提示",
    }
    // console.log("entityVO", entityVO)
    menuOperation(data.opType, data)
  }

})

$(document).on("click", ".link-entity", function () {
  const entityNode = []
  $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
    if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
      entityNode.push(window.graphMapUpdatedData.node[Number($(textElement).attr("nodeIndex"))])
      // $(textElement).remove()
    }
  })
  console.log("entityNode", entityNode)
  const data = {
    opType: "entityLink",
    showFooter: true,
    dialogVisible: true,
    data: {
      categories: window.graphMapUpdatedData.categories,
      entityNode: entityNode,
    },
    title: "实体链接提示",
  }
  menuOperation(data.opType, data)
})




module.exports = {
  getTab,
  renderTab
}
