<template>
    <!--  :showNavRight="getTotal !== '-'" -->
    <global-page title="我的待办" :showEmpty="getTotal == '-'" navRightText="全部移除" @handleRightClick="handleRightClick">
        <up-collapse :border="false" accordion>
            <assign-work-list :height="getHeight"></assign-work-list>
            <appraisal-record-list :height="getHeight"></appraisal-record-list>
            <move-decision-list :height="getHeight"></move-decision-list>
            <technology-evaluation-list :height="getHeight"></technology-evaluation-list>
            <WindDamageManagement :height="getHeight"></WindDamageManagement>
        </up-collapse>
        <up-modal
            :width="250"
            content="是否确认移除全部「我的待办」?"
            :show="show"
            showCancelButton
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="show = false"
            @close="show = false"
        ></up-modal>
    </global-page>
</template>

<script setup>
import { computed, ref } from 'vue'
import AssignWorkList from './components/assign-work-list.vue'
import AppraisalRecordList from './components/appraisal-record-list.vue'
import MoveDecisionList from './components/move-decision-list.vue'
import TechnologyEvaluationList from './components/technology-evaluation-list.vue'
import WindDamageManagement from './components/WindDamageManagement.vue'
import useMyToDoStore from 'mocp/store/my-toDo'
import { storeToRefs } from 'pinia'

const { windowHeight, safeAreaInsets } = uni.getSystemInfoSync()
//内容高度-nav高度-底部安全区-底部安全区
const getHeight = computed(() => {
    return windowHeight - 44 - safeAreaInsets?.top - safeAreaInsets?.bottom - 75 * 4 + 'px'
})
const myToDoStore = useMyToDoStore()
const { getTotal } = storeToRefs(myToDoStore)
//全部清除
const show = ref(false)
const handleRightClick = () => {
    show.value = true
}
//确认删除
const confirm = () => {
    show.value = false
}
</script>
<style lang="scss">
.item {
    margin-bottom: 0;
}
.u-swipe-action {
    margin-bottom: 16rpx;
}
</style>
<style lang="scss" scoped>
.item:last-child {
    margin-bottom: 0;
}
:deep(.u-collapse-item) {
    margin-bottom: 16rpx;
    .u-cell__body {
        background: #fff;
        padding: 24rpx !important;
    }
    .u-cell__title {
        color: $mocp-text-5;
        font-size: 34rpx;
    }
}
</style>
