<template>
  <div class="page_container">
    <NavBar :title="$t('rtc.callRecord')" />
    <van-tabs v-model:active="active">
      <van-tab :title="$t('rtc.allCall')">
        <template v-for="item in historyList?.sort((a, b) => b.time - a.time)">
          <Item :source="item" />
        </template>
      </van-tab>
      <van-tab :title="$t('rtc.missedCall')">
        <template v-for="item in historyList?.sort((a, b) => b.time - a.time)">
          <Item :source="item" v-if="item.status !== 3" />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import Item from './RtcHistoryItem.vue'
import { ExMessageItem } from '@/store/modules/message'

type UserInfoType = {
  userInfo: {
    id: string
    name: string
    faceUrl: string
  }
}

type HistoryItemType = ExMessageItem & { time: number } & UserInfoType

const active = ref(0)
const historyList = ref<HistoryItemType[]>()

const userStore = useUserStore()

const getRtcMessageToLocalStorage = () => {
  let list = []
  try {
    const storedHistory = localStorage.getItem(
      `${userStore.selfInfo.userID}_rtc_historyList`,
    )
    if (storedHistory) {
      list = JSON.parse(storedHistory)
    }
  } catch (e) {}
  historyList.value = list
}
onMounted(() => {
  getRtcMessageToLocalStorage()
})
</script>

<style lang="scss" scoped>
.van-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  :deep(.van-tabs__content) {
    flex: 1;
    background: #f8f9fa;
    overflow: hidden;
    border-top: 1px solid #e8eaef;

    .van-tab__panel {
      height: 100%;
    }
  }
}
</style>
