<template>
    <div>
        <el-card class="!border-none" v-loading="loading" shadow="never">
            <div style="display: flex; justify-content: space-between">
                <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增
                </el-button>
                <!-- <div class="btn">
          <div :class="{ active: nowType == 0 }" @click="nowType = 0">日历</div>
          <div :class="{ active: nowType == 1 }" @click="nowType = 1">列表</div>
        </div> -->
            </div>
            <calendar
                :list="taskList"
                @clickItem="clickTask"
                @initShowDate="initShowDate"
            ></calendar>
            <!-- <div class="mt-4">
        <el-calendar v-model="dateValue">
          <template #dateCell="{ data }">
            <div style="width: 100%; height: 100%">
              <p
                :class="data.isSelected ? 'is-selected' : ''"
                style="padding: 8px 8px 0 8px"
              >
                {{ data.day.split("-").slice(1).join("-") }}
              </p>
              <div
                class="task"
                @click="clickTask(item)"
                v-for="(item, index) in taskListFilter(data.day)"
                :key="index"
              >
                {{ item.template_name }}
              </div>
            </div>
          </template>
        </el-calendar>
      </div>-->
        </el-card>

        <EditTowPopup
            ref="editTowRef"
            :task="task"
            :type="popupType"
            @success="loadTask"
            @close="showEditTow = false"
        />
    </div>
</template>

<script lang="ts" setup name="task">
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
// import { getRoutePath } from "router";
import EditPopup from './edit.vue'
import EditTowPopup from './editTow.vue'
import { reactive, watch } from 'vue'
import { apiTaskList, apiTaskDetails } from '@/api/task'
import calendar from './calendar.vue'

const route = useRoute()

const dateValue = ref(new Date())

// 当前点击的任务
const task = ref({
    create_user_id: 0,
    end_time: '',
    id: 0,
    scheduling_id: 0,
    start_time: '',
    status: 0,
    template_id: 0,
    template_name: ''
})
const popupType = ref('add')
const clickTask = (e: any) => {
    popupType.value = 'show'
    // task.value = e;
    task.value = taskList.value.find((item: any) => item.id == e)
    handleSelect()
}

// 加载
const loading = ref(true)

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const editTowRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
const showEditTow = ref(false)

// 查询条件
const queryParams = reactive({
    scheduling_id: '',
    start_time: '',
    end_time: '',
    page_no: 1,
    pageSize: 150
})
if (route.query.id) {
    queryParams.scheduling_id = route.query.id.toString()
}
const taskList = ref<any>([])

// 查询
const loadTask = async () => {
    apiTaskList(queryParams).then((res) => {
        taskList.value = res.lists
        loading.value = false
    })
}

const start_date = ref('')
const end_date = ref('')
// 计算当前显示的第一天和最后一天
const initShowDate = (dateStr = '') => {
    const currentDate = dateStr ? new Date(dateStr) : new Date()
    const currentYear = currentDate.getFullYear()
    const currentMonth = currentDate.getMonth()
    const lastDay = new Date(currentYear, currentMonth + 1, 0).getDay() //获取第一天星期
    const startDay = new Date(currentYear, currentMonth, 1).getDay() //获取最后一天星期
    // console.log(new Date(currentYear, currentMonth, 1-startDay).getDate());
    // console.log(new Date(currentYear, currentMonth + 1, 6-lastDay).getDate());
    start_date.value = timeFormat(new Date(currentYear, currentMonth, 1 - startDay).getTime()) //获取第一天时间
    end_date.value = timeFormat(new Date(currentYear, currentMonth + 1, 6 - lastDay).getTime()) //获取最后一天时间
    if (queryParams.start_time != start_date.value) {
        queryParams.start_time = start_date.value
        queryParams.end_time = end_date.value
        loading.value = true
        loadTask()
    }
}
initShowDate()

// 过滤的任务列表
const taskListFilter = (e: any) => {
    return taskList.value
        .filter((item: any) => {
            const now = new Date(e).getTime() / 1000
            const start = new Date(item.start_time).getTime() / 1000
            const end = new Date(item.end_time).getTime() / 1000
            return now - start >= 0 && now - end <= 0
        })
        .slice(0, 5)
}

// 添加
const handleAdd = async () => {
    popupType.value = 'add'
    showEditTow.value = true
    await nextTick()
    editTowRef.value?.open('add')
    editTowRef.value?.updatedForm()
}
// 查询
const handleSelect = async () => {
    popupType.value = 'show'
    showEditTow.value = true
    await nextTick()
    editTowRef.value?.open('show')
    editTowRef.value?.updatedForm()
}

// 当前选择类型
const nowType = ref(0)
const handleTypeClick = (e) => {
    console.log(e)
}
</script>

<style lang="scss">
.is-selected {
    color: #1989fa;
}
.el-calendar-table .el-calendar-day {
    min-height: 8.2rem;
    padding: 0;
}
.task {
    font-size: 0.8rem;
    /* color: #f7ba2a; */
    color: #1989fa;
    padding: 0 8px;
    white-space: nowrap; /* 设置文本不换行 */
    overflow: hidden; /* 隐藏溢出的部分 */
    text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
    &:hover {
        background-color: rgba($color: #f38200, $alpha: 0.7);
        border-radius: 4px;
        color: #fff;
    }
}
.the {
    color: #ff5100;
}
.tow {
    color: #f38200;
}
.fou {
    color: red;
}
.btn {
    height: 30px;
    width: 150px;
    border: 1px solid #4a5dff;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    div {
        flex: 1;
        text-align: center;
        line-height: 30px;
    }
    .active {
        background-color: #4a5dff;
        color: #fff;
    }
}
</style>
