<template>
    <global-page title="筛选">
        <view class="screen-form">
            <up-form labelPosition="left" labelWidth="auto">
                <up-form-item label="航站" prop="terminal" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.terminal"
                        clearable
                        :options="baseStore.getTerminalSelect"
                        filter
                    />
                </up-form-item>

                <up-form-item label="机型" prop="acType" :borderBottom="true">
                    <global-picker
                        v-model="formData.acType"
                        pickAlign="right"
                        :options="baseStore.getTypeSelect"
                        clearable filter />
                </up-form-item>

                <up-form-item label="航司" prop="acOwn" :borderBottom="true">
                    <global-picker
                        v-model="formData.acOwn"
                        pickAlign="right"
                        :options="baseStore.getAirlineSelect"
                        clearable
                        filter
                    />
                </up-form-item>
            </up-form>
        </view>
        <template #bottom>
            <view class="footer-btn">
                <up-row gutter="10">
                    <up-col span="6">
                        <global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button>
                    </up-col>
                    <up-col span="6">
                        <global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button>
                    </up-col>
                </up-row>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { cloneDeep } from 'lodash'
import useBaseStore from 'mocp/store/base'
import useFlightSupportStore from 'mocp/store/flight-support'
import { onUnload } from '@dcloudio/uni-app'

//获取下拉框选项
const baseStore = useBaseStore()

const flightSupportStore = useFlightSupportStore()
//获取查询表单数据
const {screenData} = storeToRefs(flightSupportStore)
const formData = ref(cloneDeep(screenData.value))

// 重置
const handleReset = () => {
    flightSupportStore.resetScreenForm()
    uni.$mocpJump.redirectTo('/panel/flight-support/list')
    uni.$emit('screenReload')
}

// 提交
const handleConfirm = () => {
    flightSupportStore.setStateScreen(formData.value)
    uni.$mocpJump.redirectTo('/panel/flight-support/list')
    uni.$emit('screenReload')
}

onUnload(() => {
    uni.$off('screenReload')
})
</script>
<style lang="scss" scoped>
.screen-form {
    padding: 24rpx 24rpx 0 24rpx;
    background: #fff;
}

.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
