<template>
    <el-dialog width="70%" @open="opened" @closed="closed" :fullscreen="true" :show-close="true" class="dialogs">
        <template #title>
            <div class="showTitles currentShowTitles">
                <div class="titles">检修推荐</div>
            </div>
        </template>
        <div class="body">
            <div class="searchTitle">
                <div class="search">
                    <div class="date">日期:</div>
                    <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="month">
                    </el-date-picker>
                </div>

                <div class="buttons" @click="getWarning()">查询</div>
            </div>
            <div class="calendar">
                <div class="week">
                    <div class="week-item">星期一</div>
                    <div class="week-item">星期二</div>
                    <div class="week-item">星期三</div>
                    <div class="week-item">星期四</div>
                    <div class="week-item">星期五</div>
                    <div class="week-item">星期六</div>
                    <div class="week-item">星期日</div>
                </div>
                <div class="week-content">
                    <div :class="item.id>0?'content-item':'content-item-none'" v-for="(item, index) in dataList" :key="index">
                        <div class="dateTitle" v-if="item.id>0">{{month}}/{{item.id}}</div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import api from "api/index";
export default {
    components: {
    },
    data() {
        return {
            timeValue:'',
            dataList: []
        };
    },
    created() {

    },
    mounted() { },
    methods: {
        opened() {
            let date = new Date();
            this.timeValue = date.getTime()
            this.arrayDeal()
        },
        closed() {

        },
        changes(){
            this.arrayDeal()
        },
        arrayDeal(){
            this.dataList = [] 
            let year = new Date(this.timeValue).getFullYear()
            let month = new Date(this.timeValue).getMonth() + 1
            this.month = month
            let MonthDayNum = new Date(year,month,0).getDate(); 
            let weekList = [7, 1, 2, 3, 4, 5, 6]
            let res = new Date(month + '/' + 1 + '/' + year);
		    let reNum = weekList[res.getDay()]
            let arr = []
            let list = []
            for (let index = 1; index < reNum; index++) {
                let obj = {
                    id: 0
                }
                arr.push(obj)
            }
            for (let index = 1; index <= MonthDayNum; index++) {
                let obj = {
                    id: index,
                    children: []
                }
                list.push(obj)
            }
            this.dataList = [...arr, ...list]
        }
    },
};
</script>
<style lang="less" scoped>
.body {
    display: flex;
    flex-direction: column;
    background-color: #000000;
    height: 90vh;
    width: 102%;
    margin-left: -1%;
    margin-top: -40px;
    overflow-y: auto;
}

.body::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.searchTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 3vw;
    padding-top: 10px;
    color: #ffffff;
}

.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 50px;
}

.date {
    margin-right: 10px;
    font-size: 16px;
}

.tables {
    margin-left: 3vw;
    padding-top: 10px;
}

.lable {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 75px;
    padding-top: 10px;
}

.lable-item {
    font-size: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 16%;
    color: #ffffff;
    margin-bottom: 10px;
}

.el-table {
    position: static;
    background-color: #141414;
}

.inputs {
    border: none;
    width: 174px !important;
    background-color: #292929;
    height: 40px;
    color: #ffffff;
}
.calendar{
    display: flex;
    flex-direction: column;
    margin-left: 3vw;
    width: 96%;
    .week{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #999999;
        color: #ffffff;
        font-size: 16px;

        .week-item{
            width: 14.28%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .week-content{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;

        .content-item{
            width: 14.28%;
            min-height: 15vh;
            // background-color: greenyellow;
            border-top: 1px solid #999999;
            .dateTitle{
                width: 100%;
                height: 30px;
                padding-left: 10px;
                color: #ffffff;
                font-size: 16px;
                display: flex;
                align-items: center;
            }
        }
        .content-item-none{
            width: 14.28%;
            min-height: 15vh;
            border-top: 1px solid #999999; 
        }
    }

}
</style>
  