/* 2017-12-7 12:41:21 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） */
'use script' //开发环境建议开启严格模式

//对应widget.js中MyWidget实例化后的对象
var thisWidget

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

  //清除所有标号
  $('#btn_plot_delall').click(function () {
    thisWidget.deleteAll()
  })
  $('#btnDelete').click(function (e) {
    thisWidget.deleteCurrentGraphic()
    window.tab2plot() //切换面板
  })

  $('#btn_plot_savefile').click(function () {
    var data = thisWidget.arrFlyTable
    if (data == null || data.length == 0) {
      toastr.warning('当前没有漫游路线数据！')
    } else {
      haoutil.file.downloadFile('漫游路线数据.json', JSON.stringify(data))
    }
  })

  $('#btn_plot_importfile').click(function () {
    $('#input_plot_file').click()
  })
  function clearPlotFile() {
    if (!window.addEventListener) {
      document.getElementById('input_plot_file').outerHTML += '' //IE
    } else {
      document.getElementById('input_plot_file').value = '' //FF
    }
  }
  $('#input_plot_file').change(function (e) {
    var file = this.files[0]

    var fileName = file.name
    var fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase()
    if (fileType != 'json') {
      toastr.error('文件类型不合法,请选择json格式标注文件！')
      clearPlotFile()
      return
    }

    if (window.FileReader) {
      var reader = new FileReader()
      reader.readAsText(file, 'UTF-8')
      reader.onloadend = function (e) {
        var json = this.result
        clearPlotFile()

        if (!json) {
          return
        }

        var arrFlyTable = JSON.parse(json)
        if (arrFlyTable) {
          thisWidget.showData(arrFlyTable)
          tableWork.loadData(arrFlyTable)
        }
      }
    }
  })

  $('#btnSaveGeoJson').click(function () {
    var id = plotEdit._last_attr.id
    thisWidget.stopDraw()

    for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) {
      var item = thisWidget.arrFlyTable[i]
      if (item.id == id) {
        thisWidget.saveForGeoJson(item)
        break
      }
    }
  })
  $('#btnSaveCzml').click(function () {
    var id = plotEdit._last_attr.id

    thisWidget.stopDraw()
    for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) {
      var item = thisWidget.arrFlyTable[i]
      if (item.id == id) {
        thisWidget.saveForCzml(item)
        break
      }
    }
  })

  //是否可以编辑
  var isedit = true
  $('#btn_plot_isedit').click(function () {
    isedit = !isedit

    if (isedit) {
      $(this).removeClass('active')
      $(this).children().removeClass('fa-lock').addClass('fa-unlock')
    } else {
      $(this).addClass('active')
      $(this).children().removeClass('fa-unlock').addClass('fa-lock')
    }
    thisWidget.hasEdit(isedit)
  })

  plotEdit.initEvent()
  plotEdit.loadConfig()
  tableWork.initEvent()
}

//标号列表相关
var plotlist = {
  //开始绘制
  startPlot: function () {
    var defval = haoutil.system.clone(plotEdit.defval['polyline'] || {})
    defval.type = 'polyline'
    defval.name = '飞行漫游路线'
    thisWidget.startDraw(defval)
  },
  //绘制结束
  plotEnd: function () {
    //取消选中状态
    if (this._lastLi) {
      this._lastLi.removeClass('markon')
    }
  },
}

