<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="签到记录" @back="goBack" />
            <view class="mi-mod-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': activeFilter === tab.key }"
                    hover-class="mi-tap-tab--hover"
                    :hover-stay-time="150"
                    @tap="activeFilter = tab.key"
                >
                    <text class="bt-tab__text">{{ tab.label }}</text>
                </view>
            </view>
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">共 {{ filteredList.length }} 条记录</text>
                    <view
                        v-for="item in filteredList"
                        :key="item.id"
                        class="mi-mod-checkin-row"
                        hover-class="mi-tap-row--hover"
                        :hover-stay-time="150"
                        @tap="showDetail(item)"
                    >
                        <view class="mi-mod-checkin-row__icon" :class="'mi-mod-checkin-row__icon--' + item.tagTheme">
                            <image class="mi-mod-checkin-row__icon-img" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png" mode="aspectFit" />
                        </view>
                        <view class="mi-mod-checkin-row__info">
                            <text class="mi-mod-checkin-row__title">{{ item.title }}</text>
                            <text class="mi-mod-checkin-row__time">{{ item.time }} · {{ item.location }}</text>
                        </view>
                        <view class="mi-mod-checkin-row__tag" :class="'mi-mod-checkin-row__tag--' + item.tagTheme">
                            <text class="mi-mod-checkin-row__tag-text">{{ item.tag }}</text>
                        </view>
                    </view>
                    <view v-if="!filteredList.length" class="bt-empty">
                        <text class="bt-empty__text">暂无签到记录</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { moduleMock, getCheckInHistory } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'

export default {
    components: { MemberInfoSubNav },
    mixins: [subPageMixin],
    data() {
        return {
            tabs: moduleMock.checkInTabs,
            activeFilter: 'all',
            list: []
        }
    },
    computed: {
        filteredList() {
            if (this.activeFilter === 'all') return this.list
            return this.list.filter((i) => i.tagTheme === this.activeFilter)
        }
    },
    onShow() {
        const store = loadMemberStore()
        this.list = getCheckInHistory(store, 'all')
    },
    methods: {
        showDetail(item) {
            uni.showModal({
                title: item.title,
                content: `${item.time}\n地点：${item.location}\n类型：${item.tag}`,
                showCancel: false
            })
        }
    }
}
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';
</style>
