<template>
    <global-page title="筛选">
        <view class="search-form">
            <up-form labelPosition="left" labelWidth="auto">
                <up-form-item label="状态" prop="isOpen" :borderBottom="true">
                    <global-picker v-model="formData.isOpen" pickAlign="right" clearable dictkey="mae_isOpen"></global-picker>
                </up-form-item>
                <up-form-item label="机号" prop="ac" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.ac" :options="deviceNumList" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="机型" prop="acType" :borderBottom="true">
                    <global-picker v-model="formData.acType" pickAlign="right" :options="baseStore.getTypeSelect" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="航司" prop="acOwn" :borderBottom="true">
                    <global-picker v-model="formData.acOwn" pickAlign="right" :options="baseStore.getAirlineSelect" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="事件分类" prop="eventType" :borderBottom="true">
                    <global-picker v-model="formData.eventType" pickAlign="right" dictkey="mae_eventType" clearable></global-picker>
                </up-form-item>
                <up-form-item label="运行事件" prop="runEvent" :borderBottom="true">
                    <global-picker v-model="formData.runEvent" pickAlign="right" dictkey="mae_runEvent" clearable></global-picker>
                </up-form-item>
                <up-form-item label="发生航站" prop="happenStn" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.happenStn"
                        clearable
                        :options="baseStore.getTerminalSelect"
                        filter
                    ></global-picker>
                </up-form-item>
                <up-form-item label="延误定性" prop="delayNature" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.delayNature" clearable :options="delayNature"></global-picker>
                </up-form-item>
                <up-form-item label="延误属性" prop="delayProperty" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.delayProperty" clearable :options="delayProperty"></global-picker>
                </up-form-item>
                <up-form-item label="日报生成日期" :borderBottom="true">
                    <global-calendar
                        pickAlign="right"
                        v-model:startTime="formData.startTime"
                        v-model:endTime="formData.stopTime"
                        clearable
                    ></global-calendar>
                </up-form-item>
                <up-form-item label="航班号" prop="flightNo" :borderBottom="true">
                    <global-picker pickAlign="right" v-model="formData.flightNo" clearable :options="flightNumList" filter></global-picker>
                </up-form-item>
                <up-form-item label="事件描述" prop="msg" :borderBottom="true">
                    <up-input v-model="formData.msg" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
                </up-form-item>
            </up-form>
        </view>
        <template #bottom>
            <view class="footer-btn">
                <up-row gutter="10">
                    <up-col span="6">
                        <global-button type="primary" plain 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 useBaseStore from 'mocp/store/base'
import { storeToRefs } from 'pinia'
import { cloneDeep } from 'lodash'
import { ref } from 'vue'
import useMechanicalAbnormalEventsStore from 'mocp/store/mechanicalAbnormalEvents'

//获取下拉框选项
const baseStore = useBaseStore()
const {
    selectList: { deviceNumList, flightNumList },
    rcOptions: { delayNature, delayProperty }
} = useBaseStore()
const mechanicalAbnormalEventsStore = useMechanicalAbnormalEventsStore()
//获取查询表单数据
const { searchData } = storeToRefs(mechanicalAbnormalEventsStore)
const formData = ref(cloneDeep(searchData.value))
const handleReset = () => {
    mechanicalAbnormalEventsStore.resetForm()
    uni.$mocpJump.navigateBack()
    uni.$emit('mechanicalAbnormalEventsReload')
}
const handleConfirm = () => {
    mechanicalAbnormalEventsStore.setState('searchData', formData.value)
    uni.$mocpJump.navigateBack()
    uni.$emit('mechanicalAbnormalEventsReload')
}
</script>
<style lang="scss" scoped>
.search-form {
    padding: 24rpx 24rpx 0 24rpx;
    background: #fff;
}
.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
