/* eslint-disable no-var */
let thisWidget
let availabilityList = []

//当前页面业务
function initWidgetView(_thisWidget) {
  thisWidget = _thisWidget

  //清除所有标号
  $("#btnDelete").click(function () {
    thisWidget.deleteEntity()
  })

  $("#btnCenter").click(function (e) {
    thisWidget.centerCurrentEntity()
  })

  $("#btn_plot_savefile").click(function () {
    let data = thisWidget.getGeoJson()
    haoutil.file.downloadFile("标绘item.json", JSON.stringify(data))
  })

  $("#btn_avali_add").click(function () {
    let newTimeSlot = { start: null, stop: null }
    const avaLength = availabilityList.length
    if (!avaLength) {
      newTimeSlot = thisWidget.getAndSetMapTime()
    } else {
      const copiedTime = availabilityList[avaLength - 1]

      newTimeSlot.start = thisWidget.getAndSetMapTime(copiedTime.stop)
      newTimeSlot.stop = thisWidget.getAndSetMapTime(newTimeSlot.start)
    }

    availabilityList.push(newTimeSlot)
    changeAvali(availabilityList)
  })

  $("#btn_avali_delete").click(function () {
    $("#table-box").empty()
    availabilityList = []
    changeAvali(availabilityList)
  })

  plotEdit.initEvent()
  thisWidget.startEditing()

  availabilityList = thisWidget.getAvailability() || []
  if (availabilityList && !thisWidget.config?.hideAvaliability) {
    changeAvali(availabilityList)
  }

  if (thisWidget.config?.hideAvaliability) {
    $("#tab_availability").hide()
  }
}

