<template>
    <div class="main">
        <div class="title">
            <div class="left">
                <i class="icon"></i>
                <span class="text">
                    <b>{{ text }}</b>
                </span>
            </div>
            <div class="right" v-if="isRight">
                <el-select class="right-select" v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <!-- <span class="year">{{ year }}</span>
                <div class="right-box">
                    <p
                        v-for="i in times"
                        :key="i.key"
                        :class="{active: active == i.key}"
                        @click="handleTime(i)"
                    >
                        {{ i.name }}
                    </p>
                </div> -->
            </div>
            <div class="right" v-if="isRightYear">
                <span class="year">{{ year }}</span>
                <div class="right-box">
                    <p
                        v-for="i in times"
                        :key="i.key"
                        :class="{active: active == i.key}"
                        @click="handleTime(i)"
                    >
                        {{ i.name }}
                    </p>
                </div>
            </div>
        </div>
        <div class="main-right" v-if="rightText">
            <span>{{ rightText }}</span>
            <span>：</span>
            <span>{{ rightNum }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Title',
    props: {
        text: {
            type: String,
            request: true,
        },
        isRight: {
            type: Boolean,
            default: false,
        },
        isRightYear: {
            type: Boolean,
            default: false,
        },
        rightText: {
            type: String,
            default: '',
        },
        rightNum: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            year: new Date().getFullYear(),
            mouth: new Date().getMonth(),
            active: 'mouth',
            times: [],
            value: '1',
            options: [
                {
                    value: '1',
                    label: '本月',
                },
                {
                    value: '2',
                    label: '上月',
                },
            ],
        }
    },
    created() {
        let {year, mouth} = this
        let lastDate = this.getLastDay(year, mouth)
        mouth = mouth + 1
        this.times = [
            {
                key: 'year',
                name: '年',
                value: [`${year}-01-01`, `${year}-12-31`],
            },
            {
                key: 'mouth',
                name: '月',
                value: [
                    `${year}-${mouth > 10 ? mouth : '0' + mouth}-01`,
                    `${year}-${mouth > 10 ? mouth : '0' + mouth}-${lastDate}`,
                ],
            },
        ]
    },
    methods: {
        // 获取某一个月最后一天
        getLastDay(year, month) {
            const date1 = new Date(year, month, 0)
            return date1.getDate()
        },
        handleTime(item) {
            this.active = item.key
            this.$emit('changeTime', item.value)
        },
    },
}
</script>

<style lang="scss" scoped>
p {
    margin: 0;
    padding: 0;
}
.main {
    display: flex;
    justify-content: space-between;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
.left {
    display: flex;
    align-items: center;
    width: 70%;
}
.right {
    display: flex;
    align-items: center;
    width: 90px;
    .year {
        font-size: 14px;
        color: #3dafff;
    }
    .right-box {
        width: 70px;
        line-height: 20px;
        padding: 0 3px;
        border-radius: 5px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 1px solid #19375a;
        background: #1b406c;
        border-radius: 3px;
        cursor: pointer;
        .active {
            color: #8cbcde;
        }
        p {
            color: #1b67b9;
            font-size: 13px;
            &:hover {
                color: #fff;
            }
        }
    }
}
.icon {
    display: block;
    width: 22px;
    height: 23px;
    transform: scale(0.8);
    background: url('../img/ICON.png') no-repeat 100% 100%;
}
.text {
    display: block;
    width: 70%;
    //   height: 22px;
    margin-left: 10px;
    //   background: url('../img/BG.png') no-repeat 100% 100%;
    background-image: linear-gradient(to right, rgba(73, 153, 255, 0.6), transparent);
    //   line-height: 22px;
    b {
        font-size: 13px;
        font-style: italic;
        text-shadow: 1px 1px 2px #000;
    }
}
.main-right {
    margin-right: 30px;
}
.right-select {
    margin-bottom: 0;
    margin-right: 0;
}
</style>
