<template>
    <global-page title="步骤详情">
        <template v-if="getStepDetails">
            <view class="mocp-cell">
                <view class="mocp-title">步骤详情</view>
                <up-cell-group>
                    <up-cell title="MCO编号" :value="getStepDetails.mcoNumber"></up-cell>
                    <up-cell title="创建时间" :value="timeStampFormat(getStepDetails.creationTime)"></up-cell>
                    <up-cell title="计划工时" :value="getStepDetails.plannedWork"></up-cell>
                    <up-cell title="步骤描述" :label="getStepDetails.stepContent || '无'"></up-cell>
                </up-cell-group>
            </view>
            <view class="mocp-cell">
                <view class="mocp-title">反馈</view>
                <up-cell-group>
                    <up-cell title="状态">
                        <template #value>
                            <global-text-status :value="getStepBackDetails.state" dictkey="mco_feedBack"></global-text-status>
                        </template>
                    </up-cell>
                    <up-cell title="工作人" :value="getStepBackDetails.staff || '-'"></up-cell>
                    <up-cell title="实际工时" :value="getStepBackDetails.actualWork || '-'"></up-cell>
                    <up-cell title="反馈内容" :label="getStepBackDetails.content || '无'"></up-cell>
                    <up-cell title="附件">
                        <template #label>
                            <view style="margin-top: 16rpx">
                                <global-upload :fileList="getStepBackDetails.contentFile" :showUpload="false"></global-upload>
                            </view>
                        </template>
                    </up-cell>
                </up-cell-group>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useMcoStore from 'mocp/store/mco'
import { timeStampFormat } from 'mocp/utils/tool'

const mcoStore = useMcoStore()
const { getStepDetails, getStepBackDetails } = storeToRefs(mcoStore)
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
    margin-top: 16rpx;
}
.mocp-title {
    padding: 16rpx;
    background-color: #f7f8fa;
}
.mocp-form {
    padding: 0 32rpx;
}
</style>
