<template>
  <ai-detail class="Statistics">
    <template #title>
      <ai-title title="企业统计" :isShowBack="true" @onBackClick="onBack" isShowBottomBorder>
      </ai-title>
    </template>
    <template #content>
      <ai-card title="基本信息">
        <template #content>
          <el-row :gutter="20">
            <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>
        </template>
      </ai-card>
      <ai-card title="统计信息" class="chart-content">
        <template #title>
          <div class="tabs">
            <div class="item" v-for="(item, index) in tabs" :key="index" :class="index == activeIndex ? 'active' : ''" @click="tabClick(index)">{{item}}</div>
          </div>
        </template>
        <template #content>
          <div class="echart" id="echart" v-if="activeIndex != 2 && activeIndex != 3"></div>
          <div class="table" v-else-if="activeIndex == 2">
            <ai-search-bar>
              <template slot="right">
                <el-input
                  v-model="innerMemberId"
                  size="small"
                  placeholder="输入群成员ID"
                  @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">
              <!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
                <div class="table-options" slot-scope="{ row }">
                  <el-button type="text">打开</el-button>
                </div>
              </el-table-column> -->
            </ai-table>
          </div>
          <div class="table" v-else-if="activeIndex == 3">
            <ai-table :tableData="userList" :total="userPage.total" :current.sync="userPage.current" :size.sync="userPage.size"
              @getList="getUserTableData" :col-configs="userColConfigs" :dict="dict">
              <!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
                <div class="table-options" slot-scope="{ row }">
                  <el-button type="text">打开</el-button>
                </div>
              </el-table-column> -->
            </ai-table>
          </div>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'Statistics',

    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      params: Object
    },

    data () {
      return {
        info: {},
        activeIndex: 0,
        tabs: ['概览', '群统计',  '群列表', '成员与好友统计'],
        listData: [],
        pieData: [],
        myChart: null,
        gropList: [],
        page: {current: 1, size: 10, total: 0},
        innerMemberId: '',
        userList: [],
        userPage: {current: 1, size: 10, total: 0}
      }
    },
    computed: { 
      colConfigs() {
        return [
          {label: "群名", prop: "name", width:200},
          {label: "创建时间", prop: "createTime", align: 'center', width:150},
          {label: "群成员数", prop: "memberCount", align: 'center', width:100},
          {label: "群主ID", prop: "owner", align: 'center', width:150},
          {label: "群公告", prop: "notice"},
        ]
      },
      userColConfigs() {
        return [
          {label: "部门", prop: "departmentName"},
          {label: "姓名", prop: "name", align: 'center'},
          {label: "添加好友人数", prop: "residentCount", align: 'center'}
        ]
      }
    },

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

    methods: {
      chartInit() {
        var option = {}
        if(this.activeIndex != 1) {
          option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['群总数', '成员总数', '成员活跃总数', '居民总人数', '群成员总数']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: this.listData[5],
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '群总数',
                type: 'line',
                data: this.listData[0]
              },
              {
                name: '成员总数',
                type: 'line',
                data: this.listData[1]
              },
              {
                name: '成员活跃总数',
                type: 'line',
                data: this.listData[2]
              },
              {
                name: '居民总人数',
                type: 'line',
                data: this.listData[3]
              },
              {
                name: '群成员总数',
                type: 'line',
                data: this.listData[4]
              },
            ]
          };
        }else {
          option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                type: 'pie',
                radius: '50%',
                data: this.pieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
        }
        this.myChart.setOption(option);
      },
      getInfo() {
        this.myChart = echarts.init(document.getElementById("echart"));
        this.instance.post(`/appCorpStat/getLatestInfo?corpId=${this.params.corpId}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.getCharInfo()
          }
        })
      },
      getCharInfo() {
        this.instance.post(`/appCorpStat/getLatestThreeMonthStat?corpId=${this.params.corpId}`).then(res => {
          if (res.code === 0) {
            if(res.data && res.data.length) {
              this.listData = []
              this.listData[0] =  res.data.map(v => v.groupCount)
              this.listData[1] =  res.data.map(v => v.userCount)
              this.listData[2] =  res.data.map(v => v.activeCount)
              this.listData[3] =  res.data.map(v => v.residentCount)
              this.listData[4] =  res.data.map(v => v.groupuserCount)
              this.listData[5] = res.data.map(v => v.statDate)
              this.chartInit()
            }
          }
        })

        this.instance.post(`/wxcp/wxgroup/groupStatistic?corpId=${this.params.corpId}`).then(res => {
          if (res.code === 0) {
            if(res.data) {
              this.pieData = []
              Object.getOwnPropertyNames(res.data).forEach((key) => {
                var e = {
                  value: res.data[key],
                  name: key
                }
                this.pieData.push(e)
              });
            }
          }
        })
      },

      resetSearch() {
        this.innerMemberId = ''
        this.page.current = 1
        this.getTableData()
      },
      getTableData() {
        this.instance.post(`/wxcp/wxgroup/list?corpId=${this.params.corpId}&current=${this.page.current}&size=${this.page.size}&innerMemberId=${this.innerMemberId}`,).then(res => {
          if (res.code === 0) {
            if(res.data) {
              this.gropList = res.data.records
              this.page.total = res.data.total
            }
          }
        })
      },
      getUserTableData() {
        this.instance.post(`/wxcp/wxuser/userStat?corpId=${this.params.corpId}&current=${this.userPage.current}&size=${this.userPage.size}&mainDepartment=1`,).then(res => {
          if (res.code === 0) {
            if(res.data) {
              this.userList = res.data.records
              this.userPage.total = res.data.total
            }
          }
        })
      },
      onBack () {
        this.$emit('change', {
          type: 'list'
        })
      },
      tabClick(index) {
        this.activeIndex = index
        this.myChart.dispose()
        if(index != 2 && index != 3) {
          this.$nextTick(() => {
            this.myChart = echarts.init(document.getElementById("echart"));
            this.chartInit()
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .cover {
    display: block;
    width: 300px;
    height: 140px;
    margin: 20px auto;
  }

  .subTitle {
    text-align: center;
    font-size: 12px;
    font-weight: normal;
  }
  .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;
  }
  .tabs{
    .item{
      display: inline-block;
      padding: 0 20px;
      line-height: 54px;
      cursor: pointer;
    }
    .active{
      color: #26f;
      border-bottom: 2px solid #26f;
    }
  }
  .chart-content{
    height: calc(100% - 240px);
    ::v-deep .ai-card__body{
       height: calc(100% - 70px);
    }
    .echart{
      width: 100%;
      height: 100%;
    }
    .table{
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }
  }
  ::v-deep .ai-detail__content--wrapper{
    height: 100%;
  }
</style>
