
import GisUtils from '@/utils/gis.js';
import {
  fromLonLat
} from 'ol/proj'
import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js";
import { getInfo } from "@/api/login";
import { getResourceListByDeptId, listResource, attachmentQuery } from "@/api/asset/resource.js";
import Legend from '@/components/legend/index.vue';
import { attachmentList } from "@/api/common/uploadAttachment.js";
import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
import { getConfigKey } from "@/api/system/config";
import { treeselectByDeptId } from "@/api/system/dept";
import { getThreeList } from "@/api/index";

import Popover from '../popover/index.vue';
let gis = null;
export default {
  components: {
    Legend,
    Popover
  },
  data () {
    return {
      yellowIcon: require('./icon/yellow.png'),
      //三务公开请求参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        openType: '1',
        detailedCategoriesType: null,
        villageType: null,
        openItems: null,
        meetingOpenType: null,
        deptId: null,
        isWechat: null,
        status: null,
        translate_dict: 1,
      },
      addrText: [100,],
      deptTreeProps: {
        checkStrictly: true,
      },
      addrOptions: [],
      resourceDetail: {},
      //资产信息详情弹窗
      showResourceDetail: false,
      mapGeoServerUrl: "",            // geoserver地址
      mapBorder: "",                  // 地图边界
      deptLayer: "",                  // 坐标点图层
      countyBorderLayerName: "",      // 区县边界图层名称
      townBorderLayerName: "",        // 乡镇边界图层名称
      villageBorderLayerName: "",     // 村边界图层名称
      groupBorderLayerName: "",       // 组边界图层名称
      LegendData: [
        {
          iconStyle: {
            background: 'rgba(38,252,128,0.45)',
            borderColor: '#26FC80',
            border: '2px solid #26FC80'
          },
          name: '自用'
        },
        {
          iconStyle: {
            background: 'rgba(232,246,0,0.45)',
            borderColor: '#E8F600',
            border: '2px solid #E8F600'
          },
          name: '闲置'
        },
        {
          iconStyle: {
            background: 'rgba(16,252,252,0.45)',
            borderColor: '#10FCFC',
            border: '2px solid #10FCFC'
          },
          name: '出租'
        },
        {
          iconStyle: {
            background: 'rgba(198,0,255,0.45)',
            borderColor: '#C600FF',
            border: '2px solid #C600FF'
          },
          name: '其他'
        }
      ],
      threeAssetTypeOptions: [],
      threeJtzyzcTypeOptions: [],
      threeNysssbTypeOptions: [],
      threeNhTypeOptions: [],
      natureOwnershipTypeOptions: [],
      sysYesNoOptions: [],
      fileList: [],
      fileUrl:'',
      showImg:false,
    };
  },
  watch: {
    'queryParams.deptId': {
      handler: function () {
        this.commitDept(this.queryParams.deptId);
      },
      immediate: true, // 立即执行

    },
    deptLength: {
      handler: function () {
        //console.log(this.deptLength);
        this.commitDeptLength(this.deptLength);
      },
      immediate: true, // 立即执行
    }
  },
  computed: {
  },
  created () {
    this.getDicts("three_asset_type").then((response) => {
      this.threeAssetTypeOptions = response.data;
    });
    this.getDicts("three_jtzyzc_type").then((response) => {
      this.threeJtzyzcTypeOptions = response.data;
    });
    this.getDicts("three_nysssb_type").then((response) => {
      this.threeNysssbTypeOptions = response.data;
    });
    this.getDicts("three_nh_type").then((response) => {
      this.threeNhTypeOptions = response.data;
    });
    this.getDicts("nature_ownership").then((response) => {
      this.natureOwnershipTypeOptions = response.data;
    });
    this.getDicts("sys_yes_no").then((response) => {
      this.sysYesNoOptions = response.data;
    });
    this.getGeoServerUrl();
  },
  mounted () {
    getInfo().then(res => {
      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
        this.addrOptions = resp.data;
        this.headerTitle = res.user.deptName + '阳光村务一张图';
        //loginDeptId
        listDeptExcludeChild(res.user.deptId).then((resp) => {
          //loginDeptId
          let deptOptions = [res.user.deptId];
          resp.data.map(resm => {
            if (res.user.parentDeptName == resm.deptName) {
              deptOptions.unshift(resm.deptId)
              deptOptions.unshift(resm.parentId)
            }
          })
          this.addrText = deptOptions;
        });
        this.queryParams.deptId = res.user.deptId;//loginDeptId
        //列表请求
        // this.getAllList(res.user.deptId);
        // 加载地图
        this.initMap(res.user.deptId);

        // 获取村边界的图层名称
        this.getVillageBorderLayerName();
      });
    })
    // treeselect().then((resp) => {
    //   this.addrOptions = resp.data
    //   getInfo().then(res => {
    //     this.initMap(res.user.loginDeptId);
    //     // 加载地图
    //   })
    // });


  },
  methods: {
    commitDept (deptId) {
      this.$store.commit('SET_DEPTID', deptId);
    },
    commitDeptLength (length) {
      this.$store.commit('SET_DEPTIDLENGTH', length);
    },
    commitYear (year) {
      this.$store.commit('SET_YEAR', year);
    },
    // 获取村边界的图层名称
    getVillageBorderLayerName () {
      getConfigKey("geoserver.layer.villageBorder").then(response => {
        this.villageBorderLayerName = response.msg;
      });
    },
    // 添加区县边界
    addCountyBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
    },
    // 添加乡镇边界
    addTownBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
    },
    // // 添加村边界
    // addVillageBorder (deptIds) {
    //   gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
    // },
    // // 获取资源列表
    // getResourceList (deptId) {
    //   getResourceListByDeptId(deptId).then(response => {
    //     if (response.data && response.data.length > 0) {
    //       this.addResourceLayer(response.data);
    //     }
    //   });
    // },
    // 获取geoserver的地址
    getGeoServerUrl () {
      // 获取geoserver的地址
      getConfigKey("system.geoServer.url").then(response => {
        this.mapGeoServerUrl = response.msg;
      });
      // 获取区县边界图层名称
      getConfigKey("geoserver.layer.countyBorder").then(response => {
        this.countyBorderLayerName = response.msg;
      });
      // 获取乡镇边界的图层名称
      getConfigKey("geoserver.layer.townBorder").then(response => {
        this.townBorderLayerName = response.msg;
      });
      // 获取村边界的图层名称
      getConfigKey("geoserver.layer.villageBorder").then(response => {
        this.villageBorderLayerName = response.msg;
      });
      // 获取组边界的图层名称
      getConfigKey("geoserver.layer.groupBorder").then(response => {
        this.groupBorderLayerName = response.msg;
      });
    },
    selectAddress (value) {
      const deptId = value[value.length - 1];
      this.queryParams.deptId = deptId;
      this.getAllList(deptId);

      gis.getMapContainer().removeLayer(this.villageBorder);
      this.villageBorder = '';
      // 添加村边界
      this.addVillageBorder(deptId);
      gis.getMapContainer().removeLayer(this.permanentLayer);
      this.permanentLayer = '';
      // 获取资产列表
      this.getPermanentList(deptId);
      gis.getMapContainer().removeLayer(this.resourceLayer);
      this.resourceLayer = '';
      // 获取资源列表
      this.getResourceList(deptId);
      let node = this.$refs["cascader"].panel.getNodeByValue(value);
      const dept = node.data;
      const deptData = {
        deptId: dept.id,
        deptName: dept.label,
        lat: dept.lat,
        lng: dept.lng,
        deptLevel: dept.deptLevel,
        orgCode: dept.orgCode
      };
      let deptList = [];
      deptList.push(deptData);
      gis.getMapContainer().removeLayer(this.deptLayer);
      this.deptLayer = '';
      // 添加坐标点图层
      this.addDeptLayer(deptList, 'yellow.png');
      gis.getMapContainer().getView().animate({
        // 只设置需要的属性即可
        center: fromLonLat([dept.lng, dept.lat]), // 中心点
        duration: 500, // 缩放持续时间，默认不需要设置
      });
    },
    // 添加村边界
    addVillageBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
    },
    // 加载地图
    initMap (deptId) {
      gis = new GisUtils('map2')
      // // 获取资源列表
      this.getResourceList(deptId);
      gis.addTianDiTuLayer()
      gis.addAnnotationLayer()
      let dept2 = this.addrOptions[0];
      //console.log(this.addrOptions, 'this.addrOptions');
      console.log(dept2.deptLevel)
      if (dept2.deptLevel === '5') {
        // 登录身份为市级领导
        this.userRole = 'cityLeader';
        this.cityId = dept.id;
        this.currentDeptLevel = '5';
        // 添加区县边界
        this.addCountyBorder(dept.children.map(item => item.id));
      } else if (dept2.deptLevel === '4') {
        // 登录身份为县级领导
        this.userRole = 'countyLeader';
        this.countyId = dept2.id;
        this.currentDeptLevel = '4';
        // 添加乡镇边界
        this.addTownBorder(dept2.children.map(item => item.id));
        gis.getView().setZoom(13);
      } else if (dept2.deptLevel === '3') {
        // 登录身份为镇级领导
        this.userRole = 'townLeader';
        this.townId = dept2.id;
        this.currentDeptLevel = '3';
        // 添加村边界
        this.addVillageBorder(dept2.children.map(item => item.id));
        gis.getView().setZoom(13);
      }
      // 添加坐标点图层
      if (dept2.children) {
        this.addDeptLayer(dept2.children);
      }

      // gis.getMapContainer().getView().setCenter(fromLonLat([dept2.lng, dept2.lat]));

      gis.getMapContainer().on("click", (evt) => {
        let feature = gis.getMapContainer().forEachFeatureAtPixel(
          evt.pixel,
          (feature) => feature
        );
        if (feature) {
          // 镇级：加载村级坐标点
          if (feature.get('deptLevel') === '3') {
            gis.getMapContainer().getView().animate({
              center: fromLonLat([feature.get('lng'), feature.get('lat')]), // 中心点
              zoom: 12, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
          } else {


            feature.values_.detail.threeDetailType =
                feature.values_.detail.threeAssetType == '1' ?
                this.selectDictLabel(this.threeJtzyzcTypeOptions, feature.values_.detail.threeDetailType):
                feature.values_.detail.threeAssetType == '2' ?
                this.selectDictLabel(this.threeNysssbTypeOptions, feature.values_.detail.threeDetailType):
                feature.values_.detail.threeAssetType == '3' ?
                this.selectDictLabel(this.threeNhTypeOptions, feature.values_.detail.threeDetailType):''
            ;
            feature.values_.detail.threeAssetType = this.selectDictLabel(this.threeAssetTypeOptions, feature.values_.detail.threeAssetType);
            feature.values_.detail.natureOwnership = this.selectDictLabel(this.natureOwnershipTypeOptions, feature.values_.detail.natureOwnership);
            feature.values_.detail.qssfczzy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.qssfczzy);
            feature.values_.detail.sfwtdg = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfwtdg);
            feature.values_.detail.sfnzcsy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfnzcsy);

            this.listDialogHidden('detail');
            this.openResourceDialog(feature.values_.detail);
          }
        }
      });

      // 缩小地图，重新加载页面
      gis.getMapContainer().on("moveend", (evt) => {
        const zoom = gis.getMapContainer().getView().getZoom();
        if (this.villagePointLayer && zoom < 10.5) {
          gis.getMapContainer().removeLayer(this.villagePointLayer);
          this.villagePointLayer = "";
        }
      });
    },
    listDialogHidden (type) {
      if (type == 'detail') {
        //合同信息详情弹窗
        this.showInfoDetail = false;
        //资源信息详情弹窗
        this.showResourceDetail = false;
        //资产信息详情弹窗
        this.showPermanentDetail = false;
        //农业补贴详情弹窗
        this.showSubsidyFundsDetail = false;
        //重大事项详情弹窗
        this.showMajorEventDetail = false;
        //零工公开详情弹窗
        this.showTempWorkerDetail = false;
        //三务公开详情弹窗
        this.showAffairsDetail = false;
      } else {
        //三务公开列表弹窗
        this.showAffairs = false;
        //零工公开列表弹窗
        this.showTempWorker = false;
        //重大事项列表弹窗
        this.showMajorEvent = false;
        //农业补贴列表弹窗
        this.showSubsidyFunds = false;
        //资产信息列表弹窗
        this.showPermanent = false;
        //资源信息列表弹窗
        this.showResource = false;
        //合同信息列表弹窗
        this.showInfo = false;
        //合同信息详情弹窗
        this.showInfoDetail = false;
        //资源信息详情弹窗
        this.showResourceDetail = false;
        //资产信息详情弹窗
        this.showPermanentDetail = false;
        //农业补贴详情弹窗
        this.showSubsidyFundsDetail = false;
        //重大事项详情弹窗
        this.showMajorEventDetail = false;
        //零工公开详情弹窗
        this.showTempWorkerDetail = false;
        //三务公开详情弹窗
        this.showAffairsDetail = false;
      }

    },
    openResourceDialog (data) {
      data.fileList = [];
      console.log(data)
      let parmasData = {
        tableId: data.id,
        tableName: 't_asset_three',
        bizPath: 'asset',
      };
      attachmentQuery(parmasData).then((res) => {
        if (res.code == 200) {
          let UattachmentList = res.rows;
          for (let i = 0; i < UattachmentList.length; i++) {
            let fileName = UattachmentList[i].fileName;
            let subIndex = fileName.lastIndexOf(".");
            let ext = fileName.substring(subIndex + 1, fileName.length);
            let urls = "";
            let type = "";
            if (ext == "xlsx" || ext == "xls") {
              urls = require("./icon_excel.jpg");
              type = 'excel';
            } else if (ext == "doc" || ext == "docx") {
              urls = require("./icon_word.jpg");
              type = 'word';
            } else if (ext == "pdf") {
              urls = require("./icon_pdf.jpg");
              type = 'pdf';
            } else if (ext == "zip") {
              urls = require("./icon_zip.jpg");
              type = 'zip';
            } else {
              urls = '/api' + UattachmentList[i].fileUrl;
              type = 'image';
            }
            data.fileList.push({
              url: urls,
              urlApi: '/api' + UattachmentList[i].fileUrl,
              type: type
            })
          }
          this.showResourceDetail = true;
          this.resourceDetail = data;
        }
      });
    },
    // 创建矢量数据源
    addDeptLayer (nextDeptSet, locationIcon) {
      //console.log('nextDeptSet', nextDeptSet);
      let features = [];
      nextDeptSet.forEach(item => {
        let fs = gis.getFeature(item, this.yellowIcon)
        features.push(fs);
      });
      gis.getVectorLayerByFs(features)
      // gis.mapSetFit(features)
    },
    // 获取资源列表
    getResourceList (deptId) {
      getThreeList({ deptId: deptId }).then(response => {
        if (response.rows && response.rows.length > 0) {
          this.addResourceLayer(response.rows);
        }
      });
      // getResourceListByDeptId(deptId).then(response => {
      //   if (response.data && response.data.length > 0) {
      //     this.addResourceLayer(response.data);
      //   }
      // });
    },
    // 添加资源图层
    addResourceLayer (resourceList) {
      let features = [];
      resourceList.forEach(item => {
        if (item.theGeom != null && item.theGeom !== '') {
          const { threeAssetType } = item
          // console.log(222, threeAssetType, item);
          let color = this.LegendData[threeAssetType - 1 + '']
          let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor)
          features.push(fs);
        }
      });
      gis.getVectorLayerByFs(features)
      gis.mapSetFit(features)
    },
    // 获取资产列表
    getPermanentList (deptId) {
      getThreeList({ deptId: deptId }).then(response => {
        if (response.data && response.data.length > 0) {
          this.addPermanentLayer(response.data);
        }
      });
    },
    getAllList (deptId) {
      this.$emit('getData',deptId);
    },
    closePopover(){
      this.showResourceDetail = false;
    },
    openImage(url){
      this.fileUrl = url;
      this.showImg = true;
    }
  }
};
