<template>
  <div class="warning-box">
    <cpt-card>
      <!-- <div class="card-title">
        <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          动力主轴
        </div>
      </div> -->
      <div class="title">
        <img src="../../../../../assets/img/shuju/title-tip.png" />
        <span>动力主轴</span>
        <div class="search">
          <div class="second-select cascader">
            <el-cascader  class="customer_cascader"
                          ref="myCascader"
                          placeholder="请选择所属组织"
                          :options="agencytree"
                          v-model="agencyId"
                          :show-all-levels="false"
                          @change="handleChangeAgencytree"
                          :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"/>
          </div>
        </div>
        <!-- <div class="second-select ">

          <el-date-picker v-model="dateIdShow"
                          type="date"
                          :clearable="false"
                          @change="handleChangeDate"
                          :picker-options="pickerOptions"
                          prefix-icon="el-icon-caret-bottom"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
          </el-date-picker>

        </div> -->
      </div>
      <div class="card-panel">
        <div class="card-left">
          <!-- <div class="card-item-title">小标题</div> -->
          <div class="card-left-top">
            <screen-org-tree :list="list" @onClickNode="onClickNode"></screen-org-tree>
          </div>
          <div class="card-left-bottom">
            <screen-table :headerStyle="headerStyle"
                          :headerList="headerList"
                          :tableContentStyle="headerStyle"
                          :tableData="tableData"
                          :visibleLoading="visibleLoading"
                          :operate="true"
                          @look="handleLook"></screen-table>
            <div class="pagination">
              <el-pagination :current-page="pageNo"
                             :page-size="pageSize"
                             background
                             layout="prev, pager, next"
                             @size-change="pageSizeChangeHandleNew"
                             @current-change="pageCurrentChangeHandleNew"
                             :total="total">
              </el-pagination>
            </div>
            <house-dialog v-if="showHouse"
                      :houseId="houseId"
                      @close="showHouse = false"></house-dialog>
          </div>
        </div>
        <div class="card-right">
          <div class="card-right-top">
            <screen-top-count :colorIndex="item.index" v-for="(item, key) in countList" :key="key">
                <template v-slot:number>{{item.value}}</template>
                <template v-slot:title>{{item.title}}</template>
            </screen-top-count>
          </div>
          <div class="card-title" style="margin-left: 20px; margin-bottom: 20px; margin-top: 20px;">
            <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
            <div class="title-label">
              网格分布
            </div> 
          </div>
          <div class="card-right-bottom">
            <screen-org-map ref="orgMap"></screen-org-map>
            <div class="legend">
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
                <div class="legend-item-text">党群服务站</div>
              </div>
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/louyuanxiaozu.png" class="legend-item-icon">
                <div class="legend-item-text">楼院党小组</div>
              </div>
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/dangyuanzhongxinhu.png" class="legend-item-icon">
                <div class="legend-item-text">党员中心户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </cpt-card>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick"
import cptCard from "@/views/modules/visual/cpts/card"
import screenMap from "@/views/modules/visual/components/screen-map"
import screenTable from "../../components/screen-table/index"
import screenOrgMap from './components/screen-org-map.vue'
import screenOrgTree from './components/screen-org-tree.vue'
import screenTopCount from './components/screen-top-count.vue'
import houseDialog from './components/house-dialog.vue'
import { requestPost } from "@/js/dai/request"

import dhIcon from '@/assets/img/plugins/danghui.png'
import lyxzIcon from '@/assets/img/plugins/louyuanxiaozu.png'
import dyzxhIcon from '@/assets/img/plugins/dangyuanzhongxinhu.png'

