<script lang="ts">
export default {
    name: "stationboard", // 变电站首页
};
</script>
<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from "vue";
import { getdata } from "@/api/patrolmonitorMonth";
import { useUserStore } from '@/store/modules/user';
import PatrolDetails from '@/views/task/patrolDetails/index.vue';
const userStore = useUserStore();
const weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
const calendar = ref()
const selectDate = (val: string, date: any) => {
    const year = ref()
    const month = ref()
    if (val == 'prev-year') {
        year.value = parseInt(date.substr(0, 4)) - 1
        month.value = parseInt(date.substr(6, 3))
    } else if (val == 'next-year') {
        year.value = parseInt(date.substr(0, 4)) + 1
        month.value = parseInt(date.substr(6, 3))
    } else if (val == 'prev-month') {
        month.value = parseInt(date.substr(6, 3)) - 1
        year.value = parseInt(date.substr(0, 4))
    } else if (val == 'next-month') {
        month.value = parseInt(date.substr(6, 3)) + 1
        year.value = parseInt(date.substr(0, 4))
    } else if (val == 'today') {
        year.value = new Date().getFullYear()
        month.value = new Date().getMonth() + 1
    }
    info.value.year = year.value
    info.value.month = month.value
    getData()
    calendar.value.selectDate(val)
}
const info: any = ref({
    stationCode: userStore.stationCode,
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
})
const tableData: any = ref([
    {
        date: "2023-05-06",
        count: 30,
    }
])
function getData() {
    getdata(info.value).then((res: any) => {
        tableData.value = res.data
    })
}
const reverseMsg = computed(() => {
    return (data: any) => {
        return tableData.value.filter((res: any) => {
            let time = res.date;
            return time == data.day;
        });
    }

})
onMounted(() => {
    getData()

})
const PatrolDetailsInfo:any=ref({})
const isPatrolDetails = ref(true)
function clickDetail(row:any){
    // :PatrolDetailsInfo="PatrolDetailsInfo" 
    PatrolDetailsInfo.value.taskTodoId =  row.taskTodoId,
    PatrolDetailsInfo.value.isStationFlag = row.isStationFlag
    isPatrolDetails.value = false;
}
function retrunClick(){
  isPatrolDetails.value = true;
}
</script>
<template>
    <div>
        <!-- <div>巡视监控（月</div> -->
        <div v-show="isPatrolDetails == true" class="rightNav">
            <div style="position: relative; width: 98%;margin: auto;padding-top: 10px;">
                <el-scrollbar height="calc(100vh - 100px);" style="height:calc(100vh - 150px); ;">
                    <el-calendar ref="calendar">
                        <template #header="{ date }">
                            <div style="display: flex;align-items: center;width: 200px;justify-content: space-between;">
                                <div style="cursor:pointer; " @click="selectDate('prev-month', date)"><img
                                        src="@/assets/tableIcon/patrolmonitor/u2681.png" style="width: 11px;height: 15px;" alt="">
                                </div>
                                <div style="cursor:pointer; color: #fff;font-size: 20px;font-weight: 700; "
                                    @click="selectDate('today', date)">{{
                                        date }}
                                </div>
                                <div style="cursor:pointer;" @click="selectDate('next-month', date)"><img
                                        src="@/assets/tableIcon/patrolmonitor/u2681right.png" alt=""
                                        style="width: 11px;height: 15px;">
                                </div>
                            </div>
                        </template>
                        <template #dateCell="{ data }">
                            <div style="width:100%;">
                                <div>
                                    {{ data.day.split("-").slice(2).join("-") }}
                                </div>
                                <div v-for="(item, index) in reverseMsg(data)" :key="index"
                                    style="color: #fff;position: relative; width: 100%;position: relative; ">
                                    <div @click=" item.status = 1" style="font-size: 14px;padding:0px 3px;height: 18px;background-color:#FFBD00 ;line-height: 18PX;
                                    position: absolute;top: -30px;right: 0px;border-radius: 2px;color: #000;">
                                        {{ item.count }}</div>
                                    <div v-for="(itemlist, indexlist) in item.list1" :key="indexlist"
                                        style="display: flex;align-items: center;">
                                        <div v-show="itemlist.taskState == 1"><img src="@/assets/MenuIcon/xsri_wc.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 2"><img src="@/assets/MenuIcon/xsri_zx.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 0"><img src="@/assets/MenuIcon/xsri_dzx.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 5"><img src="@/assets/MenuIcon/xsri_wzx.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 6"><img src="@/assets/MenuIcon/xsri_cq.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 3"><img src="@/assets/MenuIcon/xsri_cq.png"
                                                alt="">
                                        </div>
                                        <div v-show="itemlist.taskState == 4"><img src="@/assets/MenuIcon/xsri_zz.png"
                                                alt="">
                                        </div>
                                        <div class="Detail" @click="clickDetail(itemlist)">
                                            <div style="font-size: 14px;margin-left: 3px;">{{
                                                itemlist.planStartTime.substring(10)
                                            }}</div>
                                            <div
                                                style="font-size: 14px;margin-left: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; width: 160px;">
                                                {{ itemlist.taskName }}</div>
                                        </div>
                                    </div>

                                    <div @click="item.status = 0" v-if="item.status == 1"
                                        style="width:100%;height: 100%;position: fixed;top: 0;left: 0; z-index: 1;"></div>
                                    <div class="popUp" v-if="item.status == 1">
                                        <div class="popUp-title"
                                            style=" overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span
                                                style="display: inline-block; width: 20px;"></span>{{
                                                    data.day + " " + ' ' + '星期' + weekArray[new Date(data.day).getDay()] }}
                                            <img @click="item.status = 0"
                                                style="display: inline-block;margin-left: 48px;cursor:pointer;"
                                                src="@/assets/MenuIcon/u859.png" alt="">
                                        </div>
                                        <el-scrollbar height="320px" class="popUp-body ">
                                            <div class="popUp-content" v-for="row, rowIndex in item.list" :key="rowIndex">
                                                <div v-show="row.taskState == 1"  style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_wc.png" 
                                                        alt="">
                                                </div> 
                                                <div v-show="row.taskState == 2" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_zx.png" 
                                                        alt="">
                                                </div>
                                                <div v-show="row.taskState == 0" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_dzx.png" 
                                                        alt="">
                                                </div>
                                                <div v-show="row.taskState == 5" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_wzx.png" 
                                                        alt="">
                                                </div>
                                                <div v-show="row.taskState == 6" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_cq.png" 
                                                        alt="">
                                                </div>
                                                <div v-show="row.taskState == 3" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_cq.png" 
                                                        alt="">
                                                </div>
                                                <div v-show="row.taskState == 4" style="width: 8px;height: 8px;"><img src="@/assets/MenuIcon/xsri_zz.png" 
                                                        alt="">
                                                </div>
                                                <div style="font-size: 14px;margin-left: 3px;">
                                                    {{
                                                        row.planStartTime.substring(10)
                                                    }}</div>
                                                <div
                                                    style="font-size: 14px;margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 145px;">
                                                    {{ row.taskName }}</div>
                                                <div
                                                    :class="new Date(data.day).getDay() == 5 || new Date(data.day).getDay() == 6 ? 'Window' : 'Window1'">
                                                    <img class="window-back" src="@/assets/MenuIcon/xsyue_rwnj.png" alt="">
                                                    <div class="Window-specific">
                                                        <img style="margin-top: 15px;margin-left: 50%;transform: translate(-50%);position: absolute;"
                                                            src="@/assets/MenuIcon/renwu.png" alt="">
                                                        <div class="window-text" style="">{{ row.taskName }}</div>
                                                        <div class="window-box">
                                                            <div class="window-text-bottom">执行时间&nbsp;&nbsp;:&nbsp;&nbsp;{{
                                                                row.planStartTime }}</div>
                                                            <div class="window-text-bottom">任务类型&nbsp;&nbsp;:&nbsp;&nbsp;
                                                                <span v-if="row.taskType == 1">站端日常巡视任务</span>
                                                                <span v-else-if="row.taskType == 2">上级系统控制</span>
                                                                <span v-else-if="row.taskType == 3">区域巡视系统控制</span>
                                                                <span v-else-if="row.taskType == 4">主辅设备联动</span>
                                                            </div>
                                                            <div class="window-text-bottom">任务状态&nbsp;&nbsp;:&nbsp;&nbsp;
                                                                <span v-if="row.taskState == 0">待执行</span>
                                                                <span v-else-if="row.taskState == 1">已完成</span>
                                                                <span v-else-if="row.taskState == 2">执行中</span>
                                                                <span v-else-if="row.taskState == 3">暂停</span>
                                                                <span v-else-if="row.taskState == 4">终止</span>
                                                                <span v-else-if="row.taskState == 5">未执行</span>
                                                                <span v-else-if="row.taskState == 6">超期</span>
                                                                <span v-else>--</span>
                                                            </div>
                                                            <div class="window-text-bottom">巡视结果&nbsp;&nbsp;:&nbsp;&nbsp;暂无
                                                            </div>
                                                            <div class="window-text-bottom">
                                                                任务详情&nbsp;&nbsp;:&nbsp;&nbsp;<span
                                                                    @click="clickDetail(row)"
                                                                     style="color:#409eff ;">查看详情</span> </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </el-scrollbar>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </el-scrollbar>
            </div>
        </div>
        <PatrolDetails :PatrolDetailsInfo="PatrolDetailsInfo" v-if="isPatrolDetails == false"
        @retrunClick="retrunClick"></PatrolDetails>
    </div>
