// pages/map.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
  key: 'QLPBZ-QODCX-7KB46-TQERC-T36BT-IIBJO' // 必填
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isChecked:false,
    inputVal:'',
    latitude: 33.963864,
    longitude: 118.277435,
    suggestion:[],
    district:{
      latitude: 34.093003,
      longitude: 118.756021,
    },
    distance: '',
    distance: '',
    scale: 11,
    currMaker: {},
    markers: [],
    customCalloutMarkerIds: [1,2,3],
    list:{name:'1111',},
    mapShow:true,
    tabList: [{
      title: '总体情况',
      num: 0
    }, {
      title: '特殊事件',
      num: 1
    }],
    listNew: [{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'17：00：00日本发生7.2级地震，张家港桥跨中位移超限，其余桥梁无异',year:'2022年7月7日'}], // 数据列表
    page: 0, // page：当前页--
    currentIndex: 0,
    bridge:[],
    bridgeItem:{
      iconPath: './images/mapIcon.png',
      width: 25,
      height: 25,
      bridgeName: '淮沭新河特大桥',
      latitude: 34.079334,
      longitude: 118.726242,
      img:'./images/hsxhtdq.png',
      id: "1",
      callout: {
        display: 'BYCLICK'
      }
    },
    flag: true,
    // 用户输入的关键词
    searchValue:'',
    // 滚动选择的索引
    selectSchoolIndex:'',
    school_name:'',
    schoolValidate:'',
    school_id:''
  },
  pagechange: function (e) {
    console.log("e",e)

    // 通过touch判断，改变tab的下标值
    // if ("touch" === e.detail.source) {
    //   let currentPageIndex = this.data.currentIndex;
    //   currentPageIndex = (currentPageIndex + 1) % 2;
    //   // 拿到当前索引并动态改变
    //   this.setData({
    //     currentIndex: currentPageIndex,
    //   })
    // }
  },
  //获取所有桥梁数据
  getMainbridge: function () {
    let that = this;
     // 调用云函数
     wx.cloud.callContainer({
      config: {
        env: 'prod-3g40nj3p9469214c',// 微信云托管的环境ID
      }, 
      path: '/api/v1/bridges',
      method: 'GET',
      header: {
        'X-WX-SERVICE': 'bsisp-api', 
        'content-type': 'application/json',
        'Authorization':'Bearer '+wx.getStorageSync('token')
      },
      
      success: function (res) {
        console.log("res",res)
        if(res.data.status="SUCCESS"){
          var getBridgeContent = []
          console.log("res.data.data",res.data.data)
            for (let i = 0; i < res.data.data.length; i++) {
              getBridgeContent.push({ // 获取返回结果，放到sug数组中
                  iconPath: './images/mapIcon.png',
                  width: 25,
                  height: 25,
                  callout: {
                    display: 'BYCLICK'
                  },
                  bridgeName: res.data.data[i].bridgeName,
                  id: Number(res.data.data[i].id),
                  img: res.data.data[i].fileId,
                  latitude: res.data.data[i].latitude,
                  longitude: res.data.data[i].longitude,
                  bridgeLength: res.data.data[i].bridgeLength,
                  bridgeType: res.data.data[i].bridgeType,
                  
                  roadNo: res.data.data[i].roadNo,
                  stakeNo: res.data.data[i].stakeNo,
                });
      }
      console.log("getBridgeContent",getBridgeContent)
      
          that.getMyLocation(getBridgeContent)
          that.setData({
            bridge: getBridgeContent
          })
          console.log("that.data.bridge",that.data.bridge)   
        }
        
      }
    })
  },
  //获取单个桥数据 //wx.getStorageSync
  getItembridge: function (e) { // 一定要传递参数e
    console.log("e",e)
    console.log("wx.getStorageSync('token')",wx.getStorageSync('token'))
    // const that = this // 保存this对象
    // 调用云函数
    wx.cloud.callContainer({
      config: {
        env: 'prod-3g40nj3p9469214c',// 微信云托管的环境ID
      }, 
      path: '/api/v1/bridges',
      method: 'get',
      header: {
        'X-WX-SERVICE': 'bsisp-api', 
        'content-type': 'application/json',
        'Authorization':'Bearer '+wx.getStorageSync('token')
      },
      data:  {
        bridgeName: [e]// 从缓存中获取到phoneNumber字段
          },
      
      success: function (res) {
        console.log("res",res)
        
      }
    })
  },
  showSchoolPicker()
  {
    console.log("1111")
    let self = this;
    self.showDatePicker()
  },
  hiddeDatePicker()
  {
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
  },
  showDatePicker()
  {
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
    // self.getItems(self.bridge)
  },
  confirm(e)
  {
    console.log("self.e",e)
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
    // self.inputVal
    // 获取选择
    let item = self.data.bridge[self.data.selectSchoolIndex]?self.data.bridge[self.data.selectSchoolIndex]:self.data.bridge[0];
    console.log("item",item)
    // 通过发送自定义事件把用户选择的传递到父组件
    self.setData({
      // 选择
      inputVal:item.bridgeName
    })
    self.bindmarkertap(e,item)
  },
  bindChangePicker(e)
  {
    console.log("e.detail.value[0]",e)
    console.log("e.detail.value[0]",e.detail.value[0])
    let self = this;
    self.setData({
      // 索引
      selectSchoolIndex:e.detail.value[0]
    })
  },
  //点击tab时触发
  titleClick: function (e) {
    console.log("e",e.currentTarget.dataset.idx)
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })
  },
  // 选择位置
  handlePos(val){
    console.log(val,'asdas');
    var _this = this;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: val.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function(res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: Number(res.data[i].id),
            addr: res.data[i].bridgeName,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
  },

  // 获取我的位置
  getMyLocation: function (e) {
    var that = this; 
    console.log("e",e)  
    that.setData({
      markers: e
    })
   
    // wx.getLocation({
    //   type: 'gcj02',
    //   success: function (res) {
    //     that.setData({
    //       latitude: res.latitude,
    //       longitude: res.longitude
    //     })
        
    //   }
    // })
  },
  // marker的点击事件
  bindmarkertap(e,index) {
    console.log('e', e)
    
    if(index){
      console.log('index', index)
      // this.getItembridge(index.bridgeName)
      let that = this
      that.setData({
        currMaker: index
      })
      let _markers = that.data.markers
      console.log('_markers', _markers)
      let arr = []
      for (let i = 0; i < _markers.length; i++) {
        if (_markers[i].bridgeName === index.bridgeName) {
          that.setData({ 
            isChecked:true ,
            list:_markers[i]
           }) 
          arr.push({
            bridgeName: _markers[i].bridgeName,
            latitude: _markers[i].latitude,
            longitude: _markers[i].longitude,
            img:_markers[i].img,
            id: Number(_markers[i].id),
            width: 40,
            height: 40,
            iconPath: './images/mapIcon.png',
            bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
            callout: {
              content: _markers[i].bridgeName,
              img:_markers[i].img,
              bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
              display: 'ALWAYS',
              color: '#333333',
              bgColor: '#fff',
              padding: 10,
              borderRadius: 10,
              borderColor: '#fff',
              fontSize: 16,
              borderWidth: 5,
              textAlign: 'center',
            },
          })
        } else {
          arr.push({
            bridgeName: _markers[i].bridgeName,
            img:_markers[i].img,
            bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
            latitude: _markers[i].latitude,
            longitude: _markers[i].longitude,
            id: Number(_markers[i].id),
            width: 25,
            height: 25,
            iconPath: './images/mapIcon.png',
            callout: {
              display: 'BYCLICK'
            }
          })
        }
      }
      that.setData({
        markers: arr
      })
      wx.hideLoading({
        success: (res) => {
          console.log(arr)
        },
      })
    }else{
      let that = this
      let _markers = that.data.markers
      console.log('_markers', _markers)
      let markerId = parseInt(e.detail.markerId)
      console.log('markerId', markerId)
      _markers.forEach(item => {
        // console.log('item', item)
        if (Number(item.id) === markerId) {
          // console.log('11111', item)
          that.setData({
            currMaker: item
          })
        }
      })
      let currMaker = that.data.currMaker
      console.log('currMaker', that.data.currMaker)
      this.getItembridge(currMaker.bridgeName)
      // qqmapsdk.calculateDistance({
        // to: [{
        //   latitude: currMaker.latitude,
        //   longitude: currMaker.longitude
        // }],
        // success: function (res) {
          // console.log("res",res)
          let arr = []
          for (let i = 0; i < _markers.length; i++) {
            if (Number(_markers[i].id) === markerId) {
              console.log("_markers[i].id",_markers[i].id)
              that.setData({ 
                isChecked:true ,
                list:_markers[i]
               }) 
              arr.push({
                bridgeName: _markers[i].bridgeName,
                latitude: _markers[i].latitude,
                longitude: _markers[i].longitude,
                img:_markers[i].img,
                id: Number(_markers[i].id),
                bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
                width: 40,
                height: 40,
                iconPath: './images/mapIcon.png',
                callout: {
                  // content: `距您${distanceKm}`,
                  content: _markers[i].bridgeName,
                  bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
                  img:_markers[i].img,
                  display: 'ALWAYS',
                  color: '#333333',
                  bgColor: '#fff',
                  padding: 10,
                  borderRadius: 10,
                  borderColor: '#fff',
                  fontSize: 16,
                  borderWidth: 5,
                  textAlign: 'center',
                },
              })
            } else {
              arr.push({
                bridgeName: _markers[i].bridgeName,
                img:_markers[i].img,
                bridgeLength: _markers[i].bridgeLength,
            bridgeType: _markers[i].bridgeType,
            roadNo: _markers[i].roadNo,
            stakeNo: _markers[i].stakeNo,
                latitude: _markers[i].latitude,
                longitude: _markers[i].longitude,
                id: Number(_markers[i].id),
                width: 25,
                height: 25,
                iconPath: './images/mapIcon.png',
                callout: {
                  display: 'BYCLICK'
                }
              })
            }
          }
          that.setData({
            markers: arr
          })
          wx.hideLoading({
            success: (res) => {
              console.log(arr)
            },
          })
    }
  
      // }
    // })
  },
  // 跳转列表
  handleRouter(){
      wx.navigateTo({
        url:'/pages/list/list'
      })
  },

  getOnlineDistrict(latitude, longitude) {
    var that = this;
    //通过这个方法来实现经纬度反推省市区
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: 34.093003,
        longitude: 118.756021,
      },
      
      success: function (res) {
        // var obj = {
    
        //   latitude: 34.093003,
        //   longitude: 118.756021,
        // }
        // that.setData({
        //   district:obj
        // })
        // console.log(res,'asda');
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   console.log("options",options)
    var that = this
    that.getMainbridge()
    that.getOnlineDistrict()
    // wx.getLocation({
    //   type: 'wgs84',
    //   // altitude: false,
    //   success: (result) => {
    //     console.log("result",result)
    //     // var obj = {
    //     //   latitude:result.latitude,longitude:result.longitude
    //     // }
    // that.getOnlineDistrict(result.latitude, result.longitude)
    //   },
    // });
  
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },
//点击地图
handleClickMarker(e){
  console.log("111",e)  
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})