<template>
    <MOSTY.PageTree pageTitle="部门值班列表" :isShowLeftTree="false" :searchType="'03'" @getDeptId="getDeptId">
        <template #serach>
            <el-divider />
            <div class="btnBox" v-if="showtable">

                <!-- <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>导出</span>
                </el-button> -->
                <el-button type="primary" @click="changeList">
                    <span>列表切换</span>
                </el-button>
            </div>
        </template>
        <template #table>
            <div class="categary" v-if="!showtable">
                <el-config-provider :locale="zhCn">
                    <el-calendar v-model="dateVal" ref="calendar" :first-day-of-week="1">
                        <template #header="{ date }">
                            <div class="dateTime">{{ date }} {{ date.new }}</div>
                            <div style="font-size: 16px; display: flex; color: #fff">
                                <span class="changeBtn" @click="dialogVisible = true">签到二维码</span>
                                <span class="changeBtn" @click="selectDate('prev-month')">上一月</span>
                                <span class="changeBtn" @click="selectDate('today')">今天</span>
                                <span class="changeBtn" @click="selectDate('next-month')">下一月</span>
                                <!-- 传入部门、开始日期、结束日期，接口暂不开发，先加按钮 -->
                                <!-- <span class="changeBtn" @click="export2Excel" v-loading="loadingShow">值班报表导出</span> -->
                                <span class="changeBtn" @click="changeList">列表切换</span>
                            </div>
                        </template>
                        <template #dateCell="{ data }">
                            <div class="date ddd" @click="chooseDay(data)">
                                <!-- 表示是今天 -->
                                <div class="day">{{ data.day.split("-")[2] }}</div>
                                <!-- 下面的文字 -->
                                <template v-for="(item, index) in dateCount" :key="index">
                                    <div class="lab" v-if="data.day == item.day" @click="changeitem(item)">
                                        <span class="xiufont" v-if="item.dayOff == '1'">休</span>
                                        <div class="pbxx" v-if="item.userName" :title="'值班人员：' + item.userName">
                                            <!-- <span v-html="item.name"></span> -->
                                            {{ item.userName }}
                                        </div>
                                        <div class="wpb" v-if="!item.userName"></div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </el-calendar>
                </el-config-provider>
            </div>
            <section class="eltab8" v-if="showtable">
                <MOSTY.Table :table-columns="tableColumn" :tableData="dateCount" :tableloading="tableloading"
                    :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
                    <template #dayOff="{ row }">
                        <span>{{ row.dayOff == '1' ? '节假日' : '工作日' }}</span>
                    </template>
                    <template #userName="{ row }">
                        <span>{{ row.userName ? '值班人员：' + row.userName : '未排班' }}</span>

                    </template>
                    <template #actions="{ row }">
                        <div v-if="!row.userName">--</div>
                        <span v-else class="operesee" @click="changeitem(row)"><el-icon>
                                <Compass />
                            </el-icon>详情</span>
                    </template>
                </MOSTY.Table>
            </section>

        </template>

    </MOSTY.PageTree>
    <el-dialog v-model="dialogVisible" title="值班签到二维码" width="50%" :close-on-click-modal="false" :show-close="false">
        <div>
            <MOSTY.ErwmImg :url="qrcodepxImg(null, 'zbqd', '')" :filename='"值班签到二维码"' :id='"htmlsmewm1"' />
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false"> <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></el-button>
            </div>
        </template>
    </el-dialog>
    <!--   -->
    <!-- 新增弹出框 -->
    <!-- <div v-if="addDiaShow" class="dialog-box">
        <Zbapinfo :Fromobj="Fromobj" @changeAddVi="changeAddVi" :tabledata="seeData" />
    </div> -->
    <!-- 排版情况 -->
    <div v-if="addpbqkShow" class="dialog-box">
        <Zbpbxqinfo :zbFrom="zbFrom" @changeclose="changeclose" :row="currRow" />
    </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { postApi, getApi } from "@/api/tobAcco_api.js"
