<template>
  <div> 
    <CimHeader :title="title" @change-menu-nav="navlichange" @send-map-serve="mapServeChange"></CimHeader>
  
    <Map @handle-tool="handlerTool" @sideschartshide="sideschartshide" @sideschartsshow="sideschartsshow" :mapserve="roleinfo.mapservelist" :currentShpfile="currentShpfile" :houseListVisible="houseListVisible" :peoInfoIndex="peoInfoIndex" :currentIserverLayer="currentIserverLayer" @handlechartdata=handlechartdata @rightchartsshow="rightchartsshow" @rightchartshide="rightchartshide" @searchService="searchService" :drawPolygonRandom="drawPolygonRandom" :deletePolygonRandom="deletePolygonRandom" @getBuildBaseInfo="getBuildBaseInfo" @getHistoryCaseInfo="getHistoryCaseInfo" :menuid="roleinfo.menuid" :layerVisible="roleinfo.layerShow"  v-if="roleinfo.showMapTable" :location="roleinfo.btnRightVisible" :leftShow="roleinfo.btnVisible" :newPosition="newPosition" :showSearchPoint="showSearchPoint" :currentImageLayerObj="currentImageLayerObj" />
    
    <Navs @change-menu-id="getMenuId" @showHistoryLayer="showHistoryLayer" @showImportShpfile="showImportShpfile" @handle-layers="hanlderLayers" :toolVisible="roleinfo.toolShow" :location="roleinfo.btnRightVisible" :toolnav="roleinfo.toolNavData" />
    
    <!-- 搜索栏 -->
    <MapSearch :style="{'right':roleinfo.btnRightVisible?'450px':'50px'}" class="searchBox" @searchHouseHolder="searchHouseHolderList" @addressInfo="toPosition" @delPointEntity="delPointEntity"  ></MapSearch> 
  
    <!-- 房屋搜索结果栏 -->
    <HouseHolderList v-drag v-if="showSearchList" :searchKeyword="searchKeyword"  @close="closeSearchList" @getPeoAreaData="getPeoAreaData"  class="householderlist"></HouseHolderList>
  
    <!-- 房屋详细信息栏 -->
    <HouseDetail v-drag  v-if="showHouseDetail" :currentHouse="currentHouse" @close="closeDetail" class="housedetail">></HouseDetail>
    
    <!-- 房找人信息弹窗 -->
    <BuildBaseInfo v-drag v-if="showBuildBaseInfo" :BuildBaseInfoId="BuildBaseInfoId" @close="closeBuildBaseInfo" @getBuildInfo="getBuildInfo" @getHouseDetail="getHouseDetail" class="buildbaseinfo" ></BuildBaseInfo>
  
    <!-- 房屋内信息 -->
    <BuildInfo :currentBuildInfo="currentBuildInfo" @getHouseDetail="getHouseDetail" v-drag v-if="showBuildInfo" @close="closeBuildInfo" class="buildInfo"></BuildInfo>
  
    <!-- 历史案件记录 -->
    <HistoryCaseInfo v-drag  v-if="showHistoryCaseInfo" :currentHistoryCaseId="currentHistoryCaseId" @close="closeHistoryInfo" class="historycaseinfo"></HistoryCaseInfo>
  
    <div v-if="roleinfo.visibleToggel!=100" class="formbtn" :class="roleinfo.btnVisible?'':'btnactive'" @click="roleinfo.btnVisible = !roleinfo.btnVisible">
      {{roleinfo.btnVisible?'收起':'展开'}}
    </div>
    <div v-if="roleinfo.visibleToggel!=100" class="formrightbtn" :class="roleinfo.btnRightVisible?'':'btnactive'" @click="roleinfo.btnRightVisible = !roleinfo.btnRightVisible">
      {{roleinfo.btnRightVisible?'收起':'展开'}}
    </div>
    
    <sideCharts v-if="roleinfo.visibleToggel=='shangyezhen'" :area="roleinfo.areaName" :visible="roleinfo.btnVisible" :rightShow="roleinfo.btnRightVisible" :rightVisible="roleinfo.rightChartsVisible"></sideCharts>
    <newtaipingfarmdiaecharts v-if="roleinfo.visibleToggel=='taipingzhen'" :visible="roleinfo.btnVisible"></newtaipingfarmdiaecharts>
    
  </div>
  </template>
  <script>
  import {getMethodCommon, postMethodCommon} from '../../api/common';
  import {defineComponent, reactive, onMounted, toRefs,nextTick} from "vue";
  import {useRouter} from 'vue-router'
  import {MAP_TOOL_CONFIG} from '/public/config/tool'
  import Map from '../../components/map/index.vue';
  import Navs from "../../components/cim/navs/Navs.vue";
   
 
  import sideCharts from "./widget/sidecharts.vue";
  import newtaipingfarmdiaecharts from "./widget/newtaipingfarmdiaecharts.vue";
  
   
  import CimHeader from "../../components/layer/header/citymanageHeader.vue";
  import MapSearch from "../../components/map/widget/mapsearch.vue"
  import HouseHolderList from '../../components/map/widget/householderlist.vue'
  import HouseDetail from '../../components/map/widget/housedetail.vue'
  import BuildBaseInfo from '../../components/map/widget/buildbaseinfo.vue'
  import BuildInfo from '../../components/map/widget/buildinfo.vue'
  import HistoryCaseInfo from '../../components/map/widget/historycaseinfo.vue'
 
  export default defineComponent({
    name: 'Cim',
    components: {
      Map,
      Navs,
      CimHeader,
      MapSearch,
      HouseHolderList,
      HouseDetail,
      BuildBaseInfo,
      BuildInfo,
      HistoryCaseInfo,
      sideCharts,
      newtaipingfarmdiaecharts
    },
    data(){
      return {
        newPosition:null,
        showSearchList:false,
        houseListVisible: false,
        showSearchPoint:false,
        showHouseDetail:false,
        showBuildBaseInfo:false,
        showBuildInfo:false,
        currentHouse:null,
        searchKeyword:null,
        BuildBaseInfoId:null,
        currentBuildInfo:null,
        showHistoryCaseInfo:false,
        currentHistoryCaseId:null,
        currentImageLayerObj:null,
        drawPolygonRandom:null,
        deletePolygonRandom:null,
        currentShpfile:null,
        currentIserverLayer:null,
        peoInfoIndex: null
      }
    },
    methods:{
      rightchartshide(){
        this.roleinfo.rightChartsVisible = false
      },
      rightchartsshow(){
        this.roleinfo.rightChartsVisible = true
      },
      sideschartshide(){
        this.roleinfo.rightChartsVisible = false
        this.roleinfo.btnVisible = false
      },
      sideschartsshow(){
        this.roleinfo.rightChartsVisible = true
        this.roleinfo.btnRightVisible = true
        this.roleinfo.btnVisible = true
      },
      handlechartdata(e){
        this.roleinfo.areaName = e
      },

      addShpToMap(val){
        this.currentShpfile = val;
        console.log("valvalval",this.currentShpfile);
      },
      closeAddShpFile(){
        
      },
      addIserverLayerToMap(val){
        this.currentIserverLayer = val;
      },
      drawPolygon(){
        this.drawPolygonRandom = Math.random();
      },
      deletePolygon(){
        this.deletePolygonRandom = Math.random();
      },
      changeSpaceTimeLayer(val){
        this.currentImageLayerObj = val;
      },
      getBuildBaseInfo(val){
        if(val.match("9-")){
          this.showBuildBaseInfo = false;
          this.BuildBaseInfoId = null;
          this.$message({
              type:"warning",
              message:"当前建筑物没有不动产信息"
            })
        }else{
          this.BuildBaseInfoId = val;
          this.showBuildBaseInfo = true;
        }
      },
      getHistoryCaseInfo(val){
        this.currentHistoryCaseId = val;
        this.showHistoryCaseInfo = true;
      },
      getBuildInfo(val){
        this.currentBuildInfo = val;
        this.showBuildInfo = true;
      },
      closeDetail(){
        this.showHouseDetail = false;
      },
      closeBuildBaseInfo(){
        this.showBuildBaseInfo = false;
      },
      closeBuildInfo(){
        this.showBuildInfo = false;
      },
      closeHistoryInfo(){
        this.showHistoryCaseInfo=false;
      },
      closeSearchList(){
        this.showSearchPoint = false;
        this.showSearchList = false;
        this.houseListVisible = false
      },
      toPosition(value){
        if(value.type == 1){
          this.newPosition = value.val;
           
        }else if(value.type == 2){
            this.searchKeyword = value.val;
            this.showSearchPoint = true;
            this.showSearchList = true;
          // if(value.val == null || value.val == ""){
          //   return  null;
          // }else{
          //   this.searchKeyword = value.val;
          //   this.showSearchPoint = true;
          //   this.showSearchList = true;
          // }
        }
      },
      delPointEntity(){
        this.showSearchPoint = false;
        this.showSearchList = false;
      },
      getHouseDetail(info){
        this.currentHouse = info;
        this.showHouseDetail = true;
      },
      getPeoAreaData(e){
        this.houseListVisible = true
        this.peoInfoIndex = e
      },
    },
    setup() {
      let data = reactive({
        roleinfo: {
          menuid: '',
          visibleToggel: 100,
          toolType: [],
          toolNavData: [],
          applicationid: '',
          mapservelist: '',
          btnVisible: true,
          btnRightVisible: true,
          rightChartsVisible: true,
          showMapTable: true,
          toolShow: true,
          layerShow: true,
          wktData:null,
          showHistoryLayer:false,
          showImportShpfile:false,
          currentShpfile:null,
          areaName:''
        },
        title: '' // 大标题
      })
      const route = useRouter()
  
      // document.oncontextmenu = function() {
      //     //alert('右键被禁用');
      //     return false;
      // }
      // document.onkeydown = function() {
      //     var e = window.event || arguments[0];
      //     if (e.keyCode == 123) {
      //         //alert("F12被禁用");
      //         return false;
      //     }else if ((e.ctrlKey) && (e.keyCode == 83)) {
      //         //alert("ctrl+s被禁用");
      //         return false;
      //     }else if ((e.ctrlKey) && (e.keyCode == 85)) {
      //         //alert("ctrl+u被禁用");
      //         return false;
      //     }else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) {
      //       //alert('禁止Ctrl+Shift+I');
      //       return false;
      //     }
      // }
  
      onMounted(() => {
        data.roleinfo.applicationid = route.currentRoute.value.query.id
        data.title = route.currentRoute.value.query.title
        data.roleinfo.visibleToggel = route.currentRoute.value.query.type || 100
       
        methods.getAllToolType()
      })
      let methods = {
        searchService(val){
          data.roleinfo.wktData = val;
        },
        handlerTool(){
          data.roleinfo.toolShow = !data.roleinfo.toolShow
        },
        hanlderLayers(){
          data.roleinfo.layerShow = !data.roleinfo.layerShow
        },
        showHistoryLayer(val){
          data.roleinfo.showHistoryLayer = val;
        },
        showImportShpfile(val){
          data.roleinfo.showImportShpfile = val;
        },
        navlichange(item){
          data.roleinfo.showMapTable = false
          nextTick(()=>{
              //写入操作
              data.roleinfo.showMapTable = true
            })
          data.roleinfo.visibleToggel = item.page_code
         
          data.roleinfo.applicationid = item.id
          methods.getAllToolType()
        },
        mapServeChange(item){
          console.log('aaa',item)
          data.roleinfo.mapservelist = item
        },
        getMenuId(obj) {
          data.roleinfo.menuid = obj
        },
        getAllToolType() {
          data.roleinfo.toolType = []
          getMethodCommon("/Categorys/LoadList", {typeId: 'CIM_TOOL_TYPE'}).then(res => {
            res.result.forEach(item => {
              data.roleinfo.toolType.push({
                id: item.id,
                label: item.name,
                children: []
              })
            })
            methods.getAllToolData()
          })
        },
        getAllToolData() {
          let parpm = {
            QueryType: 'tool',
            AppId: data.roleinfo.applicationid
          }
          getMethodCommon("/CimApplication/QueryCimAppToolsOrSvcViaAppId", parpm).then(res => {
            let dataObj = res.data
            data.roleinfo.toolType.forEach(item => {
              dataObj.forEach(val => {
                if (item.id == val.parentid) {
                  val.label = val.name
                  item.children.push(val)
                }
              })
            })
            data.roleinfo.toolNavData = data.roleinfo.toolType
            methods.handleToolData()
          })
        },
        handleToolData() {
          MAP_TOOL_CONFIG.forEach(item => {
            item.children.forEach(item1 => {
              data.roleinfo.toolType.forEach(val => {
                val.children.forEach(val1 => {
                  if (val1.tool_code == item1.id) {
                    val1.id = val1.tool_code,
                        val1.image = item1.image
                    val1.pid = val.id,
                        val.image = item.image
                  }
                })
              })
            })
          })
          let arr = []
          data.roleinfo.toolType.forEach(item => {
            if (item.children.length > 0) {
              arr.push(item)
            }
          })
          data.roleinfo.toolNavData = arr
        },
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped>
  .formbtn{
    width: 25px;
    height: 90px;
    position: fixed;
    left: 398px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    background: linear-gradient(180deg, #0361EF 0%, #073E78 100%);
    color: #fff;
    line-height: 25px;
    text-align: center;
    writing-mode:tb-rl;
    font-size: 12px;
    border-radius: 0 5px 5px 0;
  }
  .formbtn.btnactive{
    left: 0;
  }
  .formrightbtn{
    width: 25px;
    height: 90px;
    position: fixed;
    right: 400px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    background: linear-gradient(180deg, #0361EF 0%, #073E78 100%);
    color: #fff;
    line-height: 25px;
    text-align: center;
    writing-mode:tb-rl;
    font-size: 12px;
    border-radius: 5px 0 0 5px;
  }
  .formrightbtn.btnactive{
    right: 0;
  }
 
  .searchBox{
    position:absolute;top:120px;
  }
  
  .householderlist{
    position: absolute;
    bottom:30px;
    left:50%;
    z-index:10;
    transform: translateX(-50%);
  }
  .housedetail{
    width:1000px;
    height:400px;
    position: absolute;
    top:250px;
    left:400px;
    z-index:99;
    height:244px;
    /* background-image: linear-gradient( rgba(10, 23, 136, 0.2), rgba(10, 23, 136, 0.5)); */
     background:rgba(10, 23, 136, 1)
  }
  
  .historycaseinfo{
    width:1000px;
    height:800px!important;
    position: absolute;
    top:160px;
    left:400px;
    z-index:99;
    height:514px!important;
    background:rgba(10, 23, 136, 0.5)
    /* background-image: linear-gradient( rgba(10, 23, 136, 0.2), rgba(10, 23, 136, 0.5)); */
  }
  
  
  
  .buildInfo{
    position: absolute;
    top:200px;
    left:300px;
    z-index:10;
  }
  
  .buildbaseinfo{
    position: absolute;
    width:620px!important;
    height:350px!important;
    top:200px;
    left:340px;
    z-index:10;
    background:rgba(10, 23, 136, 0.5)
    
  }
  </style>