<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="card-panel">
        <div class="card-left">
          <!-- <div class="card-item-title">小标题</div> -->
          <div class="card-left-top">
            <screen-org-tree></screen-org-tree>
          </div>
          <div class="card-left-bottom">
            <screen-table :headerList="headerList"
                          :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>
          </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: 10px;">
            <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></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 { requestPost } from "@/js/dai/request"

export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenMap,
    screenOrgMap,
    screenOrgTree,
    screenTopCount
  },
  data() {
    return {
      headerList: [
        { title: "序号", coulmn: 'index' },
        { title: "活动标题", coulmn: 'title' },
        { title: "单位名称", coulmn: 'unitName' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      agencyId: '',
      noInit: false,
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      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' }
      }
    }
  },
  async mounted() {
    this.showInfo = false
    const { user } = this.$store.state
    this.agencyId = user.agencyId
    console.log('agencyId-------', this.agencyId)
    await nextTick(100)
    this.getCount()
    this.getList()
  },
  methods: {
    async handleLook (val) {
      console.log(val.id)
    },
    pageSizeChangeHandleNew (val) {
      this.pageNo = 1
      this.pageSize = val
      this.getList()
    },
    pageCurrentChangeHandleNew (val) {
      this.pageNo = val
      this.getList()
    },
    getList() {
      this.visibleLoading = true
      let params = {
        agencyId: this.agencyId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        serviceMatter: '',
        startTime: '',
        endTime: ''
      }
      const url = "/heart/icpartyactivity/activitylist"
      this.$http.post(url, params).then(res => {
        this.tableData = res.data.data.list.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 => {
          this.countList[item].value = data[item]
        })
      } else {
        this.$message.error(msg)
      }
    },
    // handleClickRow(val) {
    //   console.log('click-row----', val)
    //   this.$router.push({
    //     path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
    //   })
    // },
  },
}
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.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%;
    &-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;
        }
      }
    }
  }
  .card-right {
    position: relative;
    flex: 1;
    height: 100%;
    &-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>
