<template>
    <global-page
        :title="formData.id > 0 ? '编辑除防冰收费单' : '新建除防冰收费单'"
        :showNavRight="formData.id > 0 ? false : true"
        navRightText="今天签单"
        @handleRightClick="navigateTo('/panel/electronicBill/deicing/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="guaranteeUnit" :borderBottom="true" required>
                    <global-picker pickAlign="right" v-model="formData.guaranteeUnit" dictkey="eb_guaranteeUnit" clearable></global-picker>
                </up-form-item>
                <up-form-item label="当日天气" prop="weatherToday" :borderBottom="true" required>
                    <global-picker pickAlign="right" v-model="formData.weatherToday" dictkey="eb_weatherToday" clearable></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="modelType" :borderBottom="true" required>
                    <global-picker pickAlign="right" v-model="formData.modelType" dictkey="eb_modelType" clearable></global-picker>
                </up-form-item>
                <up-form-item label="进港航班号" prop="flightNoIn" :borderBottom="true">
                    <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" required>
                    <up-input v-model="formData.flightNoOut" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
            </view>
            <view class="mocp-title">除冰、防冰记录</view>
            <view class="mocp-form">
                <view class="mocp-switchs">
                    <view class="mocp-switch">
                        <view class="mocp-switch-label">定点除冰</view>
                        <global-switch v-model="formData.fixedPointDeicing"></global-switch>
                    </view>
                    <view class="mocp-switch">
                        <view class="mocp-switch-label">原机位除冰</view>
                        <global-switch v-model="formData.originalAircraftPositionDeicing"></global-switch>
                    </view>
                    <view class="mocp-switch">
                        <view class="mocp-switch-label">预除冰</view>
                        <global-switch v-model="formData.expectDeicing"></global-switch>
                    </view>
                </view>
            </view>
            <!-- 除冰记录 -->
            <view class="mocp-title">除冰记录</view>
            <view class="mocp-form">
                <up-form-item label="除冰液型号" prop="deicingType" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.deicingType" dictkey="eb_deicingType" clearable></global-picker>
                </up-form-item>
                <up-form-item label="混合比" prop="deicingMix" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.deicingMix" dictkey="eb_antiicingMix" clearable></global-picker>
                </up-form-item>
                <up-form-item label="自定义混合比" prop="deicingMix" :borderBottom="true" v-if="formData.deicingMix == 'Other'">
                    <view style="display: flex; align-items: center">
                        <global-number-input
                            v-model="formData.deicingMix1"
                            placeholder="请输入"
                            inputAlign="left"
                            border="surround"
                        ></global-number-input>
                        <text style="margin: 0 20rpx">:</text>
                        <global-number-input
                            v-model="formData.deicingMix2"
                            placeholder="请输入"
                            inputAlign="left"
                            border="surround"
                        ></global-number-input>
                    </view>
                </up-form-item>
                <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.deicingCartNo1" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingPersion1" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.deicingQuantity1"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.deicingUnit1" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingCartNo2" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingPersion2" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.deicingQuantity2"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.deicingUnit2" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingCartNo3" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingPersion3" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.deicingQuantity3"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.deicingUnit3" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingCartNo4" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.deicingPersion4" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.deicingQuantity4"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.deicingUnit4" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="mocp-button">
                    <global-button type="primary" :radius="0" border @tap="submitDeicing">提交</global-button>
                </view>
                <up-form-item label="用量合计" prop="deicingQuantityTotal" :borderBottom="true">
                    <up-input
                        type="number"
                        v-model="formData.deicingQuantityTotal"
                        inputAlign="right"
                        border="none"
                        placeholder="填写混合比后自动计算"
                        readonly
                        clearable
                    ></up-input>
                </up-form-item>
                <up-form-item label="开始时间" prop="deicingStartTime" :borderBottom="true">
                    <global-date
                        mode="time"
                        pickAlign="right"
                        clearable
                        v-model="formData.deicingStartTime"
                        :timestamp="false"
                        valueFormat="HH:mm"
                        placeholder="请选择时间"
                    ></global-date>
                </up-form-item>
                <up-form-item label="结束时间" prop="deicingEndTime" :borderBottom="true">
                    <global-date
                        mode="time"
                        pickAlign="right"
                        clearable
                        v-model="formData.deicingEndTime"
                        :timestamp="false"
                        valueFormat="HH:mm"
                        placeholder="请选择时间"
                    ></global-date>
                </up-form-item>
            </view>
            <!-- 防冰记录 -->
            <view class="mocp-title">防冰记录</view>
            <view class="mocp-form">
                <up-form-item label="防冰液型号" prop="antiicingType" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.antiicingType" dictkey="eb_antiicingType" clearable></global-picker>
                </up-form-item>
                <up-form-item label="混合比" prop="antiicingMix" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.antiicingMix" dictkey="eb_antiicingMix" clearable></global-picker>
                </up-form-item>
                <up-form-item label="自定义混合比" prop="antiicingMix" :borderBottom="true" v-if="formData.antiicingMix == 'Other'">
                    <view style="display: flex; align-items: center">
                        <global-number-input
                            v-model="formData.antiicingMix1"
                            placeholder="请输入"
                            inputAlign="left"
                            border="surround"
                        ></global-number-input>
                        <text style="margin: 0 20rpx">:</text>
                        <global-number-input
                            v-model="formData.antiicingMix2"
                            placeholder="请输入"
                            inputAlign="left"
                            border="surround"
                        ></global-number-input>
                    </view>
                </up-form-item>
                <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.antiicingCartNo1" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingPersion1" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.antiicingQuantity1"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.antiicingUnit1" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingCartNo2" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingPersion2" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.antiicingQuantity2"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.antiicingUnit2" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingCartNo3" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingPersion3" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.antiicingQuantity3"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.antiicingUnit3" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                        <view class="sample-tbody-tr">
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingCartNo4" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <up-input v-model="formData.antiicingPersion4" placeholder="请输入" clearable></up-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-number-input
                                    v-model="formData.antiicingQuantity4"
                                    :greater="0"
                                    :precision="2"
                                    inputAlign="left"
                                    border="surround"
                                ></global-number-input>
                            </view>
                            <view class="spacer"></view>
                            <view class="sample-tbody-td">
                                <global-picker v-model="formData.antiicingUnit4" dictkey="eb_antiicingUnit" clearable border></global-picker>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="mocp-button">
                    <global-button type="primary" :radius="0" border @tap="submitAntiicing">提交</global-button>
                </view>
                <up-form-item label="用量合计" prop="antiicingQuantityTotal" :borderBottom="true">
                    <up-input
                        type="number"
                        v-model="formData.antiicingQuantityTotal"
                        inputAlign="right"
                        border="none"
                        placeholder="填写混合比后自动计算"
                        readonly
                        clearable
                    ></up-input>
                </up-form-item>
                <up-form-item label="保持时间" prop="antiicingDuration" :borderBottom="true">
                    <up-input v-model="formData.antiicingDuration" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
                <up-form-item label="开始时间" prop="antiicingStartTime" :borderBottom="true">
                    <global-date
                        mode="time"
                        pickAlign="right"
                        clearable
                        v-model="formData.antiicingStartTime"
                        :timestamp="false"
                        valueFormat="HH:mm"
                        placeholder="请选择时间"
                    ></global-date>
                </up-form-item>
                <up-form-item label="结束时间" prop="antiicingEndTime" :borderBottom="true">
                    <global-date
                        mode="time"
                        pickAlign="right"
                        clearable
                        v-model="formData.antiicingEndTime"
                        :timestamp="false"
                        valueFormat="HH:mm"
                        placeholder="请选择时间"
                    ></global-date>
                </up-form-item>
            </view>
            <view class="mocp-form">
                <up-form-item label="备注" prop="remark" :borderBottom="true">
                    <up-input v-model="formData.remark" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
            </view>
        </up-form>
    </global-page>
    <!-- 除冰超量警告 -->
    <up-modal :show="showDeicing" title="超量使用" @confirm="confirmDeicing" closeOnClickOverlay @close="showDeicing = false">
        <view class="warn-modal">
            <view class="warn-title">请填写超量使用原因</view>
            <up-input v-model="formData.deicingRemark" border="bottom" placeholder="请输入" clearable></up-input>
            <view class="warn-upload">
                <global-upload-image
                    v-model="formData.deicingFile"
                    map-field-name="id"
                    :width="165"
                    :height="165"
                    :file-list="deicingFile"
                    @getFileList="getDeicingFile"
                ></global-upload-image>
            </view>
        </view>
    </up-modal>
    <!-- 防冰超量警告 -->
    <up-modal :show="showAntiicing" title="超量使用" @confirm="confirmAntiicing" closeOnClickOverlay @close="showAntiicing = false">
        <view class="warn-modal">
            <view class="warn-title">请填写超量使用原因</view>
            <up-input v-model="formData.antiicingRemark" border="bottom" placeholder="请输入" clearable></up-input>
            <view class="warn-upload">
                <global-upload-image
                    v-model="formData.antiicingFile"
                    map-field-name="id"
                    :width="165"
                    :height="165"
                    :file-list="antiicingFile"
                    @getFileList="getAntiicingFile"
                ></global-upload-image>
            </view>
        </view>
    </up-modal>
