<template>
  <div class="widget-districtPageModules" v-if="showDistrictPage">
    <!--属性查看-->
    <!-- <PropertiesView ref="PropertiesView" /> -->
    <!--搜索栏-->
    <SearchBox ref="SearchBox" v-if="isShowSearchBox" />
    <!--工具栏-->
    <!-- <ToolBox ref="ToolBox" /> -->
    <!-- 扇形工具栏 -->
    <SectorToolbar ref="SectorToolbar" />
    <!--自定义工具栏-->
    <!-- <CustomToolBox ref="CustomToolBox" /> -->
    <!--进度查看模块-->
    <ProjectPipeSpeedInfoCheck v-if="isShowPipeSpeedInfoCheck" />
    <!--管道开挖综合分析模块-->
    <ExcavationAnalysis v-if="isShowExcavationAnalysis" />
    <!--工程全景模块-->
    <ProjectPanoramic v-if="districtModuleName === 'ProjectPanoramic'" />
    <!--统计分析模块-->
    <StatisticalAnalysis v-if="districtModuleName === 'StatisticalAnalysis'" />
    <!--智慧预警模块-->
    <WisdomWarning v-if="districtModuleName === 'WisdomWarning'" />
    <!--决策支持模块-->
    <DecisionSupport v-if="districtModuleName === 'DecisionSupport'" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import PropertiesView from '@/views/groupPage/districtPageModules/commonModules/PropertiesView.vue'
import SearchBox from '@/views/groupPage/districtPageModules/commonModules/SearchBox.vue'
// import ToolBox from '@/views/groupPage/districtPageModules/commonModules/ToolBox.vue'
// import CustomToolBox from '@/views/groupPage/districtPageModules/commonModules/CustomToolBox.vue'
import SectorToolbar from '@/views/groupPage/districtPageModules/commonModules/SectorToolbar.vue'
import ProjectPipeSpeedInfoCheck from '@/views/groupPage/districtPageModules/customTools/projectPipeSpeedInfoCheck.vue'
import ExcavationAnalysis from '@/views/groupPage/districtPageModules/customTools/excavationAnalysis/index.vue'
//数据面板模块
import ProjectPanoramic from '@/views/groupPage/districtPageModules/projectPanoramic/index.vue'
import StatisticalAnalysis from '@/views/groupPage/districtPageModules/statisticalAnalysis/index.vue'
import WisdomWarning from '@/views/groupPage/districtPageModules/wisdomWarning/index.vue'
import DecisionSupport from '@/views/groupPage/districtPageModules/decisionSupport/index.vue'
//集团分公司页面模块
@Component({
  name: 'districtPageModules',
  components: {
    PropertiesView,
    SearchBox,
    // ToolBox,
    SectorToolbar,
    // CustomToolBox,
    ProjectPipeSpeedInfoCheck,
    ExcavationAnalysis,
    ProjectPanoramic,
    StatisticalAnalysis,
    WisdomWarning,
    DecisionSupport
  }
})
export default class districtPageModules extends Vue {
  @Prop({ type: Boolean, default: false }) show!: boolean
  get showDistrictPage() {
    return this.show
  }
  get districtModuleName() {
    return this.$store.state.bigScreen.currentActive
  }
  get isShowPipeSpeedInfoCheck() {
    return this.$store.state.bigScreen.isShowPipeSpeedInfoCheck
  }
  get isShowExcavationAnalysis() {
    return this.$store.state.bigScreen.isShowExcavationAnalysis
  }
  get isShowSearchBox() {
    return this.$store.state.bigScreen.isShowSearchBox
  }
  //模块下子模块当前显示
  get currentStatisticalActive() {
    return this.$store.state.bigScreen.currentStatisticalActive
  }
  @Watch('currentStatisticalActive')
  onChangeThisSta(val) {
    if (val == 'security') this.setBottom('1.677083rem')
    else this.setBottom('0.052083rem')
  }
  //关闭数据面板时,工具栏位置改变
  @Watch('districtModuleName', { immediate: true })
  onChangeVisibleMethod(val) {
    // if (
    //   !this.$refs['PropertiesView'] ||
    //   !this.$refs['SearchBox'] ||
    //   !this.$refs['ToolBox']||
    //   !this.$refs['CustomToolBox']
    // ) {
    //   return
    // } else {
    //   this.setModule(val)
    // }
    if (this.$refs['SearchBox'] || this.$refs['SectorToolbar']) {
      this.setModule(val)
    }
  }
  setModule(val) {
    if (!val) {
      this.setLeftAndRight('.10417rem') //20px
      this.setBottom('0.052083rem') //10px
    } else {
      this.setLeftAndRight('2.34375rem') //450px
      // val !== 'StatisticalAnalysis' ? this.setBottom('0.052083rem') : this.setBottom('1.552083rem') //298px
      val !== 'StatisticalAnalysis' ? this.setBottom('0.052083rem') : '' //298px
    }
  }
  setLeftAndRight(leftRight) {
    // ;(this.$refs['PropertiesView'] as any).$refs['widget-PropertiesView'].style.setProperty('--right', leftRight)
    if (this.$refs['SectorToolbar'])
      (this.$refs['SectorToolbar'] as any).$refs['widget-SectorToolbar'].style.setProperty('--right', leftRight)
    if (this.$refs['SearchBox'])
      (this.$refs['SearchBox'] as any).$refs['widget-SearchBox'].style.setProperty('--left', leftRight)
    // ;(this.$refs['CustomToolBox'] as any).$refs['widget-CustomToolBox'].style.setProperty('--left', leftRight)
  }
  setBottom(bottom) {
    ;(this.$refs['SectorToolbar'] as any).$refs['widget-SectorToolbar'].style.setProperty('--bottom', bottom)
    // ;(this.$refs['CustomToolBox'] as any).$refs['widget-CustomToolBox'].style.setProperty('--bottom', bottom)
  }
}
</script>

<style lang='scss' scoped>
.widget-districtPageModules {
  width: 100%;
  height: 100%;
}
</style>