<template>
    <global-page
        title="厂家提供技术支援文件 "
        navLeftType="text"
        :showNavRight="true"
        navRightType="button"
        navRightText="保存"
        @handleRightClick="handleSave"
    >
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto">
                <view class="form">
                    <view class="form-title">非持续适航文件</view>
                    <view class="form-item">
                        <up-form-item :borderBottom="true">
                            <global-checkbox
                                v-model="formData.nonFileType"
                                placement="column"
                                :options="getParamsByType('EvaluateNonFileType')"
                            ></global-checkbox>
                        </up-form-item>
                        <up-form-item label="非持续适航文件描述" :borderBottom="true" labelPosition="top">
                            <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.nonName"></up-textarea>
                        </up-form-item>
                    </view>
                </view>
                <view class="form">
                    <view class="form-title">持续适航文件</view>
                    <view class="form-item">
                        <up-form-item :borderBottom="true">
                            <global-checkbox
                                v-model="formData.fileType"
                                placement="column"
                                :options="getParamsByType('EvaluateFileType')"
                            ></global-checkbox>
                        </up-form-item>
                        <up-form-item label="持续适航文件描述" :borderBottom="true" labelPosition="top">
                            <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.fileTypeName"></up-textarea>
                        </up-form-item>
                    </view>
                </view>
                <view class="form">
                    <view class="form-title">批准类别</view>
                    <view class="form-item">
                        <up-form-item :borderBottom="true">
                            <global-checkbox
                                v-model="formData.ratifyType"
                                placement="column"
                                :options="getParamsByType('EvaluateRatifyType')"
                            ></global-checkbox>
                        </up-form-item>
                    </view>
                </view>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import useTechnologyEvaluationStore from 'mocp/store/technology-evaluation'
import { storeToRefs } from 'pinia'
import { reactive } from 'vue'
import { addSupportFileApi } from 'mocp/api/technology-evaluation'
import { getParamsByType } from 'mocp/hooks/use-params/useParams'

const technologyEvaluationStore = useTechnologyEvaluationStore()
const { details } = storeToRefs(technologyEvaluationStore)
const formData = reactive({
    id: '',
    nonFileType: '',
    nonName: '',
    fileType: '',
    fileTypeName: '',
    ratifyType: ''
})
//页面初始化
onLoad(() => {
    formData.id = details.value.id
    formData.num = details.value.num
    formData.nonFileType = details.value.nonFileType
    formData.nonName = details.value.nonName
    formData.fileType = details.value.fileType
    formData.fileTypeName = details.value.fileTypeName
    formData.ratifyType = details.value.ratifyType
    console.log(formData)
})
//保存
const handleSave = async () => {
    const res = await addSupportFileApi(formData, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success(res.message)
        //更新详情
        technologyEvaluationStore.setState('details', res.data)
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
</script>
<style lang="scss" scoped>
.mocp-form {
    background: #fff;
    .form {
        &-title {
            padding: 20rpx 32rpx;
            background: #f7f8fa;
            color: $mocp-text-5;
        }
        &-item {
            padding: 0 32rpx;
        }
    }
}
</style>