</template>
<style scoped lang="scss">
.Detail{
    display: flex;
    color: #fff;
    align-items: center;
}
.Detail:hover{
    color: rgb(0, 155, 255);
}

.rightNav {
    width: 99%;
    // height: calc(100vh - 95px);
    margin: 8px;
    position: relative;
    background: url(@/assets/MenuIcon/xsyue_bj.png);
    background-size: 100% 100%;
}

.popUp {
    position: absolute;
    bottom: -140px;
    z-index: 100;
    width: 100%;
    height: 360px;

    .popUp-title {
        // width: ;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        background-color: #409eff;
    }

    .popUp-body {
        width: 100%;
        height: 320px;
        // overflow: auto;
        border: #409eff solid 1px;
        background-color: rgb(18, 28, 37);
        border-top: none;

        .popUp-content {
            width: 95%;
            margin: auto;
            height: 44px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
            padding-left: 5px;

            .Window1 {
                width: 460px;
                height: 240px;
                position: absolute;
                top: 0;
                right: -420px;
                z-index: 100;
                display: none;

            }

            .Window {
                width: 460px;
                height: 240px;
                position: absolute;
                top: 0;
                left: -420px;
                z-index: 100;
                display: none;
            }

            .Window-specific {
                position: relative;
                width: 400px;
                height: 240px;
                z-index: 100;

                .window-text {
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    width: 100%;
                    font-size: 16px;
                    font-weight: 700;
                    color: #409eff;
                    margin-top: 15px;
                    margin-left: 50%;
                    transform: translate(-50%);
                    position: absolute;

                }

                .window-box {
                    padding: 65px 0px 0px 25px;
                }

                .window-text-bottom {
                    font-size: 14px;
                    margin-bottom: 10px;

                }
            }

            .window-back {
                position: absolute;
                z-index: 99;
            }
        }

        .popUp-content:hover {
            background-color: #409eff;

            .Window {
                display: block;
            }

            .Window1 {
                display: flex;
                justify-content: flex-end;
                // display: block;
            }
        }
    }
}

