<template>
    <global-page
        title="MCO列表"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :params="searchData"
        showNavRight
        navRightType="icon"
        navRightIcon="saixuan-01"
        @handleRightClick="handleRightClick"
        :api="getMcoListApi"
        :padding="24"
    >
        <template #="{ dataList }">
            <view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
                <view class="item-title">
                    <view class="left grade">
                        {{ getParamNameByValue('WorkGrade', item.workGrade) }}
                    </view>
                    <view class="right">
                        <global-tag type="primary" class="txt">{{ getParamNameByValue('GuaranteeStage', item.guaranteeStage) }}</global-tag>
                        <global-tag type="success" class="txt">{{ getParamNameByValue('MajorCategory', item.majorCategory) }}</global-tag>
                        <global-tag type="info" class="txt">{{ getParamNameByValue('McoCurrentState', item.state) }}</global-tag>
                    </view>
                </view>
                <view class="item-content u-line-3">
                    {{ item.faultDescription || '无' }}
                </view>
                <view class="item-footer">
                    <view class="label">
                        <global-icon icon="calendar"></global-icon>
                        <text class="txt">
                            {{ timeStampFormat(item.executionDate, { format: 'YYYY/MM/DD' }) }}
                        </text>
                    </view>
                </view>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { timeStampFormat } from 'mocp/utils/tool'
import { storeToRefs } from 'pinia'
import { onUnload } from '@dcloudio/uni-app'
import { getMcoListApi } from 'mocp/api/mco'
import useMcoStore from 'mocp/store/mco'
import { getParamNameByValue } from 'mocp/hooks/use-params/useParams'

//跳转
const mcoStore = useMcoStore()
const { searchData } = storeToRefs(mcoStore)
const goDetails = (data) => {
    uni.$mocpJump.navigateTo('/panel/mco/details', { id: data.id })
}
//筛选
const handleRightClick = () => {
    uni.$mocpJump.navigateBack()
}
//刷新
const paging = ref()
uni.$on('mcoReload', () => {
    paging.value?.reload()
})
onUnload(() => {
    uni.$off('mcoReload')
})
</script>
<style lang="scss" scoped>
@import 'mocpStatic/css/list.scss';
.grade {
    font-size: 34rpx;
    color: $mocp-primary-6;
}
</style>
