<template>
  <div class="AppDataOverview">
    <div class="head">
      <div class="head_title">
        <span>数据总览</span>
        <span>数据截至 昨日24:00</span>
      </div>
      <div class="head_data">
        <div class="head_data_item" v-for="(e,ind) in monthData" :key="ind">
          <span class="dot"></span>
          <span>{{ e }} {{ data[e] }}</span>
        </div>
      </div>
    </div>

    <div class="information">
      <div class="u-sub">
        <u-subsection :list="list" :current="current"  @change="sectionChange"></u-subsection>
      </div>

      <div class="card_list">
        <div class="card" v-for="(item,index) in dataArray" :key="index">
          <div class="card_name">{{ item }}</div>
          <div class="card_num">{{ Number(data[item]).toLocaleString('en-US') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppDataOverview",
  data() {
    return {
      list: [
        { name: '本周' },
        { name: '本月' }
      ],
      current: 0,
      data: {},
      dataArray: ['新增居民档案','居民档案更新','新增网格员','新增走访记录','新增矛盾调解','新增宣发记录'],
      monthData: ['本月访问次数','本月访问人数'],
      beginDate: ''
    }
  },
  onShow() {
    this.getData()
  },
  methods: {
    sectionChange(e) {
      this.current = e
      this.getData()
    },
    getData() {
      this.$http.post(`/app/appwxcpopenstatistics/statistics`,null, {
        params: {
          beginDate: this.beginDate,
          type: this.current==0? '1':'2'
        }
      }).then(res=> {
        if(res?.data) {
          this.data = res.data
        }
      })
    }
  },
  onLoad(o) {
    document.title = '慧政务'
    this.beginDate = o.beginDate
  }
}
</script>

<style lang="scss" scoped>
.AppDataOverview {
  .head {
    height: 212px;
    background: #3975C6;
    .head_title { 
      color: #FFFFFF;
      padding: 32px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:first-child {
        font-size: 44px;
      }
      span:last-child {
        font-size: 24px;
      }
    }
    .head_data {
      display: flex;
      padding: 0 32px;
      box-sizing: border-box;
      .head_data_item {
        flex: 1;
        color: #FFFFFF;
        .dot {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #FFFFFF;
          margin-right: 8px;
        }
      }
    }
  }

  .information {
    width: 100%;
    border-radius: 16px;
    padding: 32px;
    box-sizing: border-box;

    .u-sub {
      padding: 32px;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 16px 16px 0 0;
    }

    .card_list {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: #FFFFFF;
      padding: 0 32px;
      box-sizing: border-box;
      border-radius: 0 0 16px 16px;
      
      .card {
        width: 50%;
        height: 160px;
        text-align: center;
        .card_name {
          margin-top: 32px;
          color: #666666;
        }
        .card_num {
          font-size: 36px;
          color: #000000;
          font-weight: 600;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>