<template>
    <global-page
        title="非计划申请"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :params="searchData"
        showNavRight
        navRightType="icon"
        navRightIcon="saixuan-01"
        @handleRightClick="handleRightClick"
        :api="unplanApplyListApi"
        :padding="24"
        :showFooterBtn="checkPermi('/noplan/edit')"
        footerBtnText="新增申请"
        @handleFooterClick="handleFooterClick"
    >
        <template #default="{ item }">
            <view class="item" :class="{ 'wrong-class': item.applyStatus == '0' }" @tap="goDetails(item)">
                <view class="item-title">
                    <view class="left" style="min-width: 100rpx">
                        <global-text-status :value="item.applyStatus" dictkey="unPlan_applyStatus"></global-text-status>
                    </view>
                    <view class="right">
                        <text class="txt u-line-1" v-if="item.acType">{{ item.acType }}</text>
                        <text class="txt u-line-1" v-if="item.packageName">{{ item.packageName }}</text>
                    </view>
                </view>
                <view class="item-content">
                    <view class="u-line-3">预警原因：{{ getParamNameByValue('WarningReason', item.warningReason, { isArray: true }) || '无' }}</view>
                    <view class="u-line-3">具体原因：{{ item.reason || '无' }}</view>
                </view>
                <view class="item-footer">
                    <view class="label">
                        <global-icon icon="calendar"></global-icon>
                        <text class="txt">
                            {{ timeStampFormat(item.createTime, { format: 'YYYY/MM/DD HH:mm' }) }}
                        </text>
                    </view>
                    <view class="label">
                        <global-icon icon="idcard"></global-icon>
                        <text class="txt u-line-1">申请人:{{ item.createUserName || '-' }}</text>
                    </view>
                </view>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { onUnload } from '@dcloudio/uni-app'
import { getParamNameByValue } from 'mocp/hooks/use-params/useParams'
import { timeStampFormat } from 'mocp/utils/tool'
import { unplanApplyListApi } from 'mocp/api/unplanApply'
import useUnplanApplyStore from 'mocp/store/unplanApply'
import { checkPermi } from 'mocp/utils/permission'

//跳转
const unplanApplyStore = useUnplanApplyStore()
const { searchData } = storeToRefs(unplanApplyStore)
const goDetails = (data) => {
    uni.$mocpJump.navigateTo('/panel/unplanApply/details', { id: data.id })
}
//筛选
const handleRightClick = () => {
    uni.$mocpJump.navigateTo('/panel/unplanApply/search')
}
//刷新
const paging = ref()
uni.$on('unplanApplyReload', () => {
    paging.value?.reload()
})
//新建
const handleFooterClick = () => {
    uni.$mocpJump.navigateTo('/panel/unplanApply/add')
}
onUnload(() => {
    uni.$off('unplanApplyReload')
})
</script>
<style lang="scss" scoped>
@import 'mocpStatic/css/list.scss';
.wrong-class {
    background: linear-gradient(138.51deg, #ffe1e1 6.14%, #ffffff 125.66%);
}
</style>