//列表处理
var tableWork = {
  $table: null,
  getHeight: function () {
    return $(window).height() - 80
  },
  initEvent: function () {
    var that = this

    $('#btn_Add_line').click(function () {
      plotlist.startPlot()
    })
    $('#btnFlyStart').click(function (e) {
      var id = plotEdit._last_attr.id
      thisWidget.graphicLayer.stopDraw()
      for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) {
        var item = thisWidget.arrFlyTable[i]
        if (item.id == id) {
          thisWidget.toRoamFly(item)
          break
        }
      }
    })

    var $table = $('#table')
    $table.bootstrapTable({
      height: this.getHeight(),
      singleSelect: true, //单选
      pagination: false,
      iconsPrefix: 'fa',
      columns: [
        {
          title: '名称',
          sortable: true,
          editable: false,
          align: 'left',
          formatter: function (value, row, index) {
            return row?.attr?.name || ''
          },
        },
        {
          title: '操作',
          align: 'center',
          width: 80,
          events: {
            'click .remove': function (e, value, row, index) {
              thisWidget.deleteGraphic(row.id)
            },
            'click .fly': function (e, value, row, index) {
              thisWidget.toRoamFly(row)
            },
            'click .edit': function (e, value, row, index) {
              that.showTableItem(row)
            },
          },
          formatter: function (value, row, index) {
            return [
              '<a class="fly" href="javascript:void(0)" title="飞行"><i class="fa fa-send-o"></i></a>&nbsp;&nbsp;',
              '<a class="edit" href="javascript:void(0)" title="编辑"><i class="fa fa-edit"></i></a>&nbsp;&nbsp;',
              '<a class="remove" href="javascript:void(0)" title="删除"><i class="fa fa-trash"></i></a>',
            ].join('')
          },
        },
      ],
      onDblClickRow: function (rowData, $element, field) {
        that.showTableItem(rowData)
      },
    })
    this.$table = $table

    this.loadData(thisWidget.arrFlyTable)
  },
  loadData: function (arr) {
    if (this.$table) {
      this.$table.bootstrapTable('load', arr)
    }
  },
  showTableItem: function (data) {
    thisWidget.startEditingById(data.id)
  },
}

