<template>
    <div class='input-dialog'>
        <div
            @click='show'
            style='color: #1F2429;cursor: pointer;position:absolute;z-index:9999;'
            :style='`right:${type === 1 ? "30px" : "12px"};top:${type === 1 ? "77px" : "0px"};`'
        >
            <img style='margin-right:4px;' src='@/assets/imgs/select.png' />
            <span>筛选</span>
        </div>
        <div
            v-if='dialogFormVisible'
            style='width:280px;height:250px;background:rgba(255,255,255,1);margin-top:40px;
            box-shadow:0px 2px 10px 0px rgba(31,35,41,0.1);border:1px solid rgba(228,229,231,1);z-index:10000;
            position:absolute;'
            :style='`right:${type === 1 ? "40px" : "0"};height:${type === 6 || type === 5? "420px":"250px"}`'
        >
            <el-form style=' padding:20px 24px;' v-if='type==1'>
                <p style='margin:0 0 8px 0'>生产厂商</p>
                <el-input
                    placeholder='搜索生产厂商'
                    style='width:232px;margin-right:12px'
                    size='small'
                    clearable
                    prefix-icon='el-icon-search'
                    v-model='inputForm.manufacturer'
                ></el-input>
                <p style='margin:16px 0 8px 0'>服务商</p>
                <el-input
                    placeholder='搜索服务商'
                    clearable
                    style='width:232px;margin-right:12px'
                    size='small'
                    prefix-icon='el-icon-search'
                    v-model='inputForm.fws'
                ></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==2'>
                <p style='margin:0 0 8px 0'>任务编号</p>
                <el-input placeholder='搜索任务编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:232px;'></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==3'>
                <p style='margin:0 0 8px 0'>工单编号</p>
                <el-input placeholder='搜索工单编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:232px;'></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==4'>
                <p style='margin:0 0 8px 0'>验收结果</p>
                <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:232px'>
                    <el-option v-for='item in statusOption' :key='item.id' :label='item.name' :value='item.id'></el-option>
                </el-select>
                <p style='margin:16px 0 8px 0'>验收日期</p>
                <el-date-picker
                    clearable
                    style='width:232px'
                    v-model='inputForm.yssjwcsj'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==5'>
                <p style='margin:16px 0 8px 0'>要求完成日期</p>
                <el-date-picker
                    clearable
                    style='width:232px'
                    v-model='inputForm.reportdate'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
                <p style='margin:16px 0 8px 0'>实际完工日期</p>
                <el-date-picker
                    clearable
                    style='width:232px'
                    v-model='inputForm.real'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
                <p style='margin:16px 0 8px 0'>位置名称编号</p>
                <el-input
                    placeholder='搜索位置名称编号'
                    size='small'
                    clearable
                    prefix-icon='el-icon-search'
                    v-model='inputForm.locationName'
                    style='width:232px;margin-right:12px'
                ></el-input>
                <!-- 日常维保,执行搜索人放入筛选 -->
                <p style='margin:16px 0 8px 0'>搜索执行人</p>
                <el-input
                    placeholder='搜索执行人'
                    size='small'
                    clearable
                    prefix-icon='el-icon-search'
                    v-model='inputForm.people'
                    style='width:232px;margin-right:12px'
                ></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==6'>
                <p style='margin:16px 0 8px 0'>任务完成日期</p>
                <el-date-picker
                    clearable
                    style='width:232px'
                    v-model='inputForm.complete'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
                <p style='margin:16px 0 8px 0'>异常工单编号</p>
                <p>
                    <el-input clearable placeholder='异常工单编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.bill' style='width:232px;'></el-input>
                </p>
                <p style='margin:16px 0 8px 0'>异常工单填报日期</p>
                <el-date-picker
                    clearable
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    v-model='inputForm.ycgdtbsj'
                    style='width:232px'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>

                <p style='margin:16px 0 8px 0'>异常工单验收日期</p>
                <el-date-picker
                    clearable
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    style='width:232px'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                    v-model='inputForm.ycgdyssj'
                ></el-date-picker>
            </el-form>
            <div style='position:absolute;bottom:24px;right:24px;z-index:10000'>
                <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
                <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '232px',
            inputForm: {
                fws: '',
                manufacturer: '',
                gzglid: '',
                wonum: '',
                ssfasm: '',
                status: '1',
                yssjwcsj: '',
                //6
                complete: '',
                bill: '',
                ycgdtbsj: '',
                ycgdyssj: '',
                //5
                reportdate: '',
                real: '',
                locationName: '',
                people: '',
            },
        }
    },
    props: ['type', 'statusOption'],
    methods: {
        show() {
            this.dialogFormVisible = !this.dialogFormVisible
        },
        confirm() {
            if (this.type == 1) {
                this.$emit('confirm', this.inputForm.fws, this.inputForm.manufacturer)
            } else if (this.type == 2) {
                this.$emit('confirm', this.inputForm.gzglid)
            } else if (this.type == 3) {
                this.$emit('confirm', this.inputForm.wonum)
            } else if (this.type == 4) {
                this.$emit('confirm', this.inputForm.status, this.inputForm.yssjwcsj)
            } else if (this.type == 6) {
                this.$emit('confirm', this.inputForm.complete, this.inputForm.bill, this.inputForm.ycgdtbsj, this.inputForm.ycgdyssj)
            } else if (this.type == 5) {
                this.$emit('confirm', this.inputForm.reportdate, this.inputForm.real, this.inputForm.locationName, this.inputForm.people)
            }
            this.dialogFormVisible = false
            // TODO: 删除清空栏位值
            // this.inputForm.status = ''
            // this.inputForm.yssjwcsj = ''
            // this.inputForm.complete = ''
            // this.inputForm.bill = ''
            // this.inputForm.ycgdtbsj = ''
            // this.inputForm.ycgdyssj = ''
            // this.inputForm.reportdate = ''
            // this.inputForm.real = ''
            // this.inputForm.locationName = ''
        },
    },
    mounted() {},
}
</script>

<style lang="less" scoped>
.input-diadlog {
    position: relative;
}
</style>