<template>
  <div class="homePage">
    <div class="page-cont">
      <div class="lef-secs">
        <!-- 国 -->
        <div>
          <div
            :class="['single-sec', { isActive: !currentProjIndex }]"
            @click="clickCountry"
            v-if="showProjSec"
          >
            总览
          </div>
          <!--          <div
                      :class="['single-sec', { isActive: currentCountryIndex === item.id }]"
                      v-for="item in countryList"
                      :key="item.id"
                      @click="changeCountrySec(item)"
                      v-if="showCountrySec"
                    >
                      {{ item.name }}
                    </div>-->
        </div>
        <div>
          <div
            :class="['single-sec', { isActive: currentProjIndex === item.projectId }]"
            v-for="item in projList"
            :key="item.projectId"
            @click="changeProjSec(item)"
            v-if="showProjSec"
          >
            {{ item.projectName }}
          </div>
        </div>
        <!-- 选项 -->
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="searchIpt"
          style="margin-bottom: 20px"
          v-if="showLefSec"
        />
        <div
          :class="['single-sec', { isActive: currentLefIndex === item.id }]"
          v-for="item in searchLefSec"
          :key="item.id"
          @click="changeLefSec(item)"
          v-if="showLefSec"
        >
          {{ item.title }}
        </div>
      </div>
      <div
        class="rig-maps"
        v-if="showProjSec"
      >
        <country-map
          :send-height="'940px'"
          send-map-color="#e2e2e2"
          :send-geo="geoData"
          :show-line="true"
          @closeMap="handleCloseMap"
        >
        </country-map>
        <!--        <province-map
                  v-if="showProjSec"
                  :map-count="sendMap"
                >
                </province-map>-->
      </div>
      <div
        class="rig-components"
        v-if="showLefSec"
      >
        <man-detect
          v-if="currentLefIndex === 1"
          :send-msg="lefSendMsg"
        ></man-detect>
        <envir-detect
          v-if="currentLefIndex === 2"
          :send-msg="lefSendMsg"
        ></envir-detect>
        <tower-detect
          v-if="currentLefIndex === 3"
          :send-msg="lefSendMsg"
        ></tower-detect>
        <pit-detect
          v-if="currentLefIndex === 4"
          :send-msg="lefSendMsg"
        ></pit-detect>
      </div>
    </div>
  </div>
</template>

