<template>
    <div class="equipment_dialog">
        <div class="equipment_content">
            <div class="equip_title">
                装备信息
            </div>
            <div class="sub_title">
                <span class="title_text">XF986F轮胎式挖掘机</span>
                <span class="sub_status">(在租)</span>
            </div>
            <div class="more_info">
                <span style="padding-left: 0;">操作重量：7吨 </span>
                <span>
                    铲斗容量：2立方米
                </span>
                <span>
                    租赁方：XXXXXXXXXX有限公司
                </span>
                <span>
                    租赁日期：2023.09.12-2024.09.12
                </span>
            </div>
            <div class="time_select">
                <el-date-picker v-model="timeRange" size="media" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
                    start-placeholder="Start date" end-placeholder="End date" />
                <el-button type="primary" style="margin-left: 12px;"  size="media" >查询</el-button>
            </div>
            <div class="map_line_out">
                <mapLine></mapLine>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import mapLine from "components/mapBaidu/mapLine.vue"
const timeRange = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
])
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

</script>

<style scoped lang="scss">
.equipment_dialog {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.equipment_content {
    width: 1148px;
    height: 596px;
    padding: 0px 60px 35px;
    background-image: url("../../assets/img/mapBg.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.equip_title {
    font-size: 25px;
    color: #fff;
    font-weight: bold;
    height: 49px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 15px;
}

.sub_title {
    height: 41px;
    padding-top: 35px;
    .title_text {
        font-size: 27px;
        color: #fff;
        font-weight: bold;
    }

    .sub_status {
        padding: 0 4px;
        color: #70FBFF;
        font-size: 20px;
    }
}

.more_info {
    padding-bottom: 25px;
    height: 16px;
    font-size: 16px;
    color: #fff;

    span {
        padding-left: 20px;
    }
}
.map_line_out{
    width: 1030px;
    height: 374px;
    padding-top: 25px;
}
</style>