<template>
    <global-page title="新增非计划预警" showFooterBtn footerBtnText="提交" @handleFooterClick="handleFooterClick">
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
                <up-form-item label="工作包编号" prop="packageNo" :borderBottom="true" required>
                    <up-input
                        v-model="formData.packageNo"
                        border="none"
                        inputAlign="right"
                        placeholder="请输入"
                        clearable
                        @blur="checkPakgeNo"
                    ></up-input>
                </up-form-item>
                <up-form-item label="申请原因" prop="warningReason" :borderBottom="true" required>
                    <global-picker v-model="formData.warningReason" pickAlign="right" paramsType="WarningReason" clearable multiple></global-picker>
                </up-form-item>
                <up-form-item label="缺件航材" :borderBottom="true">
                    <global-switch v-model="formData.materialDelay" switchAlign="right"></global-switch>
                </up-form-item>
                <up-form-item :borderBottom="true" v-if="formData.materialDelay == 1">
                    <view style="width: 100%">
                        <view class="materialDelay__input" v-for="(item, index) in materialPns" :key="index">
                            <up-input v-model="materialPns[index]" placeholder="请输入" clearable />
                            <view class="materialDelay__icon">
                                <up-icon
                                    name="minus-circle-fill"
                                    size="22"
                                    style="margin-left: 10rpx"
                                    v-if="index > 0"
                                    @tap="materialPns.splice(index, 1)"
                                ></up-icon>
                                <up-icon
                                    name="plus-circle-fill"
                                    size="22"
                                    style="margin-left: 10rpx"
                                    v-if="index + 1 == materialPns.length"
                                    @tap="addMaterialPns"
                                ></up-icon>
                            </view>
                        </view>
                    </view>
                </up-form-item>
                <up-form-item label="具体原因" prop="reason" :borderBottom="true" labelPosition="top" required>
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.reason"></up-textarea>
                </up-form-item>
                <up-form-item label="审核人" prop="approver" :borderBottom="true" required>
                    <custom-admin-picker pickAlign="right" clearable v-model="formData.approver"></custom-admin-picker>
                </up-form-item>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { formData, formRef, materialPns, rules } from './constants/add.compositions'
import { handleSubmit, checkPakgeNo, addMaterialPns, resetData } from './constants/add.functionals'

const handleFooterClick = () => {
    handleSubmit()
}
onLoad(() => {
    resetData()
})
</script>
<style lang="scss" scoped>
.mocp-form {
    background: #fff;
    padding: 0 32rpx;
    .materialDelay__input {
        width: 100%;
        display: flex;
        margin-bottom: 10rpx;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .materialDelay__icon {
        width: 100rpx;
        display: flex;
    }
}
</style>
