<template>
    <el-config-provider :locale="localeZH">
        <el-date-picker v-model="date" @change="changeDate" style="background-color: #001E31;  width: 10vw;"
            type="daterange" range-separator="-">
        </el-date-picker>
    </el-config-provider>
</template>



<script setup>
import { ref, reactive } from 'vue'
import localeZH from 'element-plus/es/locale/lang/zh-cn'

import { areaObj } from "@/store/index.js"
const areaStore = areaObj()


// 将时间对象转化为年月日
const getTime = (time) => {
    var date =time
    var year = date.getFullYear();
    var month = (date.getMonth() + 1).toString().padStart(2, '0');
    var day = date.getDate().toString().padStart(2, '0');

    var formattedDate = year + '-' + month + '-' + day;

    return formattedDate
}

const date = ref([areaStore.time[0], areaStore.time[1]])
const changeDate = (e) => {
    areaStore.changeTime([getTime(e[0]),getTime(e[1])])
}

</script>


<style lang="scss">
:deep(.el-picker-panel__body) {
    font-size: 26px;
    text-align: center;
    color: rgb(8, 101, 172);
    background-color: red;
}

#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(2) {
    color: #C7DBE3 !important;
}

#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(4) {
    color: #C7DBE3;
}

#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>span {
    color: #C7DBE3;
}

.el-picker-panel {
    background-color: #001E31;
    color: white;
}

.end-date .el-date-table-cell {
    border-radius: 0 !important;
}

.start-date .el-date-table-cell {
    border-radius: 0 !important;
}

.in-range .el-date-table-cell {
    background-color: transparent !important;
    border: 1px solid #41A5BEed;
    box-shadow: inset 0 0 10px #41A5BEed !important;
}

.el-date-table td.end-date .el-date-table-cell__text,
.el-date-table td.start-date .el-date-table-cell__text {
    background-color: transparent;

}

.el-date-range-picker__content.is-left {
    border-right: 1px solid #2C4D54;
}

.el-popper.is-light {
    border: 0;
}

.el-date-table th {
    border-bottom: 1px solid #2C4D54;
}

.el-date-table th {
    color: white;
}
</style>