let newAttr = {} // 解决的问题：在updateAttr捕获到内容改变后，会导致仅保留最后一次更改的属性数据
//属性编辑相关
var plotEdit = {
  hasEditSylte: true,

  initEvent: function () {
    let that = this
    if (!this.hasEditSylte) {
      $("#attr_style_view").hide()
    }

    //改变高度 - 高程全部设置为
    $("#plot_latlngs_allheight").bind("input propertychange", function () {
      $("#plot_latlngs_addheight").val("")

      let thisval = Number($(this).val()) //高度（米）
      if (isNaN(thisval)) {
        thisval = 1
      }

      let latlngs = []
      $(".plot_latlngs").each(function () {
        if ($(this).attr("data-type") == "height") {
          $(this).val(thisval)
          latlngs.push(thisval)
        } else {
          latlngs.push(Number($(this).val())) //经纬度值
        }
      })

      let arrPoint = []
      for (let i = 0; i < latlngs.length; i += 3) {
        arrPoint.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]])
      }
      thisWidget.updatePoints2map(arrPoint)
    })

    //改变高度 - 在地表高程偏移
    $("#plot_latlngs_addheight").bind("input propertychange", function () {
      $("#plot_latlngs_allheight").val("")
      let thisval = Number($(this).val()) //高度（米）
      if (isNaN(thisval)) {
        thisval = 1
      }

      let latlngs = []
      $(".plot_latlngs").each(function () {
        if ($(this).attr("data-type") == "height") {
          let oldval = Number($(this).attr("oldvalue"))
          $(this).val(oldval + thisval)
          latlngs.push(oldval + thisval)
        } else {
          latlngs.push(Number($(this).val())) //经纬度值
        }
      })

      let arrPoint = []
      for (let i = 0; i < latlngs.length; i += 3) {
        arrPoint.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]])
      }
      thisWidget.updatePoints2map(arrPoint)
    })
  },
  _last_attr: null,
  //选中标号，激活属性面板
  startEditing: function (attr, latlngs) {
    if (!window.styleConfig) {
      return
    }
    if (attr && attr.attr) {
      attr = {
        ...attr,
        ...attr.attr
      }
    }

    this._last_attr = attr

    let config = window.styleConfig[attr.type] || window.styleConfig[attr.styleType] || {}
    config.style = config.style || {}

    function getViewShow(cfg, styleOptions) {
      if (typeof cfg.show === "function") {
        return cfg.show(styleOptions, attr.style, attr.type)
      }
      return true
    }

    if (latlngs) {
      this._hasHeight = true

      if (attr.style.clampToGround) {
        this._hasHeight = false
      } else if (attr.type == "rectangle" || attr.type == "corridor") {
        this._hasHeight = false
      }

      this.updateLatlngsHtml(latlngs)
    }

    let arrFun = []
    let parname, inHtml
    //==============style==================
    if (this.hasEditSylte) {
      parname = "plot_attr_style_"
      inHtml = `<tr><td class="nametd">所在图层：</td><td>${thisWidget.getLayerName() || "默认图层"}</td></tr>
      <tr><td class="nametd">标号类型：</td><td>${attr.type}</td></tr>
      <tr><td class="nametd">样式类型：</td><td>${config.type || "未配置"}</td></tr>`

      for (let idx = 0; idx < config.style.length; idx++) {
        let edit = config.style[idx]
        if (!getViewShow(edit, attr.style)) {
          continue
        }

        let attrName = edit.name
        let attrVal = attr.style[attrName] ?? edit.defval

        if (edit?.next) {
          if (!attr.style[attrName]) {
            attr.style[attrName] = {}
          }

          let val = null
          if (edit.contant && attr.style[edit.contant]) {
            val = attr.style[edit.contant]
          }

          attrVal = attr.style[attrName][edit.next] ?? val ?? edit.defval
        }

        //材质时
        if (edit.name === "materialType") {
          attrVal = this._materialType_selectd || attrVal

          let input = this.getAttrInput(parname, attrName, attrVal, edit)
          if (input.fun) {
            arrFun.push({ parname: parname, name: attrName, value: attrVal, edit: edit, fun: input.fun })
          }
          inHtml += '<tr  id="' + parname + "tr_" + attrName + '" > <td class="nametd">' + edit.label + "</td>  <td>" + input.html + "</td>  </tr>"

          let defStyle //style.js 材质默认值
          edit.data.forEach((m) => {
            if (m.value === attrVal) {
              defStyle = m.defval || {}
            }
          })

          const materialOptions = attr.style.materialOptions || {}

          let thisMaterialConfig = window.materialConfig[attrVal.split("-")[0]]
          thisMaterialConfig.forEach((maItem) => {
            if (!getViewShow(maItem, materialOptions)) {
              return
            }
            let parnamemat = "plot_attr_style_mat"
            // 初始化进入默认值的取值顺序 1. 本身属性 2. style中的属性 3. style.js 材质默认值 4. material.js 的默认值
            materialOptions[maItem.name] = materialOptions[maItem.name] ?? attr.style[maItem.name] ?? defStyle[maItem.name] ?? maItem.defval

            let input = this.getAttrInput(parnamemat, maItem.name, materialOptions[maItem.name], maItem)
            if (input.fun) {
              arrFun.push({ parname: parnamemat, name: maItem.name, value: materialOptions[maItem.name], edit: maItem, fun: input.fun })
            }
            inHtml +=
              '<tr  id="' + parnamemat + "tr_" + maItem.name + '" > <td class="nametd">' + maItem.label + "</td>  <td>" + input.html + "</td>  </tr>"
          })
        } else if (edit.next && edit.next === "materialType") {
          attrVal = this._next_materialType_selectd || attrVal

          let input = this.getAttrInput(parname, attrName, attrVal, edit)
          if (input.fun) {
            let name = attrName
            if (edit.next) {
              name = name + "-" + edit.next
            }
            arrFun.push({ parname: parname, name: name, value: attrVal, edit: edit, fun: input.fun })
          }
          inHtml += '<tr  id="' + parname + "tr_" + attrName + '" > <td class="nametd">' + edit.label + "</td>  <td>" + input.html + "</td>  </tr>"

          let defStyle //style.js 材质默认值
          edit.data.forEach((m) => {
            if (m.value === attrVal || m.value === attrVal + "2") {
              defStyle = m || {}
            }
          })

          const materialOptions = attr.style[attrName].materialOptions || {}

          let thisMaterialConfig = window.materialConfig[attrVal.split("-")[0]]
          thisMaterialConfig.forEach((maItem) => {
            if (!getViewShow(maItem, materialOptions)) {
              return
            }
            let parnamemat = "plot_attr_style_mat"

            // 初始化进入默认值的取值顺序 1. 本身属性 2. 父参数中数值 3. 关联参数  4. style.js 材质默认值 5. material.js 的默认值
            materialOptions[maItem.name] =
              materialOptions[maItem.name] ?? attr.style[attrName][maItem.name] ?? attr.style[defStyle?.contant] ?? defStyle?.defval ?? maItem.defval

            let input = this.getAttrInput(parnamemat, maItem.name, materialOptions[maItem.name], { ...maItem, parent: edit })
            if (input.fun) {
              let name = maItem.name
              if (edit.next) {
                name = name + "-" + edit.next
              }
              arrFun.push({ parname: parnamemat, name: name, value: materialOptions[maItem.name], edit: { ...maItem, parent: edit }, fun: input.fun })
            }
            inHtml +=
              '<tr  id="' + parnamemat + "tr_" + maItem.name + '" > <td class="nametd">' + maItem.label + "</td>  <td>" + input.html + "</td>  </tr>"
          })
        } else {
          let input = this.getAttrInput(parname, attrName, attrVal, edit)
          if (input.fun) {
            let name = attrName
            if (edit.next) {
              name = name + "-" + edit.next
            }
            arrFun.push({ parname: parname, name: name, value: attrVal, edit: edit, fun: input.fun })
          }
          inHtml += '<tr  id="' + parname + "tr_" + attrName + '" > <td class="nametd">' + edit.label + "</td>  <td>" + input.html + "</td>  </tr>"
        }
      }
      $("#talbe_style").html(inHtml)

      //注记属性
      if (attr.style.label) {
        let configLbl = window.styleConfig["label"] || {}

        parname = "plot_attr_stylelabel_"
        inHtml = ""
        for (let idx = 0; idx < configLbl.style.length; idx++) {
          let edit = configLbl.style[idx]
          if (!getViewShow(edit, attr.style.label)) {
            continue
          }

          let attrName = edit.name
          let attrVal = attr.style.label[attrName] ?? edit.defval
          attr.style.label[attrName] = attrVal

          let input = this.getAttrInput(parname, attrName, attrVal, edit)
          if (input.fun) {
            arrFun.push({ parname: parname, name: attrName, value: attrVal, edit: edit, fun: input.fun })
          }

          inHtml += '<tr  id="' + parname + "tr_" + attrName + '" > <td class="nametd">' + edit.label + "</td>  <td>" + input.html + "</td>  </tr>"
        }
        $("#talbe_stylelabel").html(inHtml)
        $("#attr_stylelabel_view").show()
      } else {
        $("#attr_stylelabel_view").hide()
      }
    }
    //==============attr==================
    parname = "plot_attr_attr_"
    inHtml = ""
    attr.attr = attr.attr || {}

    let attrcfg = thisWidget.getAttrList()

    let tempKyes = {}
    for (let idx = 0; idx < attrcfg.length; idx++) {
      let edit = attrcfg[idx]
      tempKyes[edit.name] = true
    }
    for (let key in attr.attr) {
      let attrVal = attr.attr[key]
      if (tempKyes[key]) {
        continue
      }

      if (haoutil.isutil.isString(attrVal)) {
        attrcfg.push({ name: key, label: key, type: "text", defval: "" })
      } else if (haoutil.isutil.isNumber(attrVal)) {
        attrcfg.push({ name: key, label: key, type: "number", defval: 0.0 })
      } else if (typeof attrVal === "boolean") {
        attrcfg.push({ name: key, label: key, type: "radio", defval: false })
      }
    }

    for (let idx = 0; idx < attrcfg.length; idx++) {
      let edit = attrcfg[idx]
      if (edit.type == "hidden") {
        continue
      }

      let attrName = edit.name
      let attrVal = attr.attr[attrName] ?? edit.defval ?? ""

      let input = this.getAttrInput(parname, attrName, attrVal, edit)
      if (input.fun) {
        arrFun.push({ parname: parname, name: attrName, value: attrVal, edit: edit, fun: input.fun })
      }

      inHtml += '<tr  id="' + parname + "tr_" + attrName + '" > <td class="nametd">' + edit.label + "</td>  <td>" + input.html + "</td>  </tr>"
    }

    $("#talbe_attr").html(inHtml)

    //执行各方法
    for (let idx = 0; idx < arrFun.length; idx++) {
      let item = arrFun[idx]
      item.fun(item.parname, item.name, item.value, item.edit)
    }

    window.tab2attr() //切换面板
  },
  updateLatlngsHtml: function (latlngs) {
    $("#plot_latlngs_addheight").val("")
    $("#plot_latlngs_allheight").val("")
    $("#view_updateheight").hide()

    //显示坐标信息
    let inHtml = ""
    if (!latlngs || latlngs.length == 0) {
      //
    } else if (latlngs.length == 1) {
      let latlng = latlngs[0]
      let jd = latlng[0]
      let wd = latlng[1]
      let height = latlng.length == 3 ? latlng[2] : 0

      inHtml +=
        ' <div class="mp_attr" style=" margin-top: 10px;"><table>' +
        ' <tr> <td class="nametd">经度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="jd" step="0.000001"  value="' +
        jd +
        '"></td></tr>' +
        '<tr>  <td class="nametd">纬度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="wd" step="0.000001"  value="' +
        wd +
        '"></td></tr>'
      if (this._hasHeight) {
        inHtml +=
          '<tr><td class="nametd">高程：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="height" step="0.1" value="' +
          height +
          '" oldvalue="' +
          height +
          '"></td></tr>'
      }
      inHtml += " </table> </div>"
    } else {
      if (this._hasHeight) {
        $("#view_updateheight").show()
      }

      let delhtml = ""

      if (latlngs.length > thisWidget.getMinPointNum()) {
        delhtml = '<i class="fa fa-trash-o latlng-del" title="删除点" ></i>'
      }

      for (let idx = 0; idx < latlngs.length; idx++) {
        let latlng = latlngs[idx]

        let jd = latlng[0]
        let wd = latlng[1]
        let height = latlng.length == 3 ? latlng[2] : 0

        let addthml = ""
        if (latlngs.length < thisWidget.getMaxPointNum()) {
          addthml = '<i class="fa  fa-plus-square-o latlng-install" title="插入点" data-index="' + idx + '" ></i>&nbsp;&nbsp;'
        }

        //
        inHtml +=
          '<div><div class="open"><i class="tree_icon">-</i>第' +
          (idx + 1) +
          '点 <label style="width:100px;">&nbsp;</label>    ' +
          addthml +
          delhtml +
          ' </div><div class="mp_attr"><table>' +
          '<tr> <td class="nametd">经度：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="jd"  step="0.000001" data-index="' +
          idx +
          '" value="' +
          jd +
          '"></td>  </tr> ' +
          '<tr>  <td class="nametd">纬度：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="wd"  step="0.000001" data-index="' +
          idx +
          '" value="' +
          wd +
          '"></td> </tr> '
        if (this._hasHeight) {
          inHtml +=
            '<tr>  <td class="nametd">高程：</td> <td><input  type="number" step="0.1" class="mp_input plot_latlngs" data-type="height" data-index="' +
            idx +
            '" value="' +
            height +
            '" oldvalue="' +
            height +
            '"></td> </tr> '
        }
        inHtml += " </table> </div> </div>"
      }
    }
    $("#view_latlngs").html(inHtml)
    $("#view_latlngs .open").click(window.changeOpenShowHide)

    let that = this
    $("#view_latlngs .latlng-del").click(function () {
      $(this).parent().parent().remove()

      let latlngs = []
      let withHeight = false
      $(".plot_latlngs").each(function () {
        latlngs.push(Number($(this).val()))
        if ($(this).attr("data-type") === "height") {
          withHeight = true
        }
      })

      //重新修改界面
      let arr = []
      if (withHeight) {
        for (let i = 0; i < latlngs.length; i += 3) {
          arr.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]])
        }
      } else {
        for (let i = 0; i < latlngs.length; i += 2) {
          arr.push([latlngs[i], latlngs[i + 1]])
        }
      }
      that.updateLatlngsHtml(arr)
      thisWidget.updatePoints2map(arr)
    })
    $("#view_latlngs .latlng-install").click(function () {
      let idx = Number($(this).attr("data-index"))

      let latlngs = []
      let withHeight = false
      $(".plot_latlngs").each(function () {
        latlngs.push(Number($(this).val() || 0))
        if ($(this).attr("data-type") === "height") {
          withHeight = true
        }
      })

      //重新修改界面
      let arr = []
      if (withHeight) {
        for (let i = 0; i < latlngs.length; i += 3) {
          arr.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]])
        }
      } else {
        for (let i = 0; i < latlngs.length; i += 2) {
          arr.push([latlngs[i], latlngs[i + 1]])
        }
      }

      let pt1 = arr[idx]
      let pt2 = idx == arr.length - 1 ? arr[0] : arr[idx + 1]
      let jd = Number(((pt1[0] + pt2[0]) / 2).toFixed(6))
      let wd = Number(((pt1[1] + pt2[1]) / 2).toFixed(6))

      if (withHeight) {
        let gd = Number(((pt1[2] + pt2[2]) / 2).toFixed(1))
        arr.splice(idx + 1, 0, [jd, wd, gd])
      } else {
        arr.splice(idx + 1, 0, [jd, wd])
      }

      that.updateLatlngsHtml(arr)
      thisWidget.updatePoints2map(arr)
    })

    $(".plot_latlngs").bind("input propertychange", function () {
      let latlngs = []
      let withHeight = false
      $(".plot_latlngs").each(function () {
        latlngs.push(Number($(this).val()))
        if ($(this).attr("data-type") === "height") {
          withHeight = true
        }
      })

      let arrPoint = []
      if (withHeight) {
        for (let i = 0; i < latlngs.length; i += 3) {
          arrPoint.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]])
        }
      } else {
        for (let i = 0; i < latlngs.length; i += 2) {
          arrPoint.push([latlngs[i], latlngs[i + 1]])
        }
      }
      thisWidget.updatePoints2map(arrPoint)
    })
  },
  // //单击地图空白，释放属性面板
  // stopEditing: function () {
  //     $("#talbe_style").html('');
  //     $("#talbe_attr").html('');
  //     this._last_attr = null;
  // },
  //获取各属性的编辑html和change方法
  getAttrInput: function (parname, attrName, attrVal, edit) {
    if (attrVal == null || attrVal == undefined) {
      attrVal = ""
    }

    if (edit.next) {
      attrName = attrName + "-" + edit.next
    }

    if (edit.parent && edit.parent?.next) {
      attrName = attrName + "-" + edit.parent.next
    }

    let that = this

    let inHtml = ""
    let fun = null
    switch (edit.type) {
      default:
      case "label":
        inHtml = attrVal
        break
      case "text":
        inHtml = '<input id="' + parname + attrName + '" type="text" value="' + attrVal + '"    class="mp_input" />'

        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).on("input propertychange", function (e) {
            let attrVal = $(this).val()
            that.updateAttr(parname, attrName, attrVal, edit)
          })
        }
        break
      case "textarea":
        attrVal = attrVal.replace(new RegExp("<br />", "gm"), "\n")
        inHtml = '<textarea  id="' + parname + attrName + '"     class="mp_input" style="height:50px;resize: none;" >' + attrVal + "</textarea>"

        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).on("change", function (e) {
            let attrVal = $(this).val()
            if (attrVal.length == 0) {
              attrVal = ""
            }
            attrVal = attrVal.replace(/\n/g, "<br />")

            that.updateAttr(parname, attrName, attrVal, edit)
          })
        }
        break
      case "number":
        if (edit.toFixed) {
          attrVal = attrVal.toFixed(edit.toFixed)
        }

        inHtml = '<input id="' + parname + attrName + '" type="number" value="' + (attrVal || 0) + '" step="0.01"   class="mp_input"/>'
        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).on("input propertychange", function (e) {
            let attrVal = Number($(this).val())
            that.updateAttr(parname, attrName, attrVal, edit)
          })
        }
        break
      case "slider":
        if (edit.max !== 1) {
          //同"number"
          inHtml = '<input id="' + parname + attrName + '" type="number" value="' + (attrVal || 0) + '"    class="mp_input"/>'
          fun = function (parname, attrName, attrVal, edit) {
            $("#" + parname + attrName).on("input propertychange", function (e) {
              let attrVal = Number($(this).val())

              that.updateAttr(parname, attrName, attrVal, edit)
            })
          }
        } else {
          inHtml = '<input id="' + parname + attrName + '"  type="text" value="' + attrVal * 100 + '"   data-value="' + attrVal + '" />'
          fun = function (parname, attrName, attrVal, edit) {
            let _width = $(".mp_tab_card").width() * 0.6 - 30
            $("#" + parname + attrName).progress(_width) //绑定样式
            $("#" + parname + attrName).change(function () {
              let attrVal = Number($(this).val()) / 100

              that.updateAttr(parname, attrName, attrVal, edit)
            })
          }
        }

        break

      case "combobox":
        inHtml = '<select id="' + parname + attrName + '" class="mp_select"    data-value="' + attrVal + '" >'
        for (let jj = 0; jj < edit.data.length; jj++) {
          let temp = edit.data[jj]
          if (attrVal === "Image2" && temp.value === "Image") {
            inHtml += '<option value="Image2">' + temp.label + "</option>"
          } else {
            inHtml += '<option value="' + temp.value + '">' + temp.label + "</option>"
          }
        }
        inHtml += "</select>"

        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).select() //绑定样式
          $("#" + parname + attrName).change(function () {
            let attrVal = $(this).attr("data-value")

            let thisSel
            for (let jj = 0; jj < edit.data.length; jj++) {
              let temp = edit.data[jj]
              if (temp.impact == null) {
                continue
              }
              if (temp.value === attrVal || temp.value === attrVal + "2") {
                thisSel = temp
                continue
              }
              that.changeViewByAttr(parname, temp.impact, false)
            }
            if (thisSel) {
              that.changeViewByAttr(parname, thisSel.impact, true)
            }
            if (edit.valType == "number") {
              attrVal = Number(attrVal)
            }
            that.updateAttr(parname, attrName, attrVal, edit)
          })

          let thisSel
          for (let jj = 0; jj < edit.data.length; jj++) {
            let temp = edit.data[jj]
            if (temp.impact == null) {
              continue
            }
            if (temp.value === attrVal) {
              thisSel = temp
              continue
            }
            that.changeViewByAttr(parname, temp.impact, false)
          }
          if (thisSel) {
            that.changeViewByAttr(parname, thisSel.impact, true)
          }
        }
        break

      case "radio":
        {
          let _name_key = parname + attrName
          inHtml = `<div class="radio radio-info radio-inline" id="${_name_key}"  data-value="${attrVal}" >
            <input type="radio" id="${_name_key}_1" value="1"  name="${_name_key}" ${attrVal ? 'checked="checked"' : ""}>
            <label for="${_name_key}_1"> 是</label>
          </div>
          <div class="radio radio-info radio-inline">
            <input type="radio" id="${_name_key}_0" value="0" name="${_name_key}" ${attrVal ? "" : 'checked="checked"'}">
            <label for="${_name_key}_0"> 否 </label>
          </div>`

          fun = function (parname, attrName, attrVal, edit) {
            $('input:radio[name="' + parname + attrName + '"]').change(function () {
              let attrVal = $(this).val() == "1"
              let isOK = that.updateAttr(parname, attrName, attrVal, edit)
              if (isOK) {
                that.changeViewByAttr(parname, edit.impact, attrVal)
              }
            })
            that.changeViewByAttr(parname, edit.impact, attrVal)
          }
        }
        break
      case "color":
        inHtml = '<input id="' + parname + attrName + '"  class="mp_input" style="width: 100%;"  value="' + attrVal + '" />'

        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).minicolors({
            position: "bottom right",
            control: "saturation",
            change: function (hex, opacity) {
              that.updateAttr(parname, attrName, hex, edit)
            }
          })
        }
        break
      case "window":
        inHtml = '<input id="' + parname + attrName + '" type="text" value="' + attrVal + '" readonly   class="mp_input" />'

        fun = function (parname, attrName, attrVal, edit) {
          $("#" + parname + attrName).on("click", function (e) {
            thisWidget.showEditAttrWindow({
              data: that._last_attr,
              parname: parname,
              attrName: attrName,
              attrVal: attrVal
            })
          })

          $("#" + parname + attrName).on("input propertychange", function (e) {
            let attrVal = $(this).val()
            that.updateAttr(parname, attrName, attrVal, edit)
          })
        }
        break
    }
    return { html: inHtml, fun: fun }
  },
  //联动属性控制
  changeViewByAttr: function (parname, arrimpact, show) {
    if (arrimpact && arrimpact.length > 0) {
      for (let jj = 0; jj < arrimpact.length; jj++) {
        let attrName = arrimpact[jj]
        if (show) {
          $("#" + parname + "tr_" + attrName).show()

          let attrVal = $("#" + parname + attrName).attr("data-value")
          if (!attrVal) {
            attrVal = $("#" + parname + attrName).val()
          }
          // if (attrVal !== null && attrVal !== undefined) {
          //   this._last_attr.style[attrName] = attrVal;
          // }
        } else {
          // delete this._last_attr.style[attrName];
          $("#" + parname + "tr_" + attrName).hide()
        }
      }
    }
  },

  //属性面板值修改后触发此方法
  updateAttr: function (parname, attrName, attrVal, edit) {
    attrName = attrName.split("-")[0]

    switch (parname) {
      default:
        break
      case "plot_attr_style_": {
        let newStyle = {}

        // 拥有二级菜单
        if (edit.next) {
          newStyle[attrName] = {}
          newStyle[attrName][edit.next] = attrVal

          if (!this._last_attr.style[attrName]) {
            this._last_attr.style[attrName] = {}
          }
          this._last_attr.style[attrName][edit.next] = attrVal
        } else {
          newStyle[attrName] = attrVal
          this._last_attr.style[attrName] = attrVal
        }

        let type = this._last_attr.styleType || this._last_attr.type
        if (
          (attrName == "fill" || attrName == "outline") &&
          attrVal === false &&
          (type == "plane" ||
            type == "circle" ||
            type == "ellipse" ||
            type == "cylinder" ||
            type == "ellipsoid" ||
            type == "box" ||
            type == "polylineVolume" ||
            type == "wall" ||
            type == "corridor" ||
            type == "rectangle" ||
            type == "polygon")
        ) {
          if (!(this._last_attr.style["fill"] ?? true) && !this._last_attr.style["outline"]) {
            this._last_attr.style[attrName] = true
            $("input[name='" + parname + attrName + "']:eq(0)").attr("checked", "checked")
            $("input[name='" + parname + attrName + "']:eq(0)").click()
            haoutil.msg("填充和边框不能同时为否，需要至少开启一个！")
            return false
          }
        }

        // 材质类型 materialType 改变时的特殊处理
        if (attrName === "materialType") {
          newStyle.materialOptions = {}

          let defStyle //style.js 材质默认值
          edit.data.forEach((m) => {
            if (m.value === attrVal) {
              defStyle = m.defval || {}
            }
          })
          this._materialType_selectd = attrVal

          attrVal = attrVal.split("-")[0]
          window.materialConfig[attrVal].forEach((p) => {
            // 更新时的默认值的取值顺序 1. style.js 材质默认值 2. material.json 的默认值
            newStyle.materialOptions[p.name] = defStyle[p.name] ?? p.defval
          })
          this._last_attr.style.materialOptions = newStyle.materialOptions

          newStyle[attrName] = attrVal
          this._last_attr.style[attrName] = attrVal

          this.startEditing(this._last_attr)
        } else if (edit.next && edit.next === "materialType") {
          newStyle[attrName].materialOptions = {}

          let defStyle //父元素 材质默认值
          edit.data.forEach((m) => {
            if (m.value === attrVal) {
              defStyle = m.defval || {}
            }
          })
          this._next_materialType_selectd = attrVal

          attrVal = attrVal.split("-")[0]
          window.materialConfig[attrVal].forEach((p) => {
            // 更新时的默认值的取值顺序 1. style.js 材质默认值 2. material.json 的默认值
            newStyle[attrName].materialOptions[p.name] = defStyle[p.name] ?? p.defval
          })
          this._last_attr.style[attrName].materialOptions = newStyle[attrName].materialOptions

          newStyle[attrName][edit.next] = attrVal
          this._last_attr.style[attrName][edit.next] = attrVal

          this.startEditing(this._last_attr)
        } else if (edit.type == "radio") {
          this.startEditing(this._last_attr)
        }

        thisWidget.updateStyle2map(newStyle)
        break
      }
      case "plot_attr_style_mat": {
        let newStyle = {}

        // 拥有二级菜单
        if (edit?.parent?.next) {
          const parent = edit?.parent
          newStyle[parent.name] = {}
          newStyle[parent.name][attrName] = attrVal

          if (!this._last_attr.style[parent.name].materialOptions) {
            this._last_attr.style[parent.name].materialOptions = {}
          }
          this._last_attr.style[parent.name].materialOptions[attrName] = attrVal
        } else {
          newStyle[attrName] = attrVal

          this._last_attr.style.materialOptions = this._last_attr.style.materialOptions || {}
          this._last_attr.style.materialOptions[attrName] = attrVal
        }

        this.startEditing(this._last_attr)

        thisWidget.updateStyle2map({ materialOptions: newStyle })
        break
      }

      case "plot_attr_stylelabel_": {
        let newStyle = {}
        newStyle[attrName] = attrVal

        this._last_attr.style.label = this._last_attr.style.label || {}
        this._last_attr.style.label[attrName] = attrVal

        if (edit.type == "radio") {
          this.startEditing(this._last_attr)
        }

        thisWidget.updateStyle2map({ label: newStyle })

        break
      }
      case "plot_attr_attr_": {
        this._last_attr.attr[attrName] = attrVal
        newAttr[attrName] = attrVal
        thisWidget.updateAttr2map(newAttr)
        break
      }
    }

    return true
  }
}

