<template>
    <TContainer>
        <view class="pb-[24rpx]">
            <w-date-more :curDate="addTime" type="telesale" />
            <date-strip
                v-model="templateInfo.dateValue"
                @change="handleDateChange"
                height="160rpx"
            />
            <w-summary-form
                v-model="templateInfo.templateFormList"
                :loading="loading"
                @handle-confirm="handleConfirm"
            />
            <view
                class="px-[60rpx] mt-[48rpx]"
                v-if="templateInfo.templateFormList?.length > 0 && isToday"
            >
                <u-button class="btn" color="#0E66FB" shape="circle" @click="handleConfirm">
                    确认
                </u-button>
            </view>
        </view>
    </TContainer>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import dateStrip from '@/components/date-strip/index.vue'
import { apiAddSummary, apiEditSummary, apiSummary, apiSummaryDetail } from '@/api/summary'
import cache from '@/utils/cache'
import { ROLEINDEX } from '@/enums/cacheEnums'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { formatDate, toast } from '@/utils/util'
import dayjs from 'dayjs'
import { onMounted } from 'vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const roles = computed(() => userInfo.value.roles)
const loading = ref(false)
const templateInfo = ref({
    id: '',
    dateValue: new Date().getTime(),
    templateFormList: [],
    isFill: 0
})
const addTime = ref(new Date().getTime())
const date = computed(
    () =>
        (format = 'YYYY-MM-DD') =>
            formatDate(templateInfo.value.dateValue, format)
)
const isToday = computed(() => {
    const today = new Date()
    const selectedDate = new Date(templateInfo.value.dateValue)
    return (
        today.getFullYear() === selectedDate.getFullYear() &&
        today.getMonth() === selectedDate.getMonth() &&
        today.getDate() === selectedDate.getDate()
    )
})
const handleDateChange = item => {
    templateInfo.value.dateValue = dayjs(item.key).valueOf()
    isToday.value ? fetchSummaryTemplate() : fetchSummaryDetail()
}
// 提交模板(今天的模板都允许修改)
const handleConfirm = async () => {
    try {
        const { templateFormList, isFill, id } = templateInfo.value
        const params = {
            id,
            templateFormList: templateFormList,
            addTime: date.value('YYYY-MM-DD HH:mm:ss')
        }
        const flag = isToday.value && isFill
        const api = flag ? apiEditSummary : apiAddSummary
        const msg = flag ? '编辑' : '提交'
        await api(params)
        toast(`${msg}成功`)
        fetchSummaryTemplate()
    } catch (error) {}
}
// 获取模板
const fetchSummaryTemplate = async () => {
    loading.value = true
    try {
        const roleIndex = cache.get(ROLEINDEX)
        const curRole = roles.value[roleIndex]
        const { id: postId } = curRole
        const result = await apiSummary({ postId })
        templateInfo.value.templateFormList = result.templateFormList ?? []
        templateInfo.value.isFill = result.isFill
        templateInfo.value.id = result.id
    } catch (error) {}
    loading.value = false
}
const fetchSummaryDetail = async () => {
    try {
        const params = {
            date: date.value('YYYY-MM-DD')
        }
        const result = await apiSummaryDetail(params)
        templateInfo.value.templateFormList = result.templateContentList ?? []
        templateInfo.value.isFill = result.isFill ?? 0
    } catch (error) {}
}
fetchSummaryTemplate()
</script>
<style scoped lang="scss">
:deep(.btn) {
    button {
        @apply h-[88rpx];
    }
}
</style>
