<template>
    <div class="periodExchange">
        <m-header v-if="headerStatus" />

        <van-list v-model="loading" v-if="dataShow" key="data"
            :finished="finished"
            finished-text="- 没有更多数据了 -"
            @load="getAccountDetail">
            <van-cell-group>
                <van-cell  v-for="(item, index) in dataList" :key="index" :center="true">
                    <template slot="title">
                        <p class="exchangeText">兑换{{ item.transMinutes }}</p>
                    </template>
                    <template slot="label">
                        <p class="info">{{ item.createTime }}</p>
                    </template>
                    <template slot="default">
                        <p class="exchangeText enum">+{{ item.transMinutes }}</p>
                        <p class="info">剩余{{ item.totalAvailableMinutes }}</p>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty class="empty" msg="暂无兑换记录" v-else key="data" />
    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import MEmpty from '@/components/MEmpty'
import { browser, calcMinute }  from '@/common/common'
import { queryTenantAccountDetail } from '@/api/app'

export default {
    name: 'courseApply',
    components: { MHeader, MEmpty },
    data() {
        return {
            headerStatus: true,
            loading: false,
            finished: false,
            params: {
                search: null,
                transType: 'RECHARGE',
                page: 1,
                rows: 20
            },
            dataShow: true, // 是否有数据
            dataList: []
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        document.title = '兑换记录'
        if(browser().android || browser().iPhone) {
            this.headerStatus = false
        }
    },
    methods: {
        getAccountDetail() {
            let params = this.params
            queryTenantAccountDetail(params).then(res => {
                let result = res.data
                this.loading = false
                if(result.code == 200) {
                    params.page = result.data.pageNo
                    let tempResult = result.data.rows ? result.data.rows : []
                    tempResult.forEach(item => {
                        item.totalAvailableMinutes = calcMinute(item.totalAvailableMinutes)
                        item.transMinutes = calcMinute(item.transMinutes)
                    })
                    this.dataList = this.dataList.concat(tempResult)
                    if(params.page >= result.data.totalPage) {
                        this.finished = true
                    }
                    this.params.page++
                } else {
                    this.finished = true
                }
                // 判断是否有数据
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }
            })
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodExchange {
    min-height: 100vh;
    overflow: hidden;
    .exchangeText {
        font-size: .17rem;
        color: #1A1A1A;
        line-height: .24rem;
        &.enum {
            color: #2FB371;
        }
    }
    .info {
        font-size: .14rem;
        color: #808080;
    }
    /deep/.van-cell {
        padding: .14rem .16rem;
    }
}
</style>