// 时序相关
function changeAvali() {
  $("#table-box").empty()
  //   <li id="btnAdd" onclick="addAvaliItem('ava-title${index + 1}')" class="ava-btn"><i class="fa fa-plus" title="新增"></i></li>

  availabilityList.forEach((item, index) => {
    const span = $(`
        <span class="ava-title" id="ava-title${index + 1}">第${index + 1}个时间段
        <ul class="ava-tools">
        <li id="btnDelete" onclick="deleteAvali('ava-title${index + 1}')" class="ava-btn"><i class="fa fa-trash" title="删除"></i></li>
        </ul>
        </span>
        `)
    const table = $(
      `<table id='ava-table' class='mars-table'>
        <tbody>
          <tr>
            <td>开始时间</td>
            <td><input type='text' class='form-control' id='startTime${index + 1}' placeholder='YYYY-MM-DD' /></td>
        </tr>
        <tr>
            <td>结束时间</td>
            <td><input type='text' class='form-control' id='endTime${index + 1}' placeholder='YYYY-MM-DD' /></td>
        </tr>
        </tbody>
        </table>`
    )
    $("#table-box").append(span)
    $("#table-box").append(table)

    const startMinmaxData = getMinData(availabilityList, index, "start")
    jeDate(`#startTime${index + 1}`, {
      theme: {
        bgcolor: "#135b91",
        pnColor: "#00CCFF"
      },
      format: "YYYY-MM-DD hh:mm:ss",
      isClear: false,
      minDate: startMinmaxData.minDate,
      maxDate: startMinmaxData.maxDate,
      donefun: function (obj) {
        const { isChange, message } = getMinData(availabilityList, index, "start", obj.val)
        if (isChange) {
          availabilityList[index].start = obj.val
          thisWidget.availabilityChange(availabilityList)
        } else {
          toastr.warning(message)
          $(obj.elem).val(availabilityList[index].start)
        }
      }
    })

    const endMinmaxData = getMinData(availabilityList, index, "stop")
    jeDate(`#endTime${index + 1}`, {
      theme: {
        bgcolor: "#135b91",
        pnColor: "#00CCFF"
      },
      format: "YYYY-MM-DD hh:mm:ss",
      isClear: false,
      minDate: endMinmaxData.minDate,
      maxDate: endMinmaxData.maxDate,
      donefun: function (obj) {
        const { isChange, message } = getMinData(availabilityList, index, "stop", obj.val)
        if (isChange) {
          availabilityList[index].stop = obj.val
          thisWidget.availabilityChange(availabilityList)
        } else {
          toastr.warning(message)
          $(obj.elem).val(availabilityList[index].stop)
        }
      }
    })

    $(`#startTime${index + 1}`).val(availabilityList[index].start)
    $(`#endTime${index + 1}`).val(availabilityList[index].stop)
  })

  thisWidget.availabilityChange(availabilityList)
}

