<template>
  <div class="AppDataStatistics">
    <AiTopFixed v-if="tabIndex != 1">
      <div class="area-content">
        <!-- <AiAreaPicker v-model="areaId" :name.sync="areaName" :area-id="user.areaId" @select="areaSelect">
          <div flex>
            <img src="./img/location.png" alt="" class="icon-img">
            <AiMore v-model="areaName" icon="arrow-down"/>
          </div>
        </AiAreaPicker> -->
        <AiPagePicker type="dept" :selected.sync="deptList" nodeKey="id" single @select="deptSelect">
          <span class="label" v-if="deptList.length">{{deptList[0].name}}</span>
          <span v-else style="color:#fff;">部门名称</span>
          <u-icon name="arrow-down" color="#fff" size="24" style="margin-left:8px;"/>
        </AiPagePicker>
      </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 ref='list' :is="tabList[tabIndex].component" :departmentId="departmentId" class="component" />
  </div>
</template>

<script>
import sensitive from './components/sensitive'
import wechat from './components/wechat'
import message from './components/message'
import { mapState } from 'vuex'

export default {
  name: "AppDataStatistics",
  appName: "数据统计",
  data() {
    return {
      tabList: [
        {
          text: '微信统计',
          component: wechat
        },
        {
          text: '会话统计',
          component: message
        },
        {
          text: '敏感词统计',
          component: sensitive
        },
      ],
      tabIndex: 0,
      // areaId: '',
      // areaName: '',
      departmentId: '',
      deptList: [],

    }
  },
  computed: {
    ...mapState(['user'])
  },
  components: {sensitive, wechat, message},
  methods: {
    tabClick(index) {
      this.tabIndex = index
    },
    toOverData() {
      uni.navigateTo({url:'./AppDataOverview'})
    },
    areaSelect(e) {
      this.areaId = e
      this.refreshList()
    },
    deptSelect(e) {
      this.deptList = e
      this.departmentId = e[0].id
      this.refreshList()
    },
    refreshList() {
      this.$nextTick(() => this.$refs.list.getData())
    },
    refreshTally() {
      this.$http.post('/app/appwxcpopenstatistics/tally').then(res=> {
        if(res.code == 0) {
          console.log('手动触发成功');
        }
      })
    }
    
  },
  onLoad() {
    this.deptList = [{name: this.user.departName, id: this.user.departId}]
    this.departmentId = this.user.departId
    // this.refreshTally()
  },
  onShow() {
    document.title = "数据统计"
    // this.areaId = this.user.areaId
    // this.areaName = this.user.areaName
  },
}
</script>

<style lang="scss" scoped>
.AppDataStatistics {
  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>
