<template>
    <div>
        <el-form
            inline
            size="small"
            label-width="80px"
            ref="queryParamsFormRef"
            :model="queryParamsForm"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    clearable
                    style="width: 240px"
                    placeholder="请输入关键字"
                    v-model="queryParamsForm.keyWord"
                />
            </el-form-item>
            <el-form-item label="领料单号" prop="code">
                <el-input
                    clearable
                    style="width: 240px"
                    placeholder="请输入领料单号"
                    v-model="queryParamsForm.code"
                />
            </el-form-item>
            <el-form-item label="领料单位" prop="unitId">
                <el-select
                    clearable
                    style="width: 240px"
                    v-model="queryParamsForm.unitId"
                    placeholder="请选择领料单位"
                >
                    <el-option
                        v-for="item in unitList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="工程名称" prop="lotId">
                <el-select
                    clearable
                    style="width: 240px"
                    v-model="queryParamsForm.lotId"
                    placeholder="请选择工程名称"
                >
                    <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="出库日期">
                <el-date-picker
                    clearable
                    type="daterange"
                    v-model="outTime"
                    style="width: 240px"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    end-placeholder="结束日期"
                    start-placeholder="开始日期"
                    placeholder="请选择出库日期"
                    @change="onOutTimeChange"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="mini" plain @click="handleQuery"
                    >查询</el-button
                >
                <el-button size="mini" type="warning" @click="handleReset"
                    >重置</el-button
                >
                <el-button size="mini" type="primary" @click="handleExport"
                    >导出</el-button
                >
                <el-button
                    size="mini"
                    type="success"
                    @click="handleOutboundOrder"
                    >出库单</el-button
                >
            </el-form-item>
        </el-form>

        <OutboundOrder
            v-if="outboundVisible"
            :unitList="unitList"
            :projectList="projectList"
            :outboundVisible="outboundVisible"
            @handleClose="handleClose"
        />
    </div>
</template>

<script>
import OutboundOrder from './outbound-order'
import { getProData, getUnitData } from '@/api/stquery/deviceScrapQuery'
export default {
    components: {
        OutboundOrder,
    },
    data() {
        return {
            outTime: [],
            unitList: [],
            projectList: [],
            outboundVisible: false,
            queryParamsForm: {
                code: '',
                lotId: '',
                unitId: '',
                keyWord: '',
                startTime: '',
                endTime: '',
            },
        }
    },
    created() {
        this.getUnitList()
        this.getProList()
    },
    methods: {
        async getUnitList() {
            const { data: res } = await getUnitData()
            this.unitList = res
        },
        async getProList() {
            const { data: res } = await getProData()
            this.projectList = res
        },
        onOutTimeChange(val) {
            if (val.length > 0) {
                const [_1, _2] = val
                this.queryParamsForm.startTime = _1
                this.queryParamsForm.endTime = _2
            }
        },
        handleQuery() {
            this.$emit('handleQuery', this.queryParamsForm)
        },
        handleReset() {
            this.outTime = []
            this.queryParamsForm.endTime = ''
            this.queryParamsForm.startTime = ''
            this.$refs.queryParamsFormRef.resetFields()
            this.$emit('handleQuery', this.queryParamsForm, 'reset')
        },
        handleExport() {
            this.$emit('handleExport', this.queryParamsForm)
        },
        handleOutboundOrder() {
            this.outboundVisible = true
        },
        handleClose() {
            this.outboundVisible = false
        },
    },
}
</script>