//属性编辑相关
var plotEdit = {
  hasEditSylte: false,
  config: {},
  defval: {},
  initEvent: function () {
    var that = this
    if (!this.hasEditSylte) {
      $('#attr_style_view').hide()
    }

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

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

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

      thisWidget.updateGeo2map(latlngs, true)
    })

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

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

      thisWidget.updateGeo2map(latlngs, true)
    })

    //航速
    $('#txtFlySpeedAll').bind('input propertychange', function () {
      var thispeed = Number($(this).val())
      if (thispeed > 0) {
        var speeds = []
        $('.plot_speeds').each(function () {
          $(this).val(thispeed)
          speeds.push(thispeed)
        })

        that._last_attr.attr.speed = speeds
      }
    })
  },
  loadConfig: function () {
    var that = this
    $.getJSON('config/attr.json', function (data) {
      that.config = data

      for (var i in data) {
        var defstyle = {}
        for (let idx = 0; idx < data[i].style.length; idx++) {
          let item = data[i].style[idx]
          defstyle[item.name] = item.defval
        }
        var defattr = {}
        for (let idx = 0; idx < data[i].attr.length; idx++) {
          let item = data[i].attr[idx]
          defattr[item.name] = item.defval
        }

        that.defval[i] = {
          edittype: 'polyline',
          name: data[i].name,
          position: data[i].position,
          style: defstyle,
          attr: defattr,
        }
      }
      //plotlist.bindSelList();
    })
  },

  _last_attr: null,
  //选中标号，激活属性面板
  startEditing: function (attr, latlngs) {
    this._last_attr = attr
    var config = this.config['polyline'] || {}

    if (latlngs) {
      this.updateLatlngsHtml(latlngs, config.position)
    }

    var arrFun = []
    //==============style==================
    if (this.hasEditSylte) {
      let parname = 'plot_attr_style_'
      let inHtml = '<tr><td class="nametd">类型：</td><td>' + (config.name || attr.name) + '</td></tr>'
      for (let idx = 0; idx < config.style.length; idx++) {
        let edit = config.style[idx]
        if (edit.type == 'hidden') {
          continue
        }

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

        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_style').html(inHtml)
    }
    //==============attr==================
    let parname = 'plot_attr_attr_'
    let inHtml = ''
    for (let idx = 0; idx < config.attr.length; idx++) {
      let edit = config.attr[idx]
      if (edit.type == 'hidden') {
        continue
      }

      let attrName = edit.name
      let attrVal = attr.attr[attrName]

      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() //切换面板
  },
  lastCfg: null,
  updateLatlngsHtml: function (latlngs, cfg) {
    cfg = cfg || this.lastCfg || {}
    this.lastCfg = cfg

    $('#plot_latlngs_addheight').val('')
    $('#plot_latlngs_allheight').val('')
    $('#view_updateheight').hide()

    if (!cfg.hasOwnProperty('height')) {
      cfg.height = true
    }

    //显示坐标信息
    var 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" value="' +
        jd +
        '"></td></tr>' +
        '<tr>  <td class="nametd">纬度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="wd" value="' +
        wd +
        '"></td></tr>'
      if (cfg.height) {
        inHtml +=
          '<tr><td class="nametd">高程：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="height" value="' +
          height +
          '" oldvalue="' +
          height +
          '"></td></tr>'
      }
      inHtml += ' </table> </div>'
    } else {
      if (cfg.height) {
        $('#view_updateheight').show()
      }

      var delhtml = ''

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

      var speeds = this._last_attr.attr.speed
      var isSpeedArray = !haoutil.isutil.isNumber(speeds)
      var defSpeed = $('#txtFlySpeedAll').val() || 100

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

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

        var addthml = ''
        if (cfg.maxCount == null || latlngs.length < cfg.maxCount) {
          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" data-index="' +
          idx +
          '" value="' +
          jd +
          '"></td>  </tr> ' +
          '<tr>  <td class="nametd">纬度：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="wd" data-index="' +
          idx +
          '" value="' +
          wd +
          '"></td> </tr> '
        if (cfg.height) {
          inHtml +=
            '<tr>  <td class="nametd">高程：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="height" data-index="' +
            idx +
            '" value="' +
            height +
            '" oldvalue="' +
            height +
            '"></td> </tr> '
        }

        if (idx != latlngs.length - 1) {
          var _speed = isSpeedArray ? (speeds ? speeds[idx] : defSpeed) : speeds || defSpeed

          inHtml +=
            '<tr> <td class="nametd">航速(km/h)</td> <td><input  type="number" class="mp_input plot_speeds" title="第' +
            (idx + 1) +
            '点至第' +
            (idx + 2) +
            '点之间航速" data-type="speed" data-index="' +
            idx +
            '" value="' +
            _speed +
            '"></td> </tr> '
        }

        inHtml += ' </table> </div> </div>'
      }
    }
    $('#view_latlngs').html(inHtml)
    $('#view_latlngs .open').click(window.changeOpenShowHide)

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

      var latlngs = []
      var withHeight = false
      $('.plot_latlngs').each(function () {
        latlngs.push(Number($(this).val()))
        if ($(this).attr('data-type') === 'height') {
          withHeight = true
        }
      })
      thisWidget.updateGeo2map(latlngs, withHeight)

      //重新修改界面
      var 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)
    })
    $('#view_latlngs .latlng-install').click(function () {
      var idx = Number($(this).attr('data-index'))

      //速度
      var speeds = []
      $('.plot_speeds').each(function () {
        speeds.push(Number($(this).val()))
      })
      speeds.splice(idx + 1, 0, speeds[idx])
      that._last_attr.speed = speeds

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

      //重新修改界面
      var 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]])
        }
      }

      var pt1 = arr[idx]
      var pt2 = idx == arr.length - 1 ? arr[0] : arr[idx + 1]
      var jd = Number(((pt1[0] + pt2[0]) / 2).toFixed(6))
      var wd = Number(((pt1[1] + pt2[1]) / 2).toFixed(6))
      if (withHeight) {
        var gd = Number(((pt1[2] + pt2[2]) / 2).toFixed(1))
        arr.splice(idx + 1, 0, [jd, wd, gd])
        latlngs.splice((idx + 1) * 3, 0, jd, wd, gd)
      } else {
        arr.splice(idx + 1, 0, [jd, wd])
        latlngs.splice((idx + 1) * 3, 0, jd, wd)
      }

      that.updateLatlngsHtml(arr)
      thisWidget.updateGeo2map(latlngs, withHeight)
    })

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

    $('.plot_speeds').bind('input propertychange', function () {
      var speeds = []
      $('.plot_speeds').each(function () {
        speeds.push(Number($(this).val()))
      })

      that._last_attr.speed = speeds
    })
  },
  //单击地图空白，释放属性面板
  stopEditing: function () {
    window.tab2plot() //切换面板

    $('#talbe_style').html('')
    $('#talbe_attr').html('')
    this._last_attr = null
  },
  //获取各属性的编辑html和change方法
  getAttrInput: function (parname, attrName, attrVal, edit) {
    attrVal = attrVal || ''

    var that = this

    var inHtml = ''
    var 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) {
            var attrVal = $(this).val()
            that.updateAttr(parname, attrName, attrVal)
          })
        }
        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('input propertychange', function (e) {
            var attrVal = $(this).val()
            if (attrVal.length == 0) {
              attrVal = '文字'
            }
            attrVal = attrVal.replace(/\n/g, '<br />')

            that.updateAttr(parname, attrName, attrVal)
          })
        }
        break
      case 'number':
        inHtml = '<input id="' + parname + attrName + '" type="number" value="' + attrVal + '"    class="mp_input"/>'
        fun = function (parname, attrName, attrVal, edit) {
          $('#' + parname + attrName).on('input propertychange', function (e) {
            var attrVal = Number($(this).val())

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

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

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

            that.updateAttr(parname, attrName, attrVal)

            that.changeViewByAttrEx(parname, attrName, attrVal)
          })

          that.changeViewByAttrEx(parname, attrName, attrVal)
        }
        break

      case 'radio':
        var _name_key = parname + attrName
        inHtml =
          '  <div class="radio radio-info radio-inline"> <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 +
          '_2" value="2" name="' +
          _name_key +
          '" ' +
          (attrVal ? '' : 'checked="checked"') +
          ' "><label for="' +
          _name_key +
          '_2"> 否 </label> </div>'

        fun = function (parname, attrName, attrVal, edit) {
          $('input:radio[name="' + parname + attrName + '"]').change(function () {
            var attrVal = $(this).val() == '1'
            that.updateAttr(parname, attrName, attrVal)

            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)
            },
          })
        }
        break
      case 'slider':
        inHtml = '<input id="' + parname + attrName + '"  type="text" value="' + attrVal * 100 + '" />'
        fun = function (parname, attrName, attrVal, edit) {
          var _width = $('.mp_tab_card').width() * 0.7 - 30
          $('#' + parname + attrName).progress(_width) //绑定样式
          $('#' + parname + attrName).change(function () {
            var attrVal = Number($(this).val()) / 100

            that.updateAttr(parname, attrName, attrVal)
          })
        }
        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) {
            var attrVal = $(this).val()
            that.updateAttr(parname, attrName, attrVal)
          })
        }
        break
    }
    return {
      html: inHtml,
      fun: fun,
    }
  },
  //联动属性控制
  changeViewByAttr: function (parname, arrimpact, visible) {
    if (arrimpact && arrimpact.length > 0) {
      for (var jj = 0; jj < arrimpact.length; jj++) {
        var attrName = arrimpact[jj]
        if (visible) {
          $('#' + parname + 'tr_' + attrName).show()
        } else {
          $('#' + parname + 'tr_' + attrName).hide()
        }
      }
    }
  },
  changeViewByAttrEx: function (parname, attrName, attrVal) {
    if (parname == 'plot_attr_attr_' && attrName == 'cameraType') {
      switch (attrVal) {
        default:
          //无
          $('#' + parname + 'tr_followedX').hide()
          $('#' + parname + 'tr_followedZ').hide()
          break

        case 'gs': //跟随视角
          $('#' + parname + 'tr_followedX').hide()
          $('#' + parname + 'tr_followedZ').hide()
          break
        case 'dy': //锁定第一视角
          $('#' + parname + 'tr_followedX').show()
          $('#' + parname + 'tr_followedZ').show()

          break
        case 'sd': //锁定上帝视角
          $('#' + parname + 'tr_followedX').hide()
          $('#' + parname + 'tr_followedZ').show()
          break
      }
    }
  },
  //属性面板值修改后触发此方法
  updateAttr: function (parname, attrName, attrVal) {
    switch (parname) {
      default:
      case 'plot_attr_style_':
        this._last_attr.style[attrName] = attrVal
        break
      case 'plot_attr_attr_':
        this._last_attr.attr[attrName] = attrVal
        //this.startEditing(this._last_attr);
        break
    }
    thisWidget.updateAttr2map(this._last_attr)
  },
}