<template>
    <global-page
        :title="formData.id > 0 ? '编辑非例行维护工作单' : '新建非例行维护工作单'"
        :showNavRight="formData.id > 0 ? false : 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="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
                        customize
                        @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
                        customize
                    ></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 customize></global-picker>
                </up-form-item>
                <up-form-item label="进港航班号" prop="flightNoIn" :borderBottom="true" required>
                    <up-input v-model="formData.flightNoIn" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="出港航班号" prop="flightNoOut" :borderBottom="true">
                    <up-input v-model="formData.flightNoOut" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="航段" prop="legs1" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.legs1"
                        clearable
                        :options="getTerminalSelect()"
                        filter
                        placeholder="请选择起飞航站"
                    ></global-picker>
                </up-form-item>
                <up-form-item prop="legs2" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.legs2"
                        clearable
                        :options="getTerminalSelect()"
                        filter
                        placeholder="请选择过站航站"
                    ></global-picker>
                </up-form-item>
                <up-form-item prop="legs3" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.legs3"
                        clearable
                        :options="getTerminalSelect()"
                        filter
                        placeholder="请选择落地航站"
                    ></global-picker>
                </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>
                    </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>
                        <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>
                        <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>
                    </view>
                </view>
            </view>
            <view class="mocp-title">特种车辆、设备、工具租用记录</view>
            <view class="mocp-form">
                <up-form-item label="金工人员工时(人数*小时)" prop="jgrygs" :borderBottom="true">
                    <global-number-input v-model="formData.jgrygs" placeholder="人数" :precision="2"></global-number-input>
                </up-form-item>
                <up-form-item prop="jgrygsHuors" :borderBottom="true">
                    <global-number-input v-model="formData.jgrygsHuors" placeholder="小时" :precision="2"></global-number-input>
                </up-form-item>
                <up-form-item label="普通工作梯(2米以下)" prop="ptgzt" :borderBottom="true">
                    <global-number-input v-model="formData.ptgzt" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="高空工作梯(2米以上)" prop="gkgzt" :borderBottom="true">
                    <global-number-input v-model="formData.gkgzt" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="机身千斤顶" prop="jsqjd" :borderBottom="true">
                    <global-number-input v-model="formData.jsqjd" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="轮轴千斤顶" prop="lzqjd" :borderBottom="true">
                    <global-number-input v-model="formData.lzqjd" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="换轮工具" prop="hlgj" :borderBottom="true">
                    <global-number-input v-model="formData.hlgj" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="工具车辆" prop="gjcl" :borderBottom="true">
                    <global-number-input v-model="formData.gjcl" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="充氧" prop="cy" :borderBottom="true">
                    <global-number-input v-model="formData.cl" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="充高压氮气" prop="cgydq" :borderBottom="true">
                    <global-number-input v-model="formData.cgydq" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="充低压氮气" prop="cdydq" :borderBottom="true">
                    <global-number-input v-model="formData.cdydq" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="推/拖飞机" prop="ttfj" :borderBottom="true">
                    <global-number-input v-model="formData.ttfj" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="滑油" prop="hy" :borderBottom="true">
                    <global-number-input v-model="formData.hy" placeholder="请输入(单位/罐)"></global-number-input>
                </up-form-item>
                <up-form-item label="液压油" prop="yyy" :borderBottom="true">
                    <global-number-input v-model="formData.yyy" placeholder="请输入(单位/罐)"></global-number-input>
                </up-form-item>
                <up-form-item label="金属胶带" prop="jsjd" :borderBottom="true">
                    <global-number-input v-model="formData.jsjd" placeholder="请输入(单位/米)" :precision="2"></global-number-input>
                </up-form-item>
                <up-form-item label="其它消耗品" prop="qtxhp" :borderBottom="true">
                    <global-number-input v-model="formData.qtxhp" placeholder="请输入(单位/罐)"></global-number-input>
                </up-form-item>
                <!-- 常用非动力工具 -->
                <up-form-item label="常用非动力工具" :borderBottom="true"></up-form-item>
                <up-form-item label="件号" prop="cyfdlgjjh" :borderBottom="true">
                    <up-input v-model="formData.cyfdlgjjh" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="次数" prop="cyfdlgjcs" :borderBottom="true">
                    <global-number-input v-model="formData.cyfdlgjcs" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <!-- 常用动力工具 -->
                <up-form-item label="常用动力工具" :borderBottom="true"></up-form-item>
                <up-form-item label="件号" prop="cydlgjjh" :borderBottom="true">
                    <up-input v-model="formData.cydlgjjh" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="次数" prop="cydlgjcs" :borderBottom="true">
                    <global-number-input v-model="formData.cydlgjcs" placeholder="请输入(单位/次)"></global-number-input>
                </up-form-item>
                <up-form-item label="NDT人员工时" prop="ndtrygs" :borderBottom="true">
                    <up-input v-model="formData.ndtrygs" placeholder="请输入(人数*小时)" inputAlign="right" border="none" clearable></up-input>
                </up-form-item>
                <!-- NDT/孔探设备 -->
                <up-form-item label="NDT/孔探设备" :borderBottom="true"></up-form-item>
                <up-form-item label="件号" prop="ndtktsbjh" :borderBottom="true">
                    <up-input v-model="formData.ndtktsbjh" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="天数" prop="ndtktsbts" :borderBottom="true">
                    <global-number-input v-model="formData.ndtktsbts" placeholder="请输入(单位/天)"></global-number-input>
                </up-form-item>
                <!-- 升降车平台车 -->
                <up-form-item label="升降车平台车" :borderBottom="true"></up-form-item>
                <up-form-item label="人" prop="sjcptcr" :borderBottom="true">
                    <global-number-input v-model="formData.sjcptcr" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <up-form-item label="车" prop="sjcptcc" :borderBottom="true">
                    <global-number-input v-model="formData.sjcptcc" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 悬臂高空车 -->
                <up-form-item label="悬臂高空车" :borderBottom="true"></up-form-item>
                <up-form-item label="人" prop="xbgkcr" :borderBottom="true">
                    <global-number-input v-model="formData.xbgkcr" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <up-form-item label="车" prop="xbgkcc" :borderBottom="true">
                    <global-number-input v-model="formData.xbgkcc" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 停机坪 -->
                <up-form-item label="停机坪" prop="tjpzk" :borderBottom="true">
                    <global-radio v-model="formData.tjpzk" dictkey="eb_zk" radioAlign="right" clearable></global-radio>
                </up-form-item>
                <up-form-item prop="tjpxs" :borderBottom="true">
                    <global-number-input v-model="formData.tjpxs" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 北京（机库租用） -->
                <up-form-item label="北京（机库租用）" prop="bjjkzyzk" :borderBottom="true">
                    <global-radio v-model="formData.bjjkzyzk" dictkey="eb_zk" radioAlign="right" clearable></global-radio>
                </up-form-item>
                <up-form-item prop="bjjkzyxs" :borderBottom="true">
                    <global-number-input v-model="formData.bjjkzyxs" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 北京（试车坪） -->
                <up-form-item label="北京（试车坪）" prop="bjscpzk" :borderBottom="true">
                    <global-radio v-model="formData.bjscpzk" dictkey="eb_zk" radioAlign="right" clearable></global-radio>
                </up-form-item>
                <up-form-item prop="bjscpxs" :borderBottom="true">
                    <global-number-input v-model="formData.bjscpxs" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 非北京地区（机库租用） -->
                <up-form-item label="非北京地区（机库租用）" prop="fbjjkzyzk" :borderBottom="true">
                    <global-radio v-model="formData.fbjjkzyzk" dictkey="eb_zk" radioAlign="right" clearable></global-radio>
                </up-form-item>
                <up-form-item prop="fbjjkzyxs" :borderBottom="true">
                    <global-number-input v-model="formData.fbjjkzyxs" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
                <!-- 非北京地区（试车坪） -->
                <up-form-item label="非北京地区（试车坪）" prop="fbjscpzk" :borderBottom="true">
                    <global-radio v-model="formData.fbjscpzk" dictkey="eb_zk" radioAlign="right" clearable></global-radio>
                </up-form-item>
                <up-form-item prop="fbjscpxs" :borderBottom="true">
                    <global-number-input v-model="formData.fbjscpxs" placeholder="请输入(单位/小时)" :precision="2"></global-number-input>
                </up-form-item>
            </view>
            <!-- 其它工具 -->
            <view class="mocp-form">
                <up-form-item label="其它工具" :borderBottom="true">
                    <view style="width: 100%; display: flex; justify-content: flex-end">
                        <global-button type="text" @tap="addQtgj">添加</global-button>
                    </view>
                </up-form-item>
            </view>
            <template v-for="(item, index) in formData.qtgj" :key="index">
                <view class="mocp-title">
                    工具{{ index + 1 }}
                    <global-button text type="danger" @tap="delQtgj(index)">删除</global-button>
                </view>
                <view class="mocp-form">
                    <up-form-item label="件号" :borderBottom="true">
                        <up-input v-model="item.jh" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                    </up-form-item>
                    <up-form-item label="天数" :borderBottom="true">
                        <global-number-input v-model="item.ts" placeholder="请输入(单位/天)"></global-number-input>
                    </up-form-item>
                </view>
            </template>
        </up-form>
    </global-page>
</template>

<script setup>
import useElectronicBillStore from 'mocp/store/electronicBill'
import { formData, rules } from './constants/add.compositions'
import { navigateTo } from 'mocp/utils/jump'
import { onUnmounted, ref, watchEffect } from 'vue'
import { addQtgj, delQtgj, changeAcreg } from './constants/add.functionals'
import { validateParameters } from 'mocp/utils/tool'
import { getTerminalSelect } from 'mocp/utils/permission'
import { resetData } from './constants/sign.functionals'

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')
}
watchEffect(() => {
    formData.legs = formData.legs1 + '-' + formData.legs2 + '-' + formData.legs3
})
onUnmounted(() => {
    resetData()
})
</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: $mocp-fill-1;
    display: flex;
    justify-content: space-between;
}
.mocp-subtitle {
    padding-top: 12rpx;
    margin-bottom: -12rpx;
}
</style>
