<template>
  <div v-loading="latestActiveListLoading" class="active-index" :data-language="language">
    <div class="title">
      {{ $t('pages.dashboard.activeIndex.thirdPartyTitle') }}
      <span class="desc">All {{ latestActiveIndex.date || '-' }}</span>
    </div>
    <div class="flex-l flex-wrap">
      <div
        v-for="(item, index) in activeIndexs"
        :key="index"
        class="block-card"
        :class="{ 'block-card-selected': item.type === selectedIndex.data.type }"
        @click="clickQueryCharts('IM_ACTIVE', item)"
      >
        <div class="block-card-title nowrap-ellipsis"><a :title="item.name">{{ item.name }}</a></div>
        <div class="cite">{{ latestActiveIndex.imActiveIndex ? latestActiveIndex.imActiveIndex[item.field] || '0' : '-' }}</div>
      </div>
    </div>

    <div class="title">
      {{ $t('pages.dashboard.activeIndex.customTitle') }}
      <span class="desc">{{ latestActiveIndex.date || '-' }}</span>
    </div>
    <div class="flex-l flex-wrap">
      <div
        v-for="(item, index) in customizeIndexs"
        :key="index"
        class="block-card"
        :class="{ 'block-card-selected': item.type === selectedIndex.data.type }"
        @click="clickQueryCharts('CUTOMIZE_ACTIVE', item)"
      >
        <div class="block-card-title nowrap-ellipsis"><a :title="item.name">{{ item.name }}</a></div>
        <div class="cite">{{ latestActiveIndex.customizeActiveIndex ? latestActiveIndex.customizeActiveIndex[item.field] || '0' : '-' }}</div>
      </div>
    </div>

    <div class="title">
      {{ $t('pages.dashboard.activeIndex.chartTitle') }}
      <span class="desc">{{ chartsData.title }}</span>
    </div>
    <div class="charts">
      <line-graph-charts :key="'active-index-chart-' + language" :charts-data="chartsData" height="300px" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listUserActiveIndex } from '@/api/statistics'
import LineGraphCharts from './line-graph-charts'

const ACTIVE_INDEX_CONFIGS = [
  { key: 'activeUsers', field: 'activeUserNum', type: 'ACTIVE_USER_NUM' },
  { key: 'newRegistrations', field: 'registUserNumOneDay', type: 'REGIST_USER_NUM_ONE_DAY' },
  { key: 'totalRegistrations', field: 'registUserNumTotal', type: 'REGIST_USER_NUM_TOTAL' },
  { key: 'loginTimes', field: 'loginTimes', type: 'LOGIN_TIMES' },
  { key: 'loginUsers', field: 'loginUserNum', type: 'LOGIN_USER_NUM' },
  { key: 'upMessages', field: 'upMsgNum', type: 'UP_MSG_NUM' },
  { key: 'sendMessageUsers', field: 'sendMsgUserNum', type: 'SEND_MSG_USER_NUM' },
  { key: 'apnsMessages', field: 'apnsMsgNum', type: 'APNS_MSG_NUM' },
  { key: 'c2cUpMessages', field: 'c2cUpMsgNum', type: 'C2C_UP_MSG_NUM' },
  { key: 'c2cDownMessages', field: 'c2cDownMsgNum', type: 'C2C_DOWN_MSG_NUM' },
  { key: 'c2cSendUsers', field: 'c2cSendMsgUserNum', type: 'C2C_SEND_MSG_USER_NUM' },
  { key: 'c2cApnsMessages', field: 'c2cAPNSMsgNum', type: 'C2C_APNS_MSG_NUM' },
  { key: 'maxOnlineUsers', field: 'maxOnlineNum', type: 'MAX_ONLINE_NUM' },
  { key: 'downMessagesTotal', field: 'downMsgNum', type: 'FOWN_MSG_NUM' },
  { key: 'chainIncrease', field: 'chainIncrease', type: 'CHAIN_INCREASE' },
  { key: 'chainDecrease', field: 'chainDecrease', type: 'CHAIN_DECREASE' },
  { key: 'groupUpMessages', field: 'groupUpMsgNum', type: 'GROUP_UP_MSG_NUM' },
  { key: 'groupDownMessages', field: 'groupDownMsgNum', type: 'GROUP_DOWN_MSG_NUM' },
  { key: 'groupSendUsers', field: 'groupSendMsgUserNum', type: 'GROUP_SEND_MSG_USER_NUM' },
  { key: 'groupApnsMessages', field: 'groupAPNSMsgNum', type: 'GROUP_APNS_MSG_NUM' },
  { key: 'groupSendCount', field: 'groupSendMsgGroupNum', type: 'GROUP_SEND_MSG_GROUP_NUM' },
  { key: 'groupJoinTotal', field: 'groupJoinGroupTimes', type: 'GROUP_JOIN_GROUP_TIMES' },
  { key: 'groupQuitTotal', field: 'groupQuitGroupTimes', type: 'GROUP_QUIT_GROUP_TIMES' },
  { key: 'groupNewCount', field: 'groupNewGroupNum', type: 'GROUP_NEW_GROUP_NUM' },
  { key: 'groupTotalCount', field: 'groupAllGroupNum', type: 'GROUP_ALL_GROUP_NUM' },
  { key: 'groupDestroyCount', field: 'groupDestroyGroupNum', type: 'GROUP_DESTORY_GROUP_NUM' },
  { key: 'callbackRequests', field: 'callbackReq', type: 'CALLBACK_REQ' },
  { key: 'callbackResponses', field: 'callbackRsp', type: 'CALLBACK_RSP' }
]

