<template>
    <global-page
        title="添加工作反馈"
        navLeftType="text"
        :showNavRight="true"
        navRightType="button"
        navRightText="保存"
        @handleRightClick="handleSave"
    >
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
                <view class="form">
                    <view class="form-item">
                        <up-form-item label="工作反馈状态" :borderBottom="true" prop="feedbackState" required>
                            <global-picker v-model="formData.feedbackState" pickAlign="right" clearable dictkey="aw_feedbackState"></global-picker>
                        </up-form-item>
                        <up-form-item label="问题分析" :borderBottom="true" labelPosition="top" prop="problem" required>
                            <up-textarea
                                v-model="formData.problem"
                                placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                                :height="40"
                                border="none"
                            ></up-textarea>
                        </up-form-item>
                    </view>
                </view>
                <view class="form">
                    <view class="form-title">解决措施</view>
                    <view class="form-item">
                        <up-form-item label="工作目标" :borderBottom="true" labelPosition="top" prop="workTarget" required>
                            <up-textarea
                                v-model="formData.workTarget"
                                placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                                :height="40"
                                border="none"
                            ></up-textarea>
                        </up-form-item>
                        <view class="plan">
                            <view class="plan-title">
                                <view class="left">分解计划</view>
                                <view class="right" @tap="goTo">
                                    <view class="circle"><up-icon name="plus" color="#fff" size="8"></up-icon></view>
                                    <view class="text">添加</view>
                                </view>
                            </view>
                            <view class="plan-body">
                                <view class="plan-body-list">
                                    <template v-for="(item, index) in decompose" :key="index">
                                        <view class="plan-body-item">
                                            <view class="plan-body-title">
                                                <view class="left">
                                                    {{ decompose.length > 1 ? '分解计划' + (index + 1) : '分解计划' }}
                                                </view>
                                                <view class="right">{{ timeStampFormat(item.time, { format: 'YYYY/MM/DD' }) }}</view>
                                            </view>
                                            <view class="plan-body-text">{{ item.plan }}</view>
                                        </view>
                                    </template>
                                </view>
                                <up-form-item label="当前进展" :borderBottom="true" labelPosition="top" prop="current" required>
                                    <up-textarea
                                        v-model="formData.current"
                                        placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                                        :height="40"
                                        border="none"
                                    ></up-textarea>
                                </up-form-item>
                                <up-form-item :borderBottom="true">
                                    <global-upload :fileList="arrangeWorkExtend.fileVoList" v-model="formData.file" mapFieldName="id"></global-upload>
                                </up-form-item>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="form">
                    <view class="form-title" style="padding: 12rpx"></view>
                    <view class="form-item">
                        <up-form-item label="基地/部门批准领导" :borderBottom="true" prop="baseApprovalLeader" required>
                            <up-input
                                v-model="formData.baseApprovalLeader"
                                border="none"
                                inputAlign="right"
                                placeholder="请输入"
                                :adjustPosition="false"
                                clearable
                            ></up-input>
                        </up-form-item>
                        <up-form-item label="MCD批准领导" :borderBottom="true" prop="mcdApprovalLeader" required>
                            <up-input
                                v-model="formData.mcdApprovalLeader"
                                border="none"
                                inputAlign="right"
                                placeholder="请输入"
                                :adjustPosition="false"
                                clearable
                            ></up-input>
                        </up-form-item>
                        <up-form-item label="批复附件" labelPosition="top" :borderBottom="true">
                            <view style="margin-top: 24rpx">
                                <global-upload
                                    :fileList="arrangeWorkExtend.approvalFileVoList"
                                    v-model="formData.approvalFile"
                                    mapFieldName="id"
                                ></global-upload>
                            </view>
                        </up-form-item>
                        <up-form-item label="后续措施反馈" :borderBottom="true" required>
                            <view class="switch">
                                <up-switch v-model="formData.followUpFeedback" activeValue="1" inactiveValue="0"></up-switch>
                            </view>
                        </up-form-item>
                        <up-form-item label="计划完成时间" :borderBottom="true" v-if="formData.followUpFeedback == 1" prop="pcTime" required>
                            <global-date v-model="formData.pcTime" pickAlign="right" clearable placeholder="请选择日期"></global-date>
                        </up-form-item>
                    </view>
                </view>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import useAssignWorkStore from 'mocp/store/assign-work'
import { storeToRefs } from 'pinia'
import { formData, rules } from './constants/edit-work.compositions'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { approvalFileVoList, fileVoList } from './constants/edit-work.compositions'
import { timeStampFormat } from 'mocp/utils/tool'
import { ref } from 'vue'
import { cloneDeep } from 'lodash'
import { savaArrangeWorkFeedbackApi } from 'mocp/api/assign-work'

const assignWorkStore = useAssignWorkStore()
const { arrangeWorkExtend } = storeToRefs(assignWorkStore)
const decompose = ref(cloneDeep(assignWorkStore.getDecompose))
// 页面初始化
onLoad(() => {
    formData.id = arrangeWorkExtend.value.id
    formData.workId = arrangeWorkExtend.value.workId
    formData.company = arrangeWorkExtend.value.company
    formData.problem = arrangeWorkExtend.value.problem
    formData.workTarget = arrangeWorkExtend.value.workTarget
    formData.current = arrangeWorkExtend.value.current
    formData.baseApprovalLeader = arrangeWorkExtend.value.baseApprovalLeader
    formData.mcdApprovalLeader = arrangeWorkExtend.value.mcdApprovalLeader
    formData.followUpFeedback = arrangeWorkExtend.value.followUpFeedback || '0'
    formData.pcTime = arrangeWorkExtend.value.pcTime
    formData.feedbackState = arrangeWorkExtend.value.feedbackState
    formData.feedbackUser = arrangeWorkExtend.value.feedbackUser
    formData.feedbackTime = arrangeWorkExtend.value.feedbackTime
    //初始化文件列表
    fileVoList.value = arrangeWorkExtend.value.fileVoList
    approvalFileVoList.value = arrangeWorkExtend.value.approvalFileVoList
})
//监听分解计划的变化
uni.$on('changeDecompose', (data) => {
    decompose.value = data
})
onUnload(() => {
    uni.$off('changeDecompose')
})
//保存
const formRef = ref()
const handleSave = async () => {
    await formRef.value?.validate()
    if (!decompose.value || decompose.value.length == 0) {
        return uni.$mocpMessage.showToast('请添加分解计划')
    }
    const params = {
        ...formData,
        decompose: JSON.stringify(decompose.value)
    }
    if (formData.followUpFeedback == '0') {
        params.pcTime = ''
    }
    const res = await savaArrangeWorkFeedbackApi(params, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.showToast(res.message)
        //更新当前责任单位详情
        assignWorkStore.setState('arrangeWorkExtend', res.data)
    } else {
        uni.$mocpMessage.showToast(res.message)
    }
}
//添加分解计划
const goTo = () => {
    uni.$mocpJump.navigateTo('/panel/assign-work/edit-decompose').then(() => {
        uni.$emit('sendDecompose', decompose.value)
    })
}
</script>
<style lang="scss">
@import './constants/edit-work.scss';
</style>
