<template>
    <div>
        <el-date-picker
            v-model="dateRange"
            class="hide"
            ref="monthPicker"
            type="monthrange"
            @change="onDatePickerChange">
        </el-date-picker>
        <div class="date">
            <div class="tool" @click="chooseDate">
                <img class="tool-icon" :src="dateIcon" alt="" srcset="">
                <span>{{ showDate }}</span>
            </div>
            <div v-if="showRight" class="tool">
                <el-select class="date-select" v-model="jobType" placeholder="请选择" @change="onChangeJobType">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="日常抽查" value="NORMAL"></el-option>
                    <el-option label="专项抽查" value="SPECIAL"></el-option>
                </el-select>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import dateIcon from '@/assets/home/date.png';

export default {
    props: {
        showRight: {
            type: Boolean,
            default: false,
        }
    },
    data () {
        return {
            dateRange: [moment(moment().format('YYYYMM')).toDate(), moment(moment().format('YYYYMM')).toDate()],
            dateIcon,
            jobType: '',
        }
    },
    computed: {
        showDate() {
            let res = [];
            this.dateRange.map(date => {
                res.push(moment(date).format('YYYY.MM'));
            });
            return res.join('—');
        },
    },
    mounted () {
        this.onDatePickerChange();
    },
    methods: {
        chooseDate() {
            const picker = this.$refs.monthPicker;
            if (picker) {
                picker.focus();
            }
        },
        onDatePickerChange() {
            let res = [];
            this.dateRange.map(item => {
                const date = moment(item).format('YYYY-MM-DD');
                res.push(date);
            });
            this.$emit('change', res);
        },
        onChangeJobType() {
            this.$emit('rightAction', this.jobType);
        },
    }
}
</script>

<style lang="scss">
.date-select {
    .el-input__inner {
        width: 120px;
    }
}
</style>

<style lang="scss" scoped>
.hide {
    visibility: hidden;
}
.date {
    display: flex;
    justify-content: space-between;
    .tool {
        display: flex;
        align-items: center;
        cursor: pointer;
        &-icon {
            width: 16px;
        }
        &>span {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin-left: 8px;
        }
    }
}
@media screen and (min-height: 1442px) {
    .tool {
        margin-top: -30px;
    }
}

@media screen and (max-height: 1444px) {
    .tool {
        margin-top: -42px;
    }
}
</style>