<template>
    <global-page
        title="新建非例行维护工作单"
        :showNavRight="true"
        navRightText="今天签单"
        @handleRightClick="navigateTo('/panel/electronicBill/nonRoutineWork/list')"
        showFooterBtn
        footerBtnText="客户方代表签字"
        @handleFooterClick="handleFooterClick"
    >
        <up-form ref="formRef" labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" errorType="toast">
            <view class="mocp-title">基本信息</view>
            <view class="mocp-form">
                <up-form-item label="航站" prop="station" :borderBottom="true" required>
                    <global-picker
                        pickAlign="right"
                        v-model="formData.station"
                        clearable
                        :options="baseStore.getTerminalSelect"
                        filter
                    ></global-picker>
                </up-form-item>
                <up-form-item label="日期" prop="date" :borderBottom="true" required>
                    <global-date pickAlign="right" clearable v-model="formData.date" defaultToday></global-date>
                </up-form-item>
                <up-form-item label="机号" prop="acreg" :borderBottom="true" required>
                    <global-picker pickAlign="right" v-model="formData.acreg" :options="allAc" clearable filter @change="changeAcreg"></global-picker>
                </up-form-item>
                <up-form-item label="飞机所属单位" prop="aircaraftoperator" :borderBottom="true" required>
                    <global-picker pickAlign="right" v-model="formData.aircaraftoperator" :options="allAirline" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="机型" prop="model" :borderBottom="true" required>
                    <global-picker v-model="formData.model" pickAlign="right" :options="allAcType" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="航班号" prop="flightNo" :borderBottom="true" required>
                    <up-input v-model="formData.flightNo" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
            </view>
            <view class="mocp-title">非例行工作</view>
            <view class="mocp-form">
                <view class="sample-table">
                    <view class="sample-thead">
                        <view class="sample-thead-th">
                            <view class="sample-thead-td">非例行工作</view>
                            <view class="spacer"></view>
                            <view class="sample-thead-td">人数</view>
                            <view class="spacer"></view>
                            <view class="sample-thead-td">工时</view>
                            <view class="spacer"></view>
                            <view class="sample-thead-td">材料</view>
                        </view>
                    </view>
                    <view class="sample-tbody">
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.work1" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.number1"
                                    :greater="0"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.workingHours1"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.material1" placeholder="请输入" clearable></up-input>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.work2" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.number2"
                                    :greater="0"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.workingHours2"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.material2" placeholder="请输入" clearable></up-input>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.work3" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.number3"
                                    :greater="0"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.workingHours3"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.material3" placeholder="请输入" clearable></up-input>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="mocp-title">特种车辆、设备、工具租用记录</view>
            <view class="mocp-form">
                <up-form-item label="牵引车(单位/次)" prop="tractor" :borderBottom="true">
                    <global-number-input v-model="formData.tractor"></global-number-input>
                </up-form-item>
                <up-form-item label="气源车(单位/次)" prop="asu" :borderBottom="true">
                    <global-number-input v-model="formData.asu"></global-number-input>
                </up-form-item>
                <up-form-item label="电源车(单位/小时)" prop="gpu" :borderBottom="true">
                    <global-number-input v-model="formData.gpu"></global-number-input>
                </up-form-item>
                <up-form-item label="空调车(单位/小时)" prop="acu" :borderBottom="true">
                    <global-number-input v-model="formData.acu"></global-number-input>
                </up-form-item>
                <up-form-item label="充氧车(单位/次)" prop="oxygenCharging" :borderBottom="true">
                    <global-number-input v-model="formData.oxygenCharging"></global-number-input>
                </up-form-item>
                <up-form-item label="高空作业车(单位/小时)" prop="cherryPicker" :borderBottom="true">
                    <global-number-input v-model="formData.cherryPicker"></global-number-input>
                </up-form-item>
                <up-form-item label="轮胎充气(单位/次)" prop="tireCharging" :borderBottom="true">
                    <global-number-input v-model="formData.tireCharging"></global-number-input>
                </up-form-item>
                <up-form-item label="减震支柱充气(单位/次)" prop="shockStrutCharging" :borderBottom="true">
                    <global-number-input v-model="formData.shockStrutCharging"></global-number-input>
                </up-form-item>
                <up-form-item label="工作梯(单位/小时)" prop="ladder" :borderBottom="true">
                    <global-number-input v-model="formData.ladder"></global-number-input>
                </up-form-item>
                <up-form-item label="千斤顶(单位/小时)" prop="jackscrew" :borderBottom="true">
                    <global-number-input v-model="formData.jackscrew"></global-number-input>
                </up-form-item>
                <up-form-item label="动力设备工具(单位/次)" prop="powerTool" :borderBottom="true">
                    <global-number-input v-model="formData.powerTool"></global-number-input>
                </up-form-item>
                <up-form-item label="非动力设备工具(单位/次)" prop="tools" :borderBottom="true">
                    <global-number-input v-model="formData.tools"></global-number-input>
                </up-form-item>
                <up-form-item label="充电瓶(单位/次)" prop="charger" :borderBottom="true">
                    <global-number-input v-model="formData.charger"></global-number-input>
                </up-form-item>
                <up-form-item label="尾撑(单位/小时)" prop="tails" :borderBottom="true">
                    <global-number-input v-model="formData.tails"></global-number-input>
                </up-form-item>
                <up-form-item label="机库(单位/小时)" prop="hanger" :borderBottom="true">
                    <global-number-input v-model="formData.hanger"></global-number-input>
                </up-form-item>
            </view>
        </up-form>
    </global-page>
</template>

<script setup>
import useBaseStore from 'mocp/store/base'
import useElectronicBillStore from 'mocp/store/electronicBill'
import { formData, rules } from './constants/add.compositions'
import { navigateTo } from 'mocp/utils/jump'
import { ref } from 'vue'
import { changeAcreg } from './constants/add.functionals'
import { validateParameters } from 'mocp/utils/tool'

const baseStore = useBaseStore()
const electronicBillStore = useElectronicBillStore()
const {
    selectList: { allAc, allAcType, allAirline }
} = electronicBillStore
//提交
const formRef = ref()
const handleFooterClick = async () => {
    await formRef.value?.validate()
    if (!validateParameters(formData.number1, formData.workingHours1)) {
        return uni.$mocpMessage.warning('请同时填写第1条非例行工作的人数和工时')
    }
    if (!validateParameters(formData.number2, formData.workingHours2)) {
        return uni.$mocpMessage.warning('请同时填写第2条非例行工作的人数和工时')
    }
    if (!validateParameters(formData.number3, formData.workingHours3)) {
        return uni.$mocpMessage.warning('请同时填写第3条非例行工作的人数和工时')
    }
    navigateTo('/panel/electronicBill/nonRoutineWork/sign')
}
</script>
<style lang="scss" scoped>
@import 'mocpStatic/css/table.scss';
.mocp-form {
    background: #fff;
    margin-bottom: 24rpx;
    padding: 0 32rpx;
}
.mocp-title {
    padding: 0 32rpx 24rpx 32rpx;
    background-color: #f7f8fa;
}
.mocp-subtitle {
    padding-top: 12rpx;
    margin-bottom: -12rpx;
}
</style>