export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenMap,
    screenOrgMap,
    screenOrgTree,
    screenTopCount,
    houseDialog
  },
  data() {
    return {
      headerList: [
        { title: "序号", coulmn: 'index', width: '100px' },
        { title: "党员", coulmn: 'kernelMemberNameConcat' },
        { title: "地址", coulmn: 'address' }
      ],
      headerStyle: [
        { width: '100px' },
        { width: '200px' },
        { width: '400px' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      agencytree: [],
      agencyId: '',
      noInit: false,
      visibleLoading: false,
      pageNo: 1,
      pageSize: 5,
      total: 0,
      list: [],
      countList: {
        gridNum: { index: 0, title: '网格党支部', value: '0' },
        groupNum: { index: 1, title: '楼院党小组', value: '0' },
        kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
        partyMemberNum: { index: 3, title: '党员数', value: '0' },
        serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
        volunteerTeamNum: { index: 5, title: '社区服务队伍数', value: '0' }
      },
      axisStructId: '', // 动力主轴节点
      showHouse: false, // 显示house-dialog
      houseId: '', // 房屋ID
      dangqunList: [], // 党群服务站列表
      xiaozuList: [], // 楼院小组地图坐标列表
      zhongxinhuList: [], // 党员中心户列表
    }
  },
  async mounted() {
    this.showInfo = false
    // const { user } = this.$store.state
    // this.agencyId = user.agencyId
    // console.log('agencyId-------', this.agencyId)
    // this.agencyId = '50140d770c578100328792121aa7b3c5'
    // this.axisStructId = '1518062548749725697'
    await nextTick(100)
    await this.getAgencylist()//获取组织级别
    await this.getStructTree()
    await this.getCount()
    await this.getMapData()
  },
  methods: {
    onClickNode (e) {
      this.pageNo = 1
      this.axisStructId = e.id
      this.getList()
    },
    async handleLook (val) {
      this.houseId = val.houseId
      this.showHouse = true
    },
    pageSizeChangeHandleNew (val) {
      this.pageNo = 1
      this.pageSize = val
      this.getList()
    },
    pageCurrentChangeHandleNew (val) {
      this.pageNo = val
      this.getList()
    },
    getList() {
      this.tableData = []
      this.visibleLoading = true
      let params = {
        axisStructId: this.axisStructId,
        pageSize: this.pageSize,
        agencyId: this.agencyId,
        pageNo: this.pageNo,
      }
      const url = "/pli/power/data/kernelHousehold/list"
      this.$http.post(url, params).then(res => {
        this.total = parseInt(res.data.total)
        this.tableData = res.data.data.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        this.visibleLoading = false
      }).catch(err => {
        this.$message.error(err)
      })
    },
    async getCount() {
      const url = "/pli/power/data/axis/statistics"
      let params = {
        agencyId: this.agencyId
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        Object.keys(this.countList).forEach(item => {
          if (item != 'partyMemberNum' && item != 'volunteerTeamNum') {
            this.countList[item].value = data[item]
          }
        })
        this.getPartyNumber() // 党员数
        this.getVolunteerTeamNum() // 社区服务队伍数
      } else {
        this.$message.error(msg)
      }
    },
    async getPartyNumber () {
      const url = "/epmetuser/icresiuser/partymemberagestatistics"
      let params = {
        orgId: this.agencyId,
        orgType: 'agency'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        let count = 0
        data.forEach(item => {
          count += parseInt(item.value)
        })
        this.countList.partyMemberNum.value = count
      } else {
        this.$message.error(msg)
      }
    },
    async getVolunteerTeamNum () {
      const url = "/heart/userdemand/servicelist"
      let params = {
        serviceType: 'community_org'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.countList.volunteerTeamNum.value = data.length || 0
      } else {
        this.$message.error(msg)
      }
    },
    async getStructTree() {
      const url = "/pli/power/data/axis/structTree"
      let params = {
        agencyId: this.agencyId
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.list = data
        if (data.length > 0) {
          this.axisStructId = this.list[0].id
          this.getList()
        }
      } else {
        this.$message.error(msg)
      }
    },
    getMapData() {
      const params1 = {
        axisStructId: this.axisStructId,
        agencyId: this.agencyId,
        limit: 99
      }
      // 党群服务站
      this.$http.post(`/pli/power/data/serviceStation/listPosition`, params1).then(res => {
        res.data.data.forEach((item, index) => {
          let ob = {
            index: index,
            id: item.stationId,
            name: item.address,
            latitude: item.latitude,
            longitude: item.longitude
          }
          this.dangqunList.push(ob)
        })
        this.$nextTick(() => {
          this.$refs.orgMap.addMarker(this.dangqunList, dhIcon)
        })
      }).catch(err => {
        this.$message.error(err)
      })
      // 动力主轴节点
      const params2 = {
        agencyId: this.agencyId
      }
      const structLevel = '2'
      this.$http.post(`/pli/power/data/axis/${structLevel}/listPosition`, params2).then(res => {
        res.data.data.forEach((item, index) => {
          let ob = {
            index: index,
            id: item.axisStructId,
            name: item.axisStructName,
            latitude: item.latitude,
            longitude: item.longitude
          }
          this.xiaozuList.push(ob)
        })
        this.$nextTick(() => {
          this.$refs.orgMap.addMarker_1(this.xiaozuList, lyxzIcon)
        })
      }).catch(err => {
        this.$message.error(err)
      })
      // 党员中心户
      this.$http.post(`/pli/power/data/kernelHousehold/listPosition`, params1).then(res => {
        res.data.data.forEach((item, index) => {
          let ob = {
            index: index,
            id: item.houseId,
            name: item.address,
            latitude: item.latitude,
            longitude: item.longitude
          }
          this.zhongxinhuList.push(ob)
        })
        this.$nextTick(() => {
          this.$refs.orgMap.addMarker_2(this.zhongxinhuList, dyzxhIcon)
        })
      }).catch(err => {
        this.$message.error(err)
      })
    },
    // handleClickRow(val) {
    //   console.log('click-row----', val)
    //   this.$router.push({
    //     path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
    //   })
    // },
    //获取组织数据
    async getAgencylist () {
        const url = '/data/aggregator/org/agencytree'
        let params = {
            agencyId: this.agencyId,
            client:'gov'
        }
        const { data, code, msg } = await requestPost(url,params)
        if (code === 0) {
            let _data
            if (data) {
                _data = this.removeByOrgType(data, 'agency')
                if (_data) {
                    this.agencytree = this.removeEmptySubOrgList(_data)
                    // 如果有子集就进入循环，如果没有就默认取第一个的id
                    this.agencyId = this.agencytree[0].subOrgList && this.agencytree[0].subOrgList.length > 0 ? this.setListAgencyId_one(this.agencytree[0].subOrgList) : this.agencytree[0].orgId
                }
            }
        } else {
            this.$message.error(msg)
        }
    },
    removeByOrgType (orgArray, orgType) {
        if (orgArray && orgArray.length > 0) {
            for (let p = orgArray.length - 1; p >= 0; p--) {
                let orgInfo = orgArray[p]
                if (orgInfo) {
                    if (orgInfo.orgType !== orgType) {
                        orgArray.splice(p, 1)
                    } else {
                        this.removeByOrgType(orgInfo.subOrgList, orgType)
                    }
                }
            }
        }
        return orgArray
    },
    removeEmptySubOrgList (orgArray) {
        orgArray.forEach((orgInfo) => {
            if (orgInfo && orgInfo.subOrgList) {
                if (orgInfo.subOrgList.length === 0) {
                    orgInfo.subOrgList = undefined
                } else {
                    this.removeEmptySubOrgList(orgInfo.subOrgList)
                }
            }
        })
        return orgArray;
    },
    // 取最后一级组织的第一条数据的 orgId
    setListAgencyId_one(subOrgList) {
      if (subOrgList[0].subOrgList && subOrgList[0].subOrgList.length > 0) {
        return this.setAgencyId_two(subOrgList[0].subOrgList)
      } else {
        return subOrgList[0].orgId
      }
    },
    setAgencyId_two(subOrgList) {
      if (subOrgList[0].subOrgList && subOrgList[0].subOrgList.length > 0) {
        return this.setListAgencyId_one(subOrgList[0].subOrgList)
      } else {
        return subOrgList[0].orgId
      }
    },
    async handleChangeAgencytree() {
      this.pageNo = 1
      this.pageSize = 5
      this.total = 0
      this.dangqunList = [] // 党群服务站列表
      this.xiaozuList = [] // 楼院小组地图坐标列表
      this.zhongxinhuList = [] // 党员中心户列表
      this.tableData = []
      this.axisStructId = ''
      await this.getStructTree()
      await this.getCount()
      await this.getMapData()
    },
  },
}
</script>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/typeAnalyze.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/personCategory.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/search_1.scss"
  scoped
></style>
<style lang="scss" scoped>
.second-select {
    margin: 0 10px 0 40px !important;
}
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  .title-label {
    font-size: 20px;
    font-weight: 800;
    ::v-deep .el-input {
      width: 180px;
      .el-input__inner {
        font-size: 18px;
        color: #fff;
        background: #06186d;
        border: 1px solid #1a64cc;
      }
      .el-icon-arrow-down::before {
          content: "\e790";
      }
    }
  }
}
.card-panel {
  display: flex;
  margin-top: 10px;
  height: 100%;
  .card-left {
    position: relative;
    flex: 1;
    height: 100%;
    width: 50%;
    &-top {
      width: 100%;
      height: 550px;
      display: flex;
    }
    &-bottom {
      width: 100%;
      height: calc(100% - 550px);
      box-sizing: border-box;
      margin: 0;
      margin-top: 30px;
      .pagination {
        box-sizing: border-box;
        margin-top: 20px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background: #0266d1;
          color: #000d3f;
        }

        /deep/ .el-pagination .el-pager li {
          background: #002e74;
        }

        /deep/ .el-pagination .btn-prev {
          background: #002e74;
        }

        /deep/ .el-pagination .btn-next {
          background: #002e74;
        }
      }
      /deep/ .warning-table .table {
        min-height: 300px;
      }
    }
  }
  .card-right {
    position: relative;
    flex: 1;
    height: 100%;
    width: 50%;
    &-top {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    &-bottom {
      height: 700px;
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      padding-left: 30px;
      .legend {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        &-item {
          width: 150px;
          display: flex;
          align-items: center;
          &-text {
            margin-left: 4px;
          }
        }
      }
    }
  }
}
.card-item-title {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.card-item-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-top: -6px;
  background: #2865FA;
  border-radius: 50%;
}
</style>
