<template>
    <div class="page-header">
        <div class="headerTitle">
            我的日程
            <div class="rightBtn" @click="addSchedule">{{ moment(selectDay).format('YYYY-MM') }}
                <el-icon style="margin-left: 10px;background-color: #0066ff;color:#fff;border-radius: 50%;"><Plus /></el-icon>
            </div>
        </div>
        <div>
            <el-row>
                <el-col :span="2">
                    <!-- 左 切换日历箭头 --> 
                    <!-- <left-outlined style="font-size: 14px; color: #909090" /> -->
                    <a @click="lastWeek" style="line-height: 39px;"><el-icon><ArrowLeft /></el-icon></a>
                </el-col>
                <el-col :span="20">
                    <el-row justify="space-around">
                        <el-col style="text-align: center;" :span="3" v-for="(item, index) in weekName" :key="index">
                            <!-- 日历上方 每周 -->
                            <div class="treat_date subtitle_public">
                                <span style="color: #bababa;">{{item}}</span>
                            </div>
                            <!-- 日历下方 具体 日期 -->
                            <!-- :class="store.selectCalendar === store.day[index]?'treat_click':null" -->
                            <div class="treat_date subtitle_public" v-if="weekData[index] === selectDay" style="background-color: #0066ff;border-radius: 18px;margin-top: 5px;color: #fff;" @click="handleClickCalendar(weekData[index])">
                                <span style="font-size: 16px;line-height: 36px;">{{getDayNumber(weekData[index])}}</span>
                            </div>

                            <div class="treat_date subtitle_public" style="margin-top: 5px;" v-else @click="handleClickCalendar(weekData[index])">
                                <span v-if="weekData[index] !== today" style="font-size: 16px;line-height: 36px;">{{getDayNumber(weekData[index])}}</span>
                                <span v-else style="color: #0066ff;font-size: 16px;line-height: 36px;">{{getDayNumber(weekData[index])}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="2" style="text-align: right;">
                    <!-- 右 切换日历箭头 -->
                    <!-- <right-outlined style="font-size: 14px; color: #909090" /> -->
                    <a @click="nextWeek" style="line-height: 39px;"><el-icon><ArrowRight /></el-icon></a>
                </el-col>
            </el-row>
            <div>
                <ul v-if="works && works.length"
                    class="list"
                    >
                    <li v-for="(item, index) in works" :key="item.scheduleId" class="work-item">{{ `${index + 1}. ${item.name}` }}</li>
                </ul>
                <el-empty v-else  :image-size="36" />

            </div>
        </div>

        <page-modal
        :defaultInfo="defaultInfo"
        ref="pageModalRef"
        :mainKey="'id'"
        :otherInfo="otherInfo"
        pageName="/system/schedule"
        :modalConfig="modalConfigRef"
        @submit="handleSubmit"
        ></page-modal>
    </div>
</template>
<script setup>
    import { onMounted, ref } from 'vue';
    import PageModal from '@/components/page-modal'
    import { usePageModal } from '@/hooks/use-page-modal'
    import { modalConfig } from './config/model.config'
    import { getPageListData } from '@/api/main/system/system';
    import pendingIcon from '@/assets/images/pendingIcon.png'
    import unfinishIcon from '@/assets/images/unfinishIcon.png'
    import finishIcon from '@/assets/images/finishIcon.png'
    import overDueIcon from '@/assets/images/overDueIcon .png'
    import moment from 'moment';
    const weekName = ref(['一', '二', '三', '四', '五', '六', '日' ])
    const weekData = ref([])
    const cycle = ref(0)
    const today = ref(moment().format('YYYY-MM-DD'))
    const selectDay = ref(moment().format('YYYY-MM-DD'))
    // const count = ref(10)
    // const loading = ref(false)
    // const noMore = computed(() => count.value >= 20)
    //     const disabled = computed(() => loading.value || noMore.value)
    // const load = () => {
    // loading.value = true
    // setTimeout(() => {
    //     count.value += 2
    //     loading.value = false
    // }, 2000)
    // }

    // 1.处理逻辑
    const newCallback = () => {
        // getWorks();
    }
    const editCallback = () => {}

    // 2.动态添加部门和角色列表
    const modalConfigRef = computed(() => {
      return modalConfig
    })
    // 3.调用hook获取公共变量和函数
    const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
      usePageModal(newCallback, editCallback)

     

    const getDayNumber = (time) => {
        if (time) return time.substring(8);
        return '';
    }
    // 上一周 切换
    const lastWeek = ()=>{
        cycle.value = cycle.value-7
        getWeekData()
    }
    // 下一周 切换
    const nextWeek = ()=>{
        cycle.value = cycle.value + 7
        getWeekData()
    }
    // 点击日历 某个日期 进行选中
    const handleClickCalendar = (day) => {
        selectDay.value = day
        getWorks()
    }
    function getWeekData() {
        let time = moment(moment().weekday(cycle.value)).startOf('week')
        let weekArr = []
        for(let i = 0; i < 7 ; i++) {
            let tempTime = moment(time).weekday(i)
            let tr = moment(tempTime).format("YYYY-MM-DD") // "2021-11-08 (星期一)"
            // weekArr.push(tr.substring(8))
            weekArr.push(tr)
        }
        weekData.value =  weekArr
    }

    const otherInfo = ref({});

    const addSchedule = () => {
        otherInfo.value = {
            startTime: selectDay.value + ' 00:00:00',
            isRemind: 0,
            repeatedSchedule: 1,
            endTime: selectDay.value + ' 23:59:59',
        }
        handleNewData();
    }

    const works = ref([])

    const getWorks = () => {
        let params = {
            pageNum: 1,
            pageSize: 4,
            startTime: selectDay.value + ' 00:00:00',
            endTime: selectDay.value + ' 23:59:59',
        }
        getPageListData('/system/schedule', params).then((res) => {
            if (res.data) {
                works.value = res.data
            }
        })
    }

    const handleSubmit = (data) => {
        getWorks()
    }

    onMounted(() => { 
        getWeekData()
        getWorks();
    })
</script>

<style scoped lang="scss">
    .page-header {
        background-color: #ffffff;
        margin: 15px;
        padding: 15px;
        border-radius: 10px;
        margin-left: 0px;

        .headerTitle {
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
            position: relative;

            .rightBtn {
                position: absolute;
                right: 15px;
                top: 0px;
                font-size: 15px;
            }
        }

    }

    .work-item {
        line-height: 29px;
        overflow: hidden; /* 超出部分隐藏 */
        white-space: nowrap; /* 文字不换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
</style>