// function addAvaliItem(pos) {
//   const arr = [...pos]
//   const index = Number(arr[arr.length - 1])

//   const start = $(`#startTime${index}`).val()
//   const stop = $(`#endTime${index}`).val()

//   availabilityList.splice(index, 0, {
//     start: start,
//     stop: stop
//   })
//   changeAvali(availabilityList)
// }

function deleteAvali(domId) {
  const arr = [...domId]
  const index = arr[arr.length - 1]
  availabilityList.splice(index - 1, 1)
  changeAvali(availabilityList)
}

function getMinData(avaList, index, key, val) {
  let startTime = null
  let endTime = null

  const lastTimeSlot = avaList[index - 1]
  const currentTimeSlot = avaList[index]
  const nextTimeSlot = avaList[index + 1]

  switch (key) {
    case "start":
      if (lastTimeSlot) {
        startTime = lastTimeSlot.stop
      }
      endTime = currentTimeSlot.stop
      break
    case "stop":
      startTime = currentTimeSlot.start
      if (nextTimeSlot) {
        endTime = nextTimeSlot.start
      }

      break

    default:
      break
  }

  if (val) {
    if (startTime && new Date(val) < new Date(startTime)) {
      console.log(`选中时间小于开始时间！\n选中：${val}\n 开始时间：${startTime}`)
      return { isChange: false, message: `请重新选择时间，须大于${startTime}` }
    } else if (endTime && new Date(val) > new Date(endTime)) {
      console.log(`选中时间大于结束时间！\n选中：${val}\n 结束时间：${endTime}`)
      return { isChange: false, message: `请重新选择时间，须小于${endTime}` }
    } else {
      return { isChange: true, message: "" }
    }
  } else {
    return {
      minDate: startTime || jeDate.nowDate({ DD: -360 * 100 }),
      maxDate: endTime || jeDate.nowDate({ DD: 360 * 100 })
    }
  }
}