<template>
    <div class="bg">
        <m-nav-bar background="#498EF5" mode="white" title="收入明细"></m-nav-bar>

        <van-tabs v-model:active="active" color="#498EF5" title-active-color="#498EF5">
            <van-tab title="收入明细">
                <div class="incomeTable">
                    <table cellspacing="0" style="width:100%">
                        <tr class="head">
                            <th>账单时间</th>
                            <th>套餐名称</th>
                            <th>收入金额(元)</th>
                        </tr>

                        <tr v-for="(item, index) in orderList" :key="index" class="item">
                            <td>{{ item.successTime }}</td>
                            <td>{{ item.goodsName }}</td>
                            <td style="color:#FF4D53"> {{ item.commissionPrice/100 }}</td>
                        </tr>



                    </table>

                </div>
            </van-tab>
            <van-tab title="结算概况">
                <div class="calendar">
                    <div @click="() => {
                        pickerShow = true
                    
                    
                    }" class="year"> 选择年份：2022</div>
                </div>
                <div>
                    <table class="settle-table" style="width:100%" border="0">

                        <th class="table-head">
                            时间
                        </th>
                        <th class="table-head">
                            预估收入(元)
                        </th>
                        <th class="table-head">
                            月结实发金额(元)
                        </th>

                        <tr v-for="(item,index) in incomeList" :key="index">
                            <td class="table-grid">{{item.yearMonth}}</td>
                            <td class="table-grid">{{item.income/100}}</td>
                            <td class="table-grid">{{item.income/100}}</td>
                        </tr>
                    </table>

                </div>
            </van-tab>
        </van-tabs>
        <van-popup v-model:show="pickerShow" round position="bottom">
            <van-picker @cancel="pickerShow = false" @confirm="(val: number)=>{
                year = val

            }" :columns="yearColumns" />
        </van-popup>

        <div class="">

        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import api from '@/api';
import { order } from '@/api/types/order';

export default defineComponent({
    setup() {
        const yearColumns = []
        const incomeList = ref<any>([])
        const year = ref(2022)
        const orderList = ref<order.studentOrderInfoList["rows"]>([])
        const currentYear = new Date().getFullYear()
        for (let index = 0; index < 10; index++) {
            yearColumns.push(currentYear - index)
        }

        api.order.studentOrderInfoList({



        }).then(res => {
            orderList.value = res.data.rows


        })
        api.order.studentOrderInfoSelectMonthIncone({
            year: year.value
        }).then(res => {
            incomeList.value = res.data.rows


        })
        return {
            incomeList,
            year,
            orderList,
            active: ref(0),
            currentDate: ref(''),
            yearColumns: ref(yearColumns),
            pickerShow: ref(false)
        }
    }
})
</script>

<style lang="scss" scoped>
.bg {
    background: #fff;
    min-height: 100vh;
}

.calendar {
    width: 100%;
    height: 82px;

    .year {
        padding-left: 30px;
        text-align: left;
        height: 82px;
        line-height: 82px;
        font-size: 26px;
    }

}

.settle-table {
    border-spacing: 0px;

    .table-head {
        width: 250px;
        color: #8A9099;
        font-size: 26px;
        background: #F2F3F5;
        height: 84px;
        line-height: 84px;

    }

    .table-grid {
        height: 84px;
        line-height: 84px;
        font-size: 26px;
        border-bottom: 2px solid #E8E8E8;

    }

}

.incomeTable {
    padding-top: 20px;

    .head {

        width: 100%;
        height: 84px;
        padding-left: 30px;
        padding-right: 30px;
        color: #8A9099;
        font-size: 26px;

        background: #F2F3F5;

    }

    .item {

        width: 100%;
        height: 84px;

        font-size: 26px;


        background: #fff;

        td {
            border-bottom: 2px solid #E8E8E8;
        }
    }


}
</style>