import { listDevice } from '@/api/iot/device';
import { listLand } from '@/api/agriculture/land';
import { getDicts } from '@/api/system/dict/data';
const mapMixinLand = {
  data() {
    return {
      area: [],
      device: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false,
      landType: [],
      deviceType: [],
      staticArea: [
        {
          id: '01',
          landPath: ["99.88785,24.426105|99.892485,24.424855|99.894545,24.426418|99.89094,24.428137"],
          fillColor: '#d96298', fillOpacity: 0.8, strokeColor: "#d96298", strokeWeight: 1, strokeOpacity: 0.8,
        },
        {
          id: '02',
          landPath: ["99.877778,24.414434|99.880525,24.411073|99.883272,24.412245|99.881727,24.414981"],
          fillColor: '#d9e961', fillOpacity: 0.8, strokeColor: "#d9e961", strokeWeight: 1, strokeOpacity: 0.8,
        },
        {
          id: '03',
          landPath: 
          ["99.853174,24.424073|99.850256,24.426105|99.855749,24.426731|99.880812,24.421885",
            
          ],
          fillColor: '#ba8ae3', fillOpacity: 0.8, strokeColor: "#ba8ae3", strokeWeight: 1, strokeOpacity: 0.8,
        },
        {
          id: '04',
          landPath: ["99.866907,24.415946|99.861243,24.413601|99.859183,24.417196|99.880812,24.421885"],
          fillColor: '#88b0d3', fillOpacity: 0.8, strokeColor: "#88b0d3", strokeWeight: 1, strokeOpacity: 0.8,
        },
        {
          id: '05',
          landPath: ["99.865247,24.416309|99.867736,24.411151|99.869796,24.412323|99.86971,24.415684"],
          fillColor: '#efc0ac', fillOpacity: 0.8, strokeColor: "#efc0ac", strokeWeight: 1, strokeOpacity: 0.8,
        },
        {
          id: '06',
          landPath: ["99.858209,24.408963|99.86087,24.40396|99.863445,24.406305|99.862243,24.408806"],
          fillColor: '#80f1b0', fillOpacity: 0.8, strokeColor: "#80f1b0", strokeWeight: 1, strokeOpacity: 0.8,
        }

      ],
      overlayGroup:[],
    };
  },
  watch: {
    baseId: {
      handler: async function (n) {
        if (n) {
          await this.$nextTick();
          if (this.type == 'pageLand') {
            this.loading = true;
            // 获去地块数据
            const res = await listLand({ baseId: this.baseId });
            this.area = res.rows;

            // 获取设备数据
            const res1 = await listDevice({ baseId: this.baseId });
            this.device = res1.rows.map((item) => ({
              ...item,
              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
            }));
            this.initMap();
            getDicts('agriculture_land_type').then((response) => {
              this.landType = response.data;
            });
            getDicts('iot_device_status').then((response) => {
              this.deviceType = response.data;
            });
          }
        }
      },
      immediate: true,
    },
  },
  async mounted() { },
  methods: {
    /** 初始化map */
    async initMap() {
      this.map = new this.AMap.Map('landMap', {
        // 设置地图容器id
        mapStyle: 'amap://styles/grey',
        zoom: 12, // 初始化地图级别
        doubleClickZoom: false,
        center: [99.920974, 24.592758]
      });
      await this.createAreaPolygon(true);
      // await this.createDevicePoint();
    },
    /** 绘制地块 */
    createAreaPolygon(type, ids,options) {
      const label = [];
      let overlayGroupNew = [];
      // console.info('this.area', this.area)
      // this.area.forEach((item) => {
      let areaList = [];
      if (ids) {
        if (ids.length > 0) {
          areaList = this.staticArea.filter((m) => {
            return ids.includes(m.id)
          }) || []
        } else {areaList = [] }

      } else { areaList = this.staticArea }
    
      if(areaList.length>0){
      areaList.forEach((item) => {
        if (item.landPath) {
          const path = [];
          const pointList = [];
          if( item.landPath &&  item.landPath.length &&  item.landPath.length>0){
            item.landPath.forEach((k)=>{
              k.split('|').forEach((point) => {
                path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
                pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
              });
            })
            
          }
          
          let colorVal='';
          if(options && options.length>0){
          let indexF=options.findIndex((m)=>{
               return m.id==item.id
          })
         colorVal=indexF>-1 ? options[indexF].color : ''
         }
          const polygon = new this.AMap.Polygon({
            path: path,
            fillColor:colorVal||  item.fillColor,
            fillOpacity: item.fillOpacity,
            strokeColor:colorVal || '',
            strokeWeight: colorVal||  item.fillColor,
            strokeOpacity: item.strokeOpacity,
            extData: {
              ...item,
            },
          });
          polygon.on('click', (e) => {
            this.createInfoWindow(e);
          });

          this.overlayGroup.push(polygon);
          if(type==false){
            overlayGroupNew.push(polygon)
          }
          // 添加地块名称
          label.push(
            new this.AMap.Text({
              text: item.landName ? item.landName : '名称',
              anchor: 'center',
              position: this.getAreaCenter(pointList),
              style: {
                background: 'transparent',
                color: '#fff',
                border: 'none',
                fontSize: '16px',
              },
            })
          );
        }
      });
    }
      // this.map.add(new this.AMap.OverlayGroup(label));
      if (type) {
        if(this.overlayGroup.length>0){
        this.map.add(new this.AMap.OverlayGroup(this.overlayGroup));
        this.map.setFitView(this.overlayGroup);
        this.map.setZoom(13)
        // this.map.moveCamera(CameraUpdateFactory.zoomTo(15))
        this.loading = false;
       }
      }else{
        this.map.remove(this.overlayGroup)
        this.map.add(new this.AMap.OverlayGroup(overlayGroupNew));
      }

    },
    getlandPath(ids) {
      if (ids && ids.length > 0) {
        let key = Object.keys(this.ob)
      }
    },
    /**  创建设备marker点 */
    createDevicePoint() {
      const devicePointList = [];
      this.device.forEach((device) => {
        if ((device.longitude, device.latitude)) {
          const marker = new this.AMap.Marker({
            icon: new this.AMap.Icon({
              image: this.baseUrl + device.imgUrl,
              imageSize: new this.AMap.Size(32, 32),
            }),
            position: [device.longitude, device.latitude],
            title: device.deviceName,
            anchor: 'bottom-center',
            extData: {
              ...device,
            },
          });
          marker.on('click', (e) => {
            this.createInfoWindow2(e);
          });
          devicePointList.push(marker);
        }
      });
      this.map.add(new this.AMap.OverlayGroup(devicePointList));
      this.loading = false;
    },
    upLayersIds(ids,options) {
      console.info('upLayersIds**********', ids)
      this.createAreaPolygon(false, ids,options)
    },
    /** 获取地块中心点 */
    getAreaCenter(location) {
      var total = location.length;
      var X = 0;
      var Y = 0;
      var Z = 0;
      location.forEach((lnglat) => {
        var lng = (lnglat[0] * Math.PI) / 180;
        var lat = (lnglat[1] * Math.PI) / 180;
        var x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      var Lng = Math.atan2(Y, X);
      var Hyp = Math.sqrt(X * X + Y * Y);
      var Lat = Math.atan2(Z, Hyp);
      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
    },
    /** 信息窗体 */
    createInfoWindow(e) {
      var info = document.createElement('div');
      info.className = 'InfoBox';
      var title = document.createElement('div');
      title.className = 'title';
      title.innerHTML = `${e.target._opts.extData.landName}`;
      var type = document.createElement('div');
      var typeName = '';
      this.landType.forEach((item) => {
        if (item.dictValue == e.target._opts.extData.landType) {
          typeName = item.dictLabel;
        }
      });
      type.className = 'type';
      type.innerHTML = `<div class="item">类型：<div class="tag">${typeName}</div></div>
                            <div class="item">面积：${e.target._opts.extData.landArea}亩</div>`;
      info.appendChild(title);
      info.appendChild(type);
      const infoWindow = new this.AMap.InfoWindow({
        anchor: 'bottom-center',
        content: info, // 使用默认信息窗体框样式，显示信息内容
      });
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
    },
    createInfoWindow2(e) {
      var info = document.createElement('div');
      info.className = 'InfoBox';
      var title = document.createElement('div');
      title.className = 'title';
      title.innerHTML = `${e.target._opts.extData.deviceName}`;
      var num = document.createElement('div');
      num.className = 'num';
      num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`;
      var tips = document.createElement('div');
      tips.className = 'tips';
      var statusName = '';
      this.deviceType.forEach((item) => {
        if (item.dictValue == e.target._opts.extData.status) {
          statusName = item.dictLabel;
        }
      });
      tips.innerHTML = `${statusName}`;
      info.appendChild(title);
      info.appendChild(num);
      info.appendChild(tips);
      const infoWindow = new this.AMap.InfoWindow({
        anchor: 'bottom-center',
        content: info, // 使用默认信息窗体框样式，显示信息内容
      });
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
    },
  },
};
export default mapMixinLand;