</template>

<script setup>
import useElectronicBillStore from 'mocp/store/electronicBill'
import {
    formData,
    rules,
    formRef,
    showDeicing,
    showAntiicing,
    deicingFlag,
    antiicingFlag,
    deicingFile,
    antiicingFile
} from './constants/add.compositions'
import { navigateTo } from 'mocp/utils/jump'
import {
    changeAcreg,
    getOneTotal,
    handleFooterClick,
    confirmDeicing,
    confirmAntiicing,
    submitDeicing,
    submitAntiicing,
    getDeicingFile,
    getAntiicingFile
} from './constants/add.functionals'
import { onUnmounted, watch, watchEffect } from 'vue'
import { getTerminalSelect } from 'mocp/utils/permission'
import { resetData } from './constants/sign.functionals'

const electronicBillStore = useElectronicBillStore()
const {
    selectList: { allAc, allAcType, allAirline }
} = electronicBillStore

watchEffect(() => {
    //除冰用量合计
    const deicingQuantityTotal =
        getOneTotal(formData.deicingQuantity1, formData.deicingUnit1) +
        getOneTotal(formData.deicingQuantity2, formData.deicingUnit2) +
        getOneTotal(formData.deicingQuantity3, formData.deicingUnit3) +
        getOneTotal(formData.deicingQuantity4, formData.deicingUnit4)
    if (formData.deicingMix) {
        if (formData.deicingMix == 'Other') {
            if (formData.deicingMix1 && formData.deicingMix2) {
                const percent = parseFloat(formData.deicingMix1) / (parseFloat(formData.deicingMix1) + parseFloat(formData.deicingMix2))
                formData.deicingQuantityTotal = parseFloat((deicingQuantityTotal * percent).toFixed(4)) || undefined
            }
        } else {
            const percentArr = formData.deicingMix.split(':')
            const percent = parseFloat(percentArr[0]) / (parseFloat(percentArr[0]) + parseFloat(percentArr[1]))
            formData.deicingQuantityTotal = parseFloat((deicingQuantityTotal * percent).toFixed(4)) || undefined
        }
    } else {
        formData.deicingQuantityTotal = undefined
    }
    //防冰用量合计
    const antiicingQuantityTotal =
        getOneTotal(formData.antiicingQuantity1, formData.antiicingUnit1) +
        getOneTotal(formData.antiicingQuantity2, formData.antiicingUnit2) +
        getOneTotal(formData.antiicingQuantity3, formData.antiicingUnit3) +
        getOneTotal(formData.antiicingQuantity4, formData.antiicingUnit4)
    if (formData.antiicingMix) {
        if (formData.antiicingMix == 'Other') {
            if (formData.antiicingMix1 && formData.antiicingMix2) {
                const percent = parseFloat(formData.antiicingMix1) / (parseFloat(formData.antiicingMix1) + parseFloat(formData.antiicingMix2))
                formData.antiicingQuantityTotal = parseFloat((antiicingQuantityTotal * percent).toFixed(4)) || undefined
            }
        } else {
            const percentArr = formData.antiicingMix.split(':')
            const percent = parseFloat(percentArr[0]) / (parseFloat(percentArr[0]) + parseFloat(percentArr[1]))
            formData.antiicingQuantityTotal = parseFloat((antiicingQuantityTotal * percent).toFixed(4)) || undefined
        }
    } else {
        formData.antiicingQuantityTotal = undefined
    }
})
watch([() => formData.deicingQuantityTotal, () => formData.weatherToday, () => formData.modelType], () => {
    deicingFlag.value = false
    formData.deicingRemark = ''
    formData.deicingFile = ''
})
watch([() => formData.antiicingQuantityTotal, () => formData.weatherToday, () => formData.modelType], () => {
    antiicingFlag.value = false
    formData.antiicingRemark = ''
    formData.antiicingFile = ''
})
// 海航集团内部的宽体机——A330-，787-，747-，777-，A350-,其余为窄体，集团外部机型-机型类别无对应数据需要手动选择
const prefixes = ['A330-', '787-', '747-', '777-', 'A350-']
watchEffect(() => {
    if (formData.model) {
        if (prefixes.some((prefix) => formData.model.startsWith(prefix))) {
            formData.modelType = '1'
        } else {
            formData.modelType = '2'
        }
    }
})
onUnmounted(() => {
    resetData()
})
</script>
<style lang="scss" scoped>
:deep(.u-fade-zoom-enter-active) {
    z-index: 100 !important;
}
:deep(.u-fade-enter-active) {
    z-index: 100 !important;
}
:deep(.u-fade-leave-active) {
    z-index: 100 !important;
}
@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;
}
.mocp-subtitle {
    padding-top: 12rpx;
    margin-bottom: -12rpx;
}
.sample-table {
    padding-bottom: 0;
}
.warn-modal {
    width: 100%;
    .warn-title {
        text-align: center;
        color: #969799;
        font-size: 28rpx;
    }
    .warn-upload {
        margin-top: 24rpx;
    }
}
.mocp-switchs {
    display: flex;
    .mocp-switch {
        padding: 24rpx 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &-label {
            margin-bottom: 24rpx;
            color: $mocp-text-5;
        }
    }
}
.mocp-button {
    padding-top: 24rpx;
}
</style>
