<template>
    <global-page title="筛选">
        <view class="search-form">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef">
                <up-form-item label="状态" prop="status" :borderBottom="true">
                    <global-picker
                        v-model="formData.status"
                        pickAlign="right"
                        clearable
                        :options="[
                            { label: 'OPEN', value: '1' },
                            { label: 'CLOSE', value: '0' }
                        ]"
                    ></global-picker>
                </up-form-item>
                <up-form-item label="是否有效" prop="valid" :borderBottom="true">
                    <global-picker
                        v-model="formData.valid"
                        pickAlign="right"
                        :options="[
                            { label: '有效', value: '1' },
                            { label: '无效', value: '0' }
                        ]"
                        clearable
                    ></global-picker>
                </up-form-item>
                <up-form-item label="基地/职能部门" prop="department" :borderBottom="true">
                    <global-picker v-model="formData.department" pickAlign="right" :options="department" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="考核对象" prop="appraisee" :borderBottom="true">
                    <global-picker v-model="formData.appraisee" pickAlign="right" :options="appraisee" clearable filter></global-picker>
                </up-form-item>
                <up-form-item label="事件类别" prop="eventType" :borderBottom="true">
                    <global-picker v-model="formData.eventType" pickAlign="right" clearable dictkey="ar_eventType"></global-picker>
                </up-form-item>
                <up-form-item label="机号" prop="ac" :borderBottom="true">
                    <global-picker v-model="formData.ac" pickAlign="right" clearable :options="deviceNumList" 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
                    ></global-calendar>
                </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 { formData, formRef } from './constants/search.compositions'
import useBaseStore from 'mocp/store/base'
import useAppraisalRecordStore from 'mocp/store/appraisal-record'
import { handleConfirm, handleReset } from './constants/search.functionals'
//获取下拉框选项
const {
    selectList: { deviceNumList }
} = useBaseStore()
const {
    selectList: { appraisee, department }
} = useAppraisalRecordStore()
</script>
<style lang="scss" scoped>
.search-form {
    padding: 24rpx 24rpx 0 24rpx;
    background: #fff;
}
.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