const CUSTOM_ACTIVE_INDEX_CONFIGS = [
  { key: 'ordinaryUsers', field: 'ordinaryActiveNum', type: 'GENERAL_USER_ACTIVE_NUM' },
  { key: 'hosts', field: 'anchorActiveNum', type: 'HOST_USER_ACTIVE_NUM' }
]

export default {
  components: { LineGraphCharts },
  data() {
    return {
      latestActiveListLoading: true,
      latestActiveList: [],
      latestActiveIndex: {},
      chartsData: {
        data: [],
        title: ''
      },
      selectedIndex: {
        type: 'IM_ACTIVE',
        data: {}
      }
    }
  },
  computed: {
    ...mapGetters(['language']),
    activeIndexs() {
      const language = this.language
      return ACTIVE_INDEX_CONFIGS.map(item => ({
        ...item,
        name: this.$t(`pages.dashboard.activeIndex.metrics.${item.key}`)
      }))
    },
    customizeIndexs() {
      const language = this.language
      return CUSTOM_ACTIVE_INDEX_CONFIGS.map(item => ({
        ...item,
        name: this.$t(`pages.dashboard.activeIndex.customMetrics.${item.key}`)
      }))
    }
  },
  watch: {
    language() {
      this.syncSelectedIndexByType()
      this.proccessIndexChartsData()
    }
  },
  created() {
    this.selectedIndex = {
      type: 'IM_ACTIVE',
      data: this.activeIndexs[0]
    }
    this.renderData()
  },
  methods: {
    renderData() {
      this.latestActiveListLoading = true
      listUserActiveIndex().then(res => {
        this.latestActiveListLoading = false
        const { body } = res
        this.latestActiveList = body || []
        if (this.latestActiveList.length > 0) {
          this.latestActiveIndex = this.latestActiveList[this.latestActiveList.length - 1]
        }
        this.proccessIndexChartsData()
      }).catch(() => {
        this.latestActiveListLoading = false
      })
    },
    syncSelectedIndexByType() {
      const source = this.selectedIndex.type === 'CUTOMIZE_ACTIVE' ? this.customizeIndexs : this.activeIndexs
      const matched = source.find(item => item.type === this.selectedIndex.data.type) || source[0] || {}
      this.selectedIndex = {
        ...this.selectedIndex,
        data: matched
      }
    },
    proccessIndexChartsData() {
      const type = this.selectedIndex.type
      const data = this.selectedIndex.data
      const field = data.field
      this.chartsData.title = data.name
      this.chartsData.data = []
      if (!this.latestActiveList || this.latestActiveList.length <= 0 || !field) {
        return
      }
      const resultData = []
      this.latestActiveList.forEach(activeIndex => {
        if (type === 'IM_ACTIVE') {
          const value = activeIndex.imActiveIndex[field] || 0
          resultData.push([activeIndex.date, value])
        }
        if (type === 'CUTOMIZE_ACTIVE') {
          const value = activeIndex.customizeActiveIndex[field] || 0
          resultData.push([activeIndex.date, value])
        }
      })
      this.chartsData = {
        title: data.name,
        data: resultData
      }
    },
    clickQueryCharts(type, item) {
      this.selectedIndex = {
        type,
        data: item
      }
      this.proccessIndexChartsData()
    }
  }
}
</script>

<style scoped lang="scss">
.active-index {
  .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;

    .desc {
      color: #999999;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .block-card {
    width: 130px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 2px;

    .date {
      font-weight: bold;
      line-height: 30px;
    }
  }
}
</style>
