<template>
    <global-page title="步骤反馈" showFooterBtn footerBtnText="确认提交" @handleFooterClick="handleFooterClick">
        <view class="mocp-cell" v-if="getStepDetails">
            <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>
            <view class="mocp-form">
                <up-form labelPosition="left" labelWidth="auto">
                    <up-form-item label="状态" prop="state" :borderBottom="true">
                        <global-picker v-model.number="formData.state" pickAlign="right" clearable dictkey="mco_stepState"></global-picker>
                    </up-form-item>
                    <up-form-item label="工作人" :borderBottom="true">
                        <global-picker
                            pickAlign="right"
                            clearable
                            v-model="formData.staff"
                            :options="selectList"
                            emptyValue="-1"
                            filter
                        ></global-picker>
                    </up-form-item>
                    <up-form-item label="实际工时" :borderBottom="true">
                        <up-input v-model="formData.stateP" inputAlign="right" border="none" placeholder="请输入" clearable type="number">
                            <template #suffix>人数</template>
                        </up-input>
                        <up-input v-model="formData.stateH" inputAlign="right" border="none" placeholder="请输入" clearable type="number">
                            <template #suffix>小时</template>
                        </up-input>
                    </up-form-item>
                    <up-form-item label="反馈内容" :borderBottom="true" labelPosition="top">
                        <up-textarea
                            placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                            :height="40"
                            border="none"
                            v-model="formData.content"
                        ></up-textarea>
                    </up-form-item>
                    <up-form-item label="附件" :borderBottom="true" labelPosition="top">
                        <view style="margin-top: 24rpx">
                            <global-upload
                                :fileList="getStepDetails.backList?.contentFile || ''"
                                v-model="formData.contentFile"
                                mapFieldName="id"
                                :multiple="false"
                            ></global-upload>
                        </view>
                    </up-form-item>
                </up-form>
            </view>
        </view>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useMcoStore from 'mocp/store/mco'
import { timeStampFormat } from 'mocp/utils/tool'
import useBaseStore from 'mocp/store/base'
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { addBackApi } from 'mocp/api/mco'

const baseStore = useBaseStore()
const mcoStore = useMcoStore()
const { getStepDetails } = storeToRefs(mcoStore)
const formData = reactive({
    state: '',
    staff: '',
    stateP: '',
    stateH: '',
    content: '',
    contentFile: ''
})
//获取下拉框列表
const selectList = ref([])
onLoad(() => {
    const details = getStepDetails.value.backList || {}
    formData.state = details.state
    formData.staff = details.staff
    formData.stateP = details.actualWork.split('X')[0]
    formData.stateH = details.actualWork.split('X')[1]
    formData.content = details.content
    baseStore.getAdminList().then((res) => {
        selectList.value = res
    })
})
//提交
const handleFooterClick = async () => {
    const params = {}
    params.id = getStepDetails.value.id
    if (getStepDetails.value.backList) {
        params.isAdd = 2
    } else {
        params.isAdd = 1
    }
    if (formData.state) {
        params.state = formData.state
    }
    if (formData.staff) {
        params.staff = formData.staff
    }
    if (formData.stateP && formData.stateH) {
        params.stateType = formData.stateP + 'X' + formData.stateH
    }
    if (formData.content) {
        params.content = formData.content
    }
    if (formData.contentFile) {
        params.contentFile = formData.contentFile
    }
    const res = await addBackApi(params, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success(res.message)
        //更新详情
        uni.$emit('updateDetails')
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
</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>
