<template>
    <global-page title="筛选">
        <view class="search-form">
            <up-form
                labelPosition="left"
                labelWidth="auto">
                <up-form-item
                    label="机号"
                    prop="machine_number"
                    :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.machine_number"
                        :options="deviceNumList"
                        clearable
                        filter
                    />
                </up-form-item>

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

                <up-form-item
                    label="航司"
                    prop="aviation"
                    :borderBottom="true">
                    <global-picker
                        v-model="formData.aviation"
                        pickAlign="right"
                        :options="baseStore.getAirlineSelect"
                        clearable
                        filter
                    />
                </up-form-item>

                <up-form-item label="航站" prop="termin" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.termin"
                        clearable
                        :options="baseStore.getTerminalSelect"
                        filter
                    ></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
                    />
                </up-form-item>

                <up-form-item label="保障阶段" prop="guarantee" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.guarantee"
                        clearable
                        :options="getParamsByType('GuaranteeStage')"
                        filter
                    ></global-picker>
                </up-form-item>

                <up-form-item label="完成状态" prop="rlease_state" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.rlease_state"
                        clearable
                        :options="getParamsByType('ReleaseStatu')"
                        filter
                    ></global-picker>
                </up-form-item>

                <up-form-item label="运行阶段" prop="function_Info" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.function_Info"
                        clearable
                        :options="getParamsByType('OperationPhase')"
                        filter
                    ></global-picker>
                </up-form-item>

                <up-form-item label="故障状态" prop="failure_state" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.failure_state"
                        clearable
                        :options="getParamsByType('RetentionBasis')"
                        filter
                    ></global-picker>
                </up-form-item>

                <up-form-item label="专业类别" prop="professional" :borderBottom="true">
                    <global-picker
                        pickAlign="right"
                        v-model="formData.professional"
                        clearable
                        :options="getParamsByType('MajorCategory')"
                        filter
                    ></global-picker>
                </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 useInforDisclosureStore from 'mocp/store/inforDisclosure'
import { getParamsByType } from 'mocp/hooks/use-params/useParams'

//获取下拉框选项
const baseStore = useBaseStore()
const {selectList: {deviceNumList}} = useBaseStore()
const inforDisclosureStore = useInforDisclosureStore()
//获取查询表单数据
const {searchData} = storeToRefs(inforDisclosureStore)
const formData = ref(cloneDeep(searchData.value))
const handleReset = () => {
    inforDisclosureStore.resetForm()
    uni.$mocpJump.navigateTo('/panel/inforDisclosure/list')
    uni.$emit('inforDisclosureReload')
}
const handleConfirm = () => {
    inforDisclosureStore.setState('searchData', formData.value)
    uni.$mocpJump.navigateTo('/panel/inforDisclosure/list')
    uni.$emit('inforDisclosureReload')
}
</script>
<style
    lang="scss"
    scoped>
.search-form {
    padding: 24rpx 24rpx 0 24rpx;
    background: #fff;
}

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