import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  // state里面就是存放项目中需要多组件共享的状态
  state: {
    count: 0,
    data: null,
    vudideoUrl: '',
    videoName: '',
    videoId: null,
    showVideoFlag: false,
    showVideourl: null,
    billboards: [],
    ShowPanoramicFlag: false,
    flagID: null,
    index: -1,
    poiFlag: null,
    mainUrl: null,
    poiStatus: 1, // 1-显示3DPOI,2-显示2DPOI,3-隐藏所有
    _3ds: [],
    _2ds: [],
    xOffset: -0.0032850793719939,
    yOffset: 0.0278651231623049,
    // 坐标转换
    transform: function (x, y) {
      //console.log(this.xOffset, this.yOffset)
      //return map.transformWGS84ToLocal(x + this.xOffset, y + this.yOffset)
      return map.transformWGS84ToLocal((x - 26.897633220927) * 1.3, (y - 9.16663529527973) * 1.3)
    },
    // 创建3DPOI
    create3DPOI: function (data, startIdx, isHighlight) {
      let points = [];
      for (let i = 0, c = data.length; i < c; i++) {
        let p = this.transform(data[i].longitude, data[i].latitude);
        points.push({
          index: i + startIdx,
          id: data[i].channelId,
          x: p.x,
          y: p.y,
          z: 1500,
          //image: this.mainUrl + (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
          image: (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
          text: '',
          scale: 20,
          clickedScale: 20,
          visibility: true,
          flash: false,
          canClick: true,
          channelId: data[i].channelId
        });
      }
      return map.create3DBillboard(points);
    },
    // 创建2DPOI
    create2DPOI: function (d, idx, isHighlight) {
      let p = this.transform(d.longitude, d.latitude);
      return map.createBillboard({
        index: idx,
        id: d.channelId,
        x: p.x,
        y: p.y,
        z: p.z,
        //image: this.mainUrl + (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
        image: (isHighlight ? 'UE/img/1.png' : 'UE/img/2.png'),
        text: "",
        scale: 0.2,
        channelId: d.channelId,
        clickedScale: 0.2,
        flash: false,
        canClick: true,
        alertWindow: null
      });
    },
    // 获取显示状态
    getVisibleStatus: function () {
      let dis = map.camera.distance;
      if (dis > 500000) return 3;

      if (dis > 100000) return 2;

      return 1;
    }
  },
  // mutations就是存放更改state里状态的方法
  mutations: {
    // 添加视频点 *
    addVideos (state, data) {
      //debugger
      this.commit('removeBillboards');
      this.commit('pretreat', data);
      this.commit('add3DPOI');
      this.commit('add2DPOI');
      this.commit('setPOIVisible');
      //this.commit('flyToData');
    },
    // 清除
    removeBillboards (state) {
      map.removeCluster();
      map.clearAllCovering();
      state._3ds.length = 0;
      state._2ds.length = 0;
      state.index = -1;
    },
    // 预处理
    pretreat: function (state, data) {
      state.data = [];
      for (let i = 0, c = data.length; i < c; i++) {
        let d = data[i];
        if (!d.longitude || isNaN(d.longitude) || !d.latitude || isNaN(d.latitude) || !d.channelStatus) continue;

        d.longitude = parseFloat(d.longitude)
        d.latitude = parseFloat(d.latitude)
        state.data.push(d)
      }
    },
    // 添加三维POI
    add3DPOI (state) {
      for (let i = 0, c = Math.ceil(state.data.length / 10); i < c; i++) {
        let points = state.data.slice(i * 10, (i + 1) * 10);
        let arr = state.create3DPOI(points, i * 10, false);

        state._3ds = state._3ds.concat(arr);
      }
    },
    // 添加二维POI
    add2DPOI (state) {
      for (let i = 0, c = state.data.length; i < c; i++) {
        let poi = state.create2DPOI(state.data[i], i, false);
        state._2ds.push(poi);
      }
    },
    // 设置POI显示
    setPOIVisible (state) {
      state.poiStatus = state.getVisibleStatus();

      let arr = state.poiStatus === 1 ? state._2ds : state._3ds;
      arr.forEach(function (b) {
        b.show(false);
      });

      if (state.poiStatus === 2) map.createCluster({ interval: 500000, size: 10 });
    },
    // 飞向数据
    flyToData (state) {
      /*var minX = 180, minY = 90, maxX = 0, maxY = 0;
      for (var i = 0, c = state.data.length; i < c; i++) {
        let x = state.data[i].longitude, y = state.data[i].latitude;

        if (x > maxX) maxX = x;
        if (y > maxY) maxY = y;
        if (x < minX) minX = x;
        if (y < minY) minY = y;
      }

      var cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
      var p = state.transform(cx, cy);

      //map.flyTo(p.x, p.y, 0, 0, -42, 0, 50000, null, 3);
      map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 0));*/
      // setTimeout(function () {
      //   map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 20));
      // }, 1500);

      let x = state.data[0].longitude, y = state.data[0].latitude;
      var p = state.transform(x, y);
      map.focusOn(new TUVector3(p.x, p.y, 0), new TURotator(0, -42, 0));
      //map.setView(p.x, p.y, 0, 0, -42, 0, 6000);
    },
    // 切换视频点 *
    changeVideo (state, index) {
      let status = state.getVisibleStatus();
      if (state.index != -1) {
        this.commit('change3DPOI', { idx: state.index, flag: false, status: status });
        this.commit('change2DPOI', { idx: state.index, flag: false, status: status });
      }

      this.commit('change3DPOI', { idx: index, flag: true, status: status });
      this.commit('change2DPOI', { idx: index, flag: true, status: status });
      state.index = index;
    },
    // 切换3DPOI
    change3DPOI (state, rs) {
      let d = state.data[rs.idx];
      let poi = state.create3DPOI([d], rs.idx, rs.flag)[0];

      state._3ds[rs.idx].removeFromMap();
      state._3ds.splice(rs.idx, 1, poi);

      if (rs.status !== 1) poi.show(false);
    },
    // 切换2DPOI
    change2DPOI (state, rs) {
      let d = state.data[rs.idx];
      let poi = state.create2DPOI(d, rs.idx, rs.flag);

      state._2ds[rs.idx].removeFromMap();
      state._2ds.splice(rs.idx, 1, poi);

      if (rs.status !== 2) poi.show(false);
    },
    // 切换POI显示状态 *
    changePOIVisible (state, status) {
      state.poiStatus = status;
      if (status !== 2) map.removeCluster();

      state._2ds.forEach(function (b) {
        b.show(status === 2);
      });

      state._3ds.forEach(function (a) {
        a.show(status === 1);
      });

      if (status === 2) map.createCluster({ interval: 500000, size: 10 });
    },
    // 切换图片
    changeImg: function (state, rs) {
      if (state.index != -1) {
        let status = state.getVisibleStatus();
        this.commit('change3DPOI', { idx: state.index, flag: false, status: status });
        this.commit('change2DPOI', { idx: state.index, flag: false, status: status });
        state.index = -1;
      }
    }
  },
  // actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
  //actions不能直接修改state里的值必须通过触发某个mutation才行
  actions: {
    addAsync (context, step) {
      // 异步操作mutations里的方法
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    subAsync (context, step) {
      // 异步操作mutations里的方法
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
  //相当于计算属性不会修改state里本身的值
  getters: {
    showNum (state) {
      return `2`
    }
  }
});