<template>
    <global-page
        title="海技值班"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :params="searchData"
        showNavRight
        navRightType="icon"
        navRightIcon="saixuan-01"
        @handleRightClick="handleRightClick"
        :api="getDutyLogListApi"
        :padding="24"
    >
        <template #default="{ item }">
            <view class="item" :class="{ 'wrong-class': item.applyStatus == '0' }" @tap="goDetails(item)">
                <view class="item-title">
                    <view class="left">{{ timeStampFormat(item.dutyDate, { format: 'YYYY/MM/DD' }) }}</view>
                    <view class="right">
                        <global-tag :type="useGetDictByValue('dl_statusColor', item.status)">
                            {{ useGetDictByValue('dl_status', item.status) }}
                        </global-tag>
                    </view>
                </view>
                <view class="item-content">
                    <view class="mocp-flex">
                        <view class="mocp-color-text-3 flex-1">
                            <view>值班经理：</view>
                            <view class="u-line-1 mocp-color-text-5">{{ item.dutyManagerUname || '-' }}</view>
                        </view>
                        <view class="mocp-color-text-3 flex-1">
                            <view>联系电话：</view>
                            <view class="u-line-1 mocp-color-text-5">{{ item.dutyManagerPhone || '-' }}</view>
                        </view>
                        <view class="mocp-color-text-3 flex-1">
                            <view>监察领导：</view>
                            <view class="u-line-1 mocp-color-text-5">{{ item.monitorLeaderUname || '-' }}</view>
                        </view>
                    </view>
                    <view class="mocp-list">
                        <view class="mocp-color-text-3 mocp-item">
                            汇报工作：
                            <view class="u-line-1 mocp-color-text-5">{{ item.reportWork }}</view>
                        </view>
                        <view class="mocp-color-text-3 mocp-item">
                            重要航班：
                            <view class="u-line-1 mocp-color-text-5">{{ item.importantFlight }}</view>
                        </view>
                        <view class="mocp-color-text-3 mocp-item">
                            会议布置工作：
                            <view class="u-line-1 mocp-color-text-5">
                                {{ item.meetingArrangementWork }}
                            </view>
                        </view>
                        <view class="mocp-color-text-3 mocp-item">
                            交接工作内容：
                            <view class="u-line-1 mocp-color-text-5">
                                {{ item.handoverWork }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { onUnload } from '@dcloudio/uni-app'
import { timeStampFormat } from 'mocp/utils/tool'
import useDutyLogStore from 'mocp/store/dutyLog'
import { getDutyLogListApi } from 'mocp/api/dutyLog'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'

//跳转
const dutyLogStore = useDutyLogStore()
const { searchData } = storeToRefs(dutyLogStore)
const goDetails = (data) => {
    uni.$mocpJump.navigateTo('/panel/dutyLog/details', { id: data.id })
}
//筛选
const handleRightClick = () => {
    uni.$mocpJump.navigateTo('/panel/dutyLog/search')
}
//刷新
const paging = ref()
uni.$on('dutyLogReload', () => {
    paging.value?.reload()
})
onUnload(() => {
    uni.$off('dutyLogReload')
})
</script>
<style lang="scss" scoped>
@import 'mocpStatic/css/list.scss';
.item-title {
    .left {
        font-size: 34rpx;
        font-weight: 500;
        color: $mocp-text-5;
    }
}
.item-content {
    .mocp-flex {
        display: flex;
    }
    .flex-1 {
        flex: 1;
    }
    .mocp-list {
        margin-top: 16rpx;
        .mocp-item {
            margin-bottom: 16rpx;
        }
    }
}
</style>