import { timeValidate, weekValidate } from "@/utils/tools.js";
import { qrcodepxImg } from "@/utils/tools.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { ElConfigProvider } from 'element-plus'
import dayjs from "dayjs";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { getItem } from "@/utils/storage"
import { useRoute } from "vue-router";
// import Zbapinfo from "./zbapinfo.vue";
import Zbpbxqinfo from "./Zbpbxqinfo.vue";
dayjs.en.weekStart = 1
const listQuery = reactive({})
const dialogVisible = ref(false)
const addDiaShow = ref(false)
const loadingShow = ref(false)
const addpbqkShow = ref(false)
const Fromobj = reactive({})
const zbFrom = reactive({})
const route = useRoute();
const showtable = ref(false)
const dateVal = ref(new Date());
const calendar = ref();
const chooseDate = ref({}); //选择的日期
const dateCount = ref([]); //日历里面的数据
/** 当前选中 */
const currRow = ref({})
const baseDate = reactive({
    year: "",
    week: "",
    bbzt: "值班信息",
    info: null
});
const tableColumn = ref([
    {
        title: "日期",
        prop: "day",
        sortable: true
    },
    {
        title: "是否休息日",
        prop: "dayOff",
        slot: true,
        sortable: true
    },
    {
        title: "值班部门信息",
        prop: "userName",
        slot: true,
        sortable: true
    },
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])
//获取部门数据
const getDeptId = val => {


    getListtab()
}
// 初始化
onMounted(() => {
    listQuery.orgid = getItem("deptId").ssbmid
    listQuery.pageCurrent = 1
    getListtab()
});
//	日历排班值班情况
function getListtab() {
    const params = {
        orgid: listQuery.orgid,
        month: listQuery.month,
    }
    getApi(params, '/mosty-jcgl/onDuty/getOnDutyListByUserDw').then(res => {
        res.forEach(item => {
            item.isuser = item.content?.length > 0
            item.userName = item.content || ''// content
            // item.name = item.userName
        })
        dateCount.value = res
    })
}
//关闭弹窗
function changeAddVi() {
    addDiaShow.value = false
    Fromobj.rwid = null
}


//返回今天、单日统计、月度统计
const selectDate = (val) => {
    if (!calendar.value) return;
    calendar.value.selectDate(val);
    getMonth(Date.parse(dateVal.value));
};
// 获取月份
const getMonth = (val) => {
    let datevalue = Date.parse(calendar.value.modelValue);
    let date = val ? new Date(val) : new Date(datevalue);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    if (month < 10) month = "0" + month;
    let days = getDaysInMonth(year, month);
    listQuery.startTime = `${year}-${month}-01`;
    listQuery.endTime = `${year}-${month}-${days}`;
    listQuery.month = `${year}-${month}`;
    getListtab()
};
// 获取某个月有好多天
const getDaysInMonth = (year, month) => {
    return new Date(year, month, 0).getDate();
};
// 选择某一天
const chooseDay = (val) => {
    baseDate.year = val.day;
    baseDate.week = weekValidate(baseDate.year);
    chooseDate.value = val.day;
    // lookDeatil(val.day);
};
function changeitem(val) {
    zbFrom.title = `${val.day} (${val.dayOff == '1' ? '节假日' : '工作日'})  值班排班情况`
    zbFrom.day = val.day
    zbFrom.orgid = listQuery.orgid
    currRow.value = val || {}
    addpbqkShow.value = true
}
function changeList() {
    showtable.value = !showtable.value
}
function changeclose() {
    addpbqkShow.value = false
    getListtab()
}

</script>
<style lang="scss" scoped>
.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}

::v-deep .el-calendar-table {
    height: calc(100vh - 279px);
}

.changeBtn {
    cursor: pointer;
    margin-right: 10px;
    padding: 1px 10px;
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--el-color-primary);
}

.categary {
    height: calc(100vh - 189px);
    margin-left: 10px;
    padding: 4px;
    box-sizing: border-box;

    .dateTime {
        font-size: 20px;
        color: var(--el-color-primary);
    }


    ::v-deep .el-calendar__body {
        padding: 0;
    }

    ::v-deep .el-calendar-day {
        // padding: 4px;
        height: 100%;
    }


    ::v-deep .el-calendar__header {
        background: #eeeeee;
        border-bottom: 1px solid #ccc;
    }


    .date {
        height: 100%;
        position: relative;




        .day {
            text-align: right;
            font-size: 16px;
            font-weight: 600;
        }
    }
}

::v-deep .el-calendar-table td {
    height: 16%;
    color: #000;
}

::v-deep .el-calendar-table:not(.is-range) td.prev {
    color: #aea9a9 !important;
}



::v-deep .el-calendar-table td.is-today {
    color: var(--el-color-primary) !important;
}

::v-deep .el-calendar-table td.is-selected {
    background-color: var(--el-table-cell-bmx-backgroundcolor);
}

.lab {
    height: 60px;
}

.xiufont {
    display: block;
    position: absolute;
    top: -3px;
    left: 0;
    font-size: 16px;
    font-weight: 600;
    color: red;

}

.pbxx {
    margin-top: 10px;
    text-align: left;
    color: #787373;
    font-size: 16px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.wpb {
    margin-top: 10px;
    text-align: center;
    color: #787373;
    font-size: 16px;
    line-height: 25px;

}
</style>
