<template>
  <section class="AppCorpStatistics">
    <ai-detail>
      <!-- 标题 -->
      <ai-title slot="title" title="企微统计" isShowBottomBorder />
      <template #content>
        <ai-tree-menu title="企微统计">
          <el-tree
            @node-click="nodeClick"
            :props="props"
            :load="loadNode"
            lazy
            :expand-on-click-node="false"
          >
          </el-tree>
        </ai-tree-menu>

        <div class="flex">
          <el-row :gutter="20" class="el-row">
            <el-col :span="5">
              <div class="title">群总数</div>
              <div class="num">{{info.groupCount}}</div>
            </el-col>
            <el-col :span="5">
              <div class="title">成员总数</div>
              <div class="num">{{info.userCount}}</div>
            </el-col>
            <el-col :span="5">
              <div class="title">成员活跃总数</div>
              <div class="num">{{info.activeCount}}</div>
            </el-col>
            <el-col :span="5">
              <div class="title">居民总人数</div>
              <div class="num">{{info.residentCount}}</div>
            </el-col>
            <el-col :span="4">
              <div class="title">群成员总数</div>
              <div class="num">{{info.groupuserCount}}</div>
            </el-col>
          </el-row>
          <div class="table">
            <ai-search-bar>
              <template slot="right">
                <el-input
                  v-model="name"
                  size="small"
                  placeholder="输入企微名称"
                  @keyup.enter.native="(page.current = 1), getTableData()"
                  clearable
                  prefix-icon="iconfont iconSearch"
                />
                <el-button
                  type="primary"
                  icon="iconfont iconSearch"
                  size="small"
                  @click="(page.current = 1), getTableData()"
                  >查询
                </el-button>
                <el-button
                  icon="el-icon-refresh-right"
                  size="small"
                  @click="resetSearch"
                  >重置</el-button
                >
              </template>
            </ai-search-bar>
            <ai-table :tableData="gropList" :total="page.total" :current.sync="page.current" :size.sync="page.size"
              @getList="getTableData" :col-configs="colConfigs" :dict="dict">
            </ai-table>
          </div>
        </div>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppCorpStatistics',
  label: 'saas企微统计',
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },

  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      corpTotal: 0,
      info: {},
      gropList: [],
      page: {current: 1, size: 10, total: 0},
      areaId: '',
      name: ''
    }
  },

  computed: {
    ...mapState(['user']),

    colConfigs() {
      return [
        {label: "企微名称", prop: "name", align: 'center', width:250},
        {label: "地区", prop: "areaName", align: 'center', width:150},
        {label: "创建时间", prop: "createTime", align: 'center', width:200},
        {label: 'CORP_ID', prop: "corpId"}
      ]
    }
  },

  mounted() {
    this.getInfo()
    this.getTableData()
  },

  methods: {
    loadNode(node, resolve) {
      if (node.level == 0) {
        this.instance.post(`/appCorpStat/getCorpStatTotal`).then((res) => {
          if (res.data) {
            return resolve([{ name: `全国  (${res.data})`}]);
          }
        })

        return false
      }

      var areaId = node.data.id

      if(node.level == 1) {  //全国
        areaId = ''
      }
      this.instance.post(`/appCorpStat/getCorpStatByArea?areaId=${areaId}`).then((res) => {
        if (res.data) {
          res.data.map((item) => {
            item.name = item.name + `(${item.total})`
          })
          resolve(res.data)
        }
      })
    },

    nodeClick(list, node) {
      if(node.data.id) {
        this.areaId = node.data.id
        this.page.current = 1
      }else {
        this.areaId = ''
      }
      this.getInfo()
      this.getTableData()
    },

    resetSearch() {
      this.name = ''
      this.page.current = 1
      this.getTableData()
    },

    getInfo() {
      this.info = {}
      this.instance.post(`/appCorpStat/getLatestInfo?areaId=${this.areaId}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
        }
      })
    },

    getTableData() {
      this.gropList = []
      this.page.total = 0
      this.instance.post(`/appCorp/page?areaId=${this.areaId}&current=${this.page.current}&size=${this.page.size}&name=${this.name}`,).then(res => {
        if (res.code === 0) {
          if(res.data) {
            this.gropList = res.data.records
            this.page.total = res.data.total
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.AppCorpStatistics {
  height: 100%;

  .ai-detail {
    ::v-deep .ai-detail__content {
      .ai-detail__content--wrapper {
        display: flex;
        justify-content: space-between;
        height: 100%;
        max-width: 100%;
        padding: 15px;

        .AiTreeMenu {
          width: 22%;
        }

        .flex {
          width: 78%;
          margin-left: 10px;
          padding: 15px;
          background-color: #fff;
          overflow-y: scroll;

          .ai-search-ba {
            margin-top: 10px;
          }

          .ai-table {
            margin-top: 0 !important;
          }
        }
      }
    }
  }

  ::v-deep .el-tree {
    .el-tree-node__content {
      display: inline-flex;
      min-width: 100%;

      &:hover {
        background: #e8efff;
        color: #222222;
        border-radius: 2px;
      }
    }

    .is-current > .el-tree-node__content {
      background: #2266ff;

      &:hover {
        background: #2266ff;
        color: #fff;
      }

      span {
        color: #fff;
        font-weight: bold;
      }
    }
  }
}

.title{
  line-height: 60px;
  font-size: 18px;
  text-align: center;
  color: #666;
}
.num{
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 20px;
}

.el-row{
  background-color: #eee;
  margin: 0 0 16px!important;
}
</style>