:deep(.el-calendar__header) {
    justify-content: space-around !important;
    align-items: center !important;
    border: none;
}

:deep(.el-calendar) {
    --el-calendar-cell-width: 120px;
    background-color: #ffffff00;
}

:deep(.el-calendar-table__row) {
    width: 100%;
}

:deep(.el-calendar-table__row td) {
    width: 265px;
    z-index: 100;
    color: #fff;
    box-sizing: border-box;
    border-color: rgb(34, 55, 71);
}

:deep(.el-calendar-table__row .is-selected) {
    background-color: transparent;
    z-index: 100;
}

:deep(.el-calendar-table__row .is-today) {
    display: inline-block;
    color: #fff;
    width: 100%;
    z-index: 100;
    background-color: rgb(21, 69, 119);
    border:1px solid rgb(181, 215, 255)!important;
    // overflow: hidden;
}

:deep(.el-calendar-table__row td div div) {
    font-size: 26px;
}

:deep(.el-calendar-table tr td:first-child) {
    border-color: rgb(34, 55, 71);
}

:deep(.el-calendar-table tr:first-child td) {
    border-color: rgb(34, 55, 71);
}

:deep(.el-calendar-table tbody) {
    width: 100%;
}

:deep(.el-calendar-table thead th) {
    box-sizing: border-box;
    border: 1px solid rgb(34, 55, 71);
    border-bottom: none;
    color: #fff;
    // width: ;
}

:deep(.el-scrollbar) {
    overflow: visible !important;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
    background-color: transparent;
}
.ziti{
    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
}
:deep(.patrolDetailstopbox){
    padding: 0;
}

</style>