<script>
import GlobalBar from '../../components/globalBar.vue'
import CountryMap from '../../components/home/countryMap.vue'
import ProvinceMap from '../../components/home/provinceMap.vue'
import ManDetect from '../../components/substation/manDetect.vue'
import EnvirDetect from '../../components/substation/envirDetect.vue'
import TowerDetect from '../../components/substation/towerDetect.vue'
import PitDetect from '../../components/substation/pitDetect.vue'
import {
  querySubProjInfoApi
} from '@/api/substation/substation'
export default {
  components: {
    GlobalBar,
    CountryMap,
    ProvinceMap,
    ManDetect,
    EnvirDetect,
    TowerDetect,
    PitDetect
  },
  name: 'line',
  data() {
    return {
      currentIndex: 3,
      currentCountryIndex: undefined,
      currentProjIndex: undefined,
      currentLefIndex: undefined,
      currentProvince: undefined,
      sendMap: 1,
      showCountrySec: true,
      showProjSec: true,
      showLefSec: false,
      searchIpt: undefined,
      sendNum: undefined,
      countryList: [
        { id: 2, name: '宁夏' },
        { id: 3, name: '安徽' },
        { id: 4, name: '内蒙古' },
      ],
      projList: [],
      lefSecList: [
        { title: '人员检测类', id: 1 },
        { title: '环境检测类', id: 2 },
        { title: '组塔检测类', id: 3 },
        { title: '基坑检测类', id: 4 },
      ],
      /*projProvinceList: [
        {
          name: '河北省',
          itemStyle: { normal: { areaColor: '#7DDEFF' } }
        },
        {
          name: '河南省',
          itemStyle: { normal: { areaColor: '#7DDEFF' } }
        },
        {
          name: '云南省',
          itemStyle: { normal: { areaColor: '#7DDEFF' } }
        },
      ],*/
      geoData: [],
      lefSendMsg: undefined
    }
  },
  computed: {
    searchProj() {
      if(!this.searchIpt) {
        return this.projList
      }
      return this.projList.filter(item => {
        return item.name.includes(this.searchIpt)
      })
    },
    searchLefSec() {
      if(!this.searchIpt) {
        return this.lefSecList
      }
      return this.lefSecList.filter(item => {
        return item.title.includes(this.searchIpt)
      })
    }
  },
  created() {

  },

  mounted() {
    this.getProjData()
  },
  methods: {
    async getProjData() {
      let res = await querySubProjInfoApi({
        projectTypeCode: 2
      })
      this.projList = res.data.data
      this.renderAllProj()
    },
    // 渲染全部工程
    renderAllProj() {
      this.geoData = []
      this.projList.forEach(proj => {
        if(proj.proPowerList) {
          proj.proPowerList.forEach(tower => {
            this.geoData.push({
              name: tower.gtName,
              projName: tower.gtName,
              projectId: proj.projectId,
              itemStyle: { normal: { areaColor: '#7DDEFF' } },
              value: [
                Number(tower.lon),
                Number(tower.lat)
              ]
            })
          })
        }
      })
    },
    changeCountrySec(val) {
      this.currentCountryIndex = val.id
      this.sendMap = val.id
      this.currentProvince = val.name
      this.showProjSec = true
    },
    changeProjSec(val) {
      this.geoData = []
      this.currentProjIndex = val.projectId
      this.projList.forEach(proj => {
        if(proj.projectId === val.projectId) {
          proj.proPowerList.forEach(tower => {
            this.geoData.push({
              name: tower.gtName,
              projName: tower.gtName,
              projectId: proj.projectId,
              itemStyle: { normal: { areaColor: '#7DDEFF' } },
              value: [
                Number(tower.lon),
                Number(tower.lat)
              ]
            })
          })
        }
      })
      console.log(this.geoData)
    },
    changeLefSec(val) {
      this.currentLefIndex = val.id
    },
    clickCountry() {
      this.renderAllProj()
      this.showProjSec = true
      this.showLefSec = false
      this.currentLefIndex = undefined
      this.currentProjIndex = undefined
      this.currentCountryIndex = undefined
      this.sendMap = 1
    },
    handleCloseMap(val) {
      console.log(val, 'closeMap')
      this.lefSendMsg = val.value
      this.showProjSec = false
      this.currentLefIndex = 1
      this.showLefSec = true
    }
  }
}
</script>

<style lang='less' scoped>
.homePage {

  width: 100%;
  height: 100%;
  background: url(../../assets/img/bgd.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  position: relative;

  .page-cont{

    width: 100%;
    height: 940px;
    display: flex;
    justify-content: space-between;

    .lef-secs{

      width: 20%;
      height: 100%;
      background-color: #F3F7FF;
      box-sizing: border-box;
      padding: 20px;
      border-radius: 5px;
      border: 1px solid #EFF2FC;
      box-shadow: 2px 2px 2px #D9E0F3;
      overflow-y: auto;

      .single-sec{

        width: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 18px;
        background-color: #DEECFF;
        border: 1px solid #D1E1FF;
        margin-bottom: 15px;

      }

      .isActive{

        background-color: #EFF4FE;
        box-shadow: -3px -3px 2px #CBDCF6,
        2px 2px 2px #F8F9FE,
          -2px -2px 2px #CBDCF6,
        2px 2px 2px #F8F9FE;
        box-sizing: border-box;
        border-radius: 5px;

      }

    }

    .rig-maps, .rig-components{

      width: 79%;
      height: 100%;

    }

  }

}
</style>
