<template>
  <div class="page-header-index-wide">
    <panel-group :groupData="groupData"></panel-group>

    <a-row :gutter="100" style="margin-top: 7px;margin-left: 1px;">
      <a-col :xs="22" :sm="22" :lg="8" style="background-color: white; margin-top: 10px; width: 32%;height: 260px;">
        <div class="chart-wrapper" style="padding: 1px;">
          <div style="font-size:23px; text-align: center;margin-top: 10px; ">个人变动</div>
          <number-chart-pro-add-day :userAddToday="addData.userAddToday" style="display:inline;width: 100px; float: left"/>
          <number-chart-pro-add-month :userAddMonth="addData.userAddMonth" style="display:inline;width: 100px;float: left"/>
          <number-chart-pro-add-year :userAddYear="addData.userAddYear" style="display:inline;width: 100px;float: left"/>
        </div>
      </a-col>
      <a-col
        :xs="22"
        :sm="22"
        :lg="8"
        style="background-color: white; padding-left: 20px; margin-top: 10px;  width: 32%;height: 260px;">
        <div class="chart-wrapper">
          <div style="font-size:23px; text-align: center;margin-top: 10px; margin-left: -30px;">机构变动</div>
          <number-chart-org-add-day :deptAddToday="addData.deptAddToday" style="display:inline;width: 100px; float: left"/>
          <number-chart-org-add-month :deptAddMonth="addData.deptAddMonth" style="display:inline;width: 100px;float: left"/>
          <number-chart-org-add-year :deptAddYear="addData.deptAddYear" style="display:inline;width: 100px;float: left"/>
        </div>
      </a-col>
      <a-col
        :xs="22"
        :sm="22"
        :lg="8"
        style="background-color: white; padding-left: 0px; margin-top: 10px;  width: 32%;height: 260px;">
        <div class="chart-wrapper">
          <div style="font-size:23px; text-align: center;margin-top: 10px; margin-left: -70px;">活跃用户情况</div>
          <number-chart-org-add-day :deptAddToday="addData.dailyActiveUser" style="display:inline;width: 100px; float: left"/>
          <number-chart-org-add-month :deptAddMonth="addData.monthActiveUser" style="display:inline;width: 100px;float: left"/>
          <number-chart-org-add-year :deptAddYear="addData.yearAddYear" style="display:inline;width: 100px;float: left"/>
          <!-- <index-table></index-table> -->
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :xs="24" :sm="24" :lg="24">
        <div class="chart-c">
          <bar-data-chart :visitData="visitData"/>
        </div>
      </a-col>
    <!-- <a-col :xs="24" :sm="24" :lg="12">
        <div class="chart-d">
        <ring-chart/>
        </div>
    </a-col> -->
    </a-row>
  </div>
</template>

<script>
    import { PageView } from '@/layouts'
    import PanelGroup from '@/components/indexCompnents/PanelGroup'
    import NumberChartProAddDay from '@/components/indexCompnents/NumberChart-ProAddDay'
    import NumberChartProAddMonth from '@/components/indexCompnents/NumberChart-ProAddMonth'
    import NumberChartProAddYear from '@/components/indexCompnents/NumberChart-ProAddYear'

    import NumberChartOrgAddDay from '@/components/indexCompnents/NumberChart-OrgAddDay'
    import NumberChartOrgAddMonth from '@/components/indexCompnents/NumberChart-OrgAddMonth'
    import NumberChartOrgAddYear from '@/components/indexCompnents/NumberChart-OrgAddYear'
    import indexTable from '@/components/indexCompnents/indexTable'
    import BarDataChart from '@/components/indexCompnents/BarDataChart'
    import RingChart from '@/components/indexCompnents/RingChart'
    import { getOverview, getAddInfo, getBSVisits } from '@/api/bsloginfo/bsloginfo'

    export default {
        name: 'Workplace',
        components: {
            PageView,
            PanelGroup,
            NumberChartProAddDay,
            NumberChartProAddMonth,
            NumberChartProAddYear,
            NumberChartOrgAddDay,
            NumberChartOrgAddMonth,
            NumberChartOrgAddYear,
            indexTable,
            BarDataChart,
            RingChart
        },
        data () {
            return {
              groupData: {
                loginCountToday: 0,
                dailyActiveUser: 0,
                userCount: 0,
                deptCount: 0
              },
              addData: {
                userAddToday: 0,
                userAddMonth: 0,
                userAddYear: 0,
                deptAddToday: 0,
                deptAddMonth: 0,
                deptAddYear: 0
              },
              visitData: {}
            }
        },
        computed: {},
        mounted () {
          this.getOverview()
           this.getAddInfo()
           this.getBSVisits()
        },
        methods: {
           // 统计信息
           getOverview () {
              getOverview().then(response => {
                this.groupData = response
              })
           },
          // 变更信息
          getAddInfo () {
              getAddInfo().then(response => {
                this.addData = response
              })
           },
          // 业务系统访问量
          getBSVisits () {
              getBSVisits().then(response => {
                this.visitData = response
              })
           }
        }
    }

</script>

<style lang="less" scoped>
  .chart-c {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 17px 10px 10px 0;
    margin-left: 0.5%;
    margin-right: 0px;
    border-width: 0px;
    cursor: default;
    display: inline;
    float: left;
  }
  .chart-d {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 17px 0 0 10px;
    margin-right: 10px;
    margin-left: 0.5%;
    border-width: 0px;
    cursor: default;
    display: inline;
    float: right;
  }
</style>
