<template>
  <div class="AppResidentStatistics">
    <AiTopFixed>
      <div class="area-content">
        <AiAreaPicker v-model="areaId" :name.sync="areaName">
          <div flex>
            <img src="./img/location.png" alt="" class="icon-img">
            <AiMore v-model="areaName" icon="arrow-down"/>
          </div>
        </AiAreaPicker>
      </div>
    </AiTopFixed>
    <div class="tab-list">
      <div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
    </div>
    <component :is="tabList[tabIndex].component" class="component" />
  </div>
</template>

<script>
import Files from './components/Files'
import Message from './components/Message'
import People from './components/People'
export default {
  name: "AppResidentStatistics",
  appName: "居民统计",
  data() {
    return {
      tabList: [
        {
          text: '人群统计',
          component: People
        },
        {
          text: '档案统计',
          component: Files
        },
        {
          text: '会话统计',
          component: Message
        },
      ],
      tabIndex: 0,
      areaId: '',
      areaName: '',
    }
  },
  components: {Files, Message, People},
  methods: {
    tabClick(index) {
      this.tabIndex = index
    },
  },
  onShow() {
    document.title = "居民统计"
  },
}
</script>

<style lang="scss" scoped>
.AppResidentStatistics {
  width: 100%;
  height: 100%;
  background-color: #F5F6F7;
  padding-bottom: 112px;
  ::v-deep .AiTopFixed {
    .content {
      background-color: #3975C6;
      color: #fff;
    }
    .icon-img{
      width: 48px;
      height: 48px;
    }
  }
  ::v-deep .AiMore{
    span{
      color: #fff;
    }
  }
  .tab-list {
    width: 100%;
    line-height: 88px;
    display: flex;
    background-color: #fff;
    position: fixed;
    z-index: 9;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
      position: relative;
    }
    .active {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000;
      span {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -25px;
        width: 50px;
        height: 6px;
        background: #3399FF;
        border-radius: 4px;
      }
    }
  }
  .component{
    padding-top: 88px;
  }
}
</style>
