<template>
    <div class="time-select">
        <div class="total-num">
            <div class="title">总次数：</div>
            <div class="data">{{ totalNum }}</div>
        </div>
        <div class="select-btn">
            <div class="month btn" :class="{ 'selected': timeMode === 'month' }" @click="handleChangeMode('month')">按月</div>
            <div class="year btn" :class="{ 'selected': timeMode === 'year' }" @click="handleChangeMode('year')">按年</div>
        </div>
        <div class="time-choose">
            <a-select v-model:value="timeValue" style="width: 100%" :options="timeOpts">
            </a-select>
        </div>
    </div>
</template>
<script>
import { defineComponent, nextTick, onBeforeMount, reactive, ref, toRef, watch } from 'vue';
import moment from 'moment';

const props = {
    totalNum: {
        type: String,
        default: '0'
    }
}
export default defineComponent({
    name: 'timeSelect',
    components: {},
    props,
    emits: ['timeChange'],
    setup(props, { emit }) {
        const timeMode = ref('month')
        const timeOpts = ref([])
        for (let i = 1; i <= 12; i++) {
            timeOpts.value.push({
                label: `${i}月`,
                value: `${i}`
            })
        }
        const timeValue = ref(moment().month() + 1 + '')

        watch(
            () => timeValue.value,
            (val) => {
                emit('timeChange', { mode: timeMode.value, time: val })
            }
        )
        const totalNum = ref(props.totalNum)
        watch(
            () => props.totalNum,
            (val) => {
                totalNum.value = val
            }
        )

        const handleChangeMode = (mode) => {
            timeMode.value = mode
            timeOpts.value = []
            if (mode === 'month') {
                timeValue.value = moment().month() + 1 + ''
                for (let i = 1; i <= 12; i++) {
                    timeOpts.value.push({
                        label: `${i}月`,
                        value: `${i}`
                    })
                }
            } else {
                timeValue.value = moment().year() + ''
                for (let i = timeValue.value - 5; i <= timeValue.value; i++) {
                    timeOpts.value.push({
                        label: `${i}年`,
                        value: `${i}`
                    })
                }
            }
        }
        return {
            timeMode,
            timeOpts,
            timeValue,
            totalNum,
            handleChangeMode,
        };
    },
});
</script>
<style scoped lang="less">
.time-select {
    position: absolute;
    display: flex;
    top: 10px;
    right: 10px;
    align-items: center;

    .total-num {
        display: flex;

        .title {
            font-family: 思源黑体;
            font-size: 16px;
            color: #3D3D3D;
        }

        .data {
            font-family: 思源黑体;
            font-size: 18px;
            font-weight: 500;
            color: #0671DD;
        }
    }

    .select-btn {
        margin-left: 10px;
        display: flex;

        .btn {
            width: 48px;
            height: 24px;
            border-radius: 180px;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .selected {
            background: #0671DD;
            color: aliceblue;
        }
    }

    .time-choose {
        margin-left: 10px;
        width: 80px;

        ::v-deep .ant-select {
            color: #0671DD;

            .ant-select-selector {
                border-radius: 150px;
                background: rgba(6, 113, 221, 0.1412);
                padding: 0 0 0 7px;
            }
            // .ant-select-arrow{
            //     right: 20px;
            // }
        }
    }
}
</style>
  
  
  