<template>
    <div class="search-pack">
        <el-row :gutter="20">
            <div v-for="(item, index) in fieldList">
                <el-col v-show="hidden && index < 2" :span="8">
                    <div class="grid-content">
                        <span>{{item.fieldName}}：</span>
                        <el-input
                            clearable
                            @clear="searchClick"
                            @keyup.enter.native='searchClick' v-if="item.fieldType === 'STRING' || item.fieldType === 'FIELD' || item.fieldType === undefined"
                            v-model="item.value"
                            size="small"
                            placeholder="请输入内容">
                        </el-input>
                        <el-input-number
                            @keyup.enter.native='searchClick'
                            v-if="item.fieldType === 'NUMBER'"
                            v-model="item.value"
                            size="small"
                            label="请输入内容">
                        </el-input-number>
                        <el-select v-if="item.fieldType === 'ENUM'" v-model="item.value" clearable @clear="searchClick" size="small" placeholder="请选择一项">
                            <el-option
                                v-for="item in item.enumList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-select v-if="item.fieldType === 'DICT'" v-model="item.value" clearable @clear="searchClick" size="small" placeholder="请选择一项">
                            <el-option
                                v-for="item in item.enumList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-date-picker
                            clearable
                            :editable="false"
                            v-show="item.fieldType === 'DATE'"
                            v-model="item.value"
                            type="datetimerange"
                            size="small"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            placeholder="请选择时间范围"
                            :clearable="false">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col v-show="!hidden" :span="8">
                    <div class="grid-content">
                        <span>{{item.fieldName}}：</span>
                        <el-input
                            clearable
                            @clear="searchClick"
                            @keyup.enter.native='searchClick' v-if="item.fieldType === 'STRING' || item.fieldType === 'FIELD' || item.fieldType === undefined"
                            v-model="item.value"
                            size="small"
                            placeholder="请输入内容">
                        </el-input>
                        <el-input-number
                            v-if="item.fieldType === 'NUMBER'"
                            v-model="item.value"
                            size="small"
                            label="请输入内容">
                        </el-input-number>
                        <el-select v-if="item.fieldType === 'ENUM'" v-model="item.value" clearable @clear="searchClick" size="small" placeholder="请选择一项">
                            <el-option
                                v-for="item in item.enumList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-select v-if="item.fieldType === 'DICT'" v-model="item.value" clearable @clear="searchClick" size="small" placeholder="请选择一项">
                            <el-option
                                v-for="item in item.enumList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-date-picker
                            clearable
                            @clear="searchClick"
                            :editable="false"
                            v-show="item.fieldType === 'DATE'"
                            v-model="item.value"
                            type="datetimerange"
                            size="small"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            placeholder="请选择时间范围"
                            :clearable="false">
                        </el-date-picker>
                    </div>
                </el-col>
            </div>
            <el-col v-if="hidden" :span="8">
                <div class="grid-content pack-up-bottom-pack">
                    <el-button @click="searchClick" type="primary" size="mini">搜索</el-button>
                    <el-button @click="resetClick" class="reset" size="mini">重置</el-button>
                    <el-button v-if="fieldList.length > 2" @click="unfoldClick" type="text">展开<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                </div>
            </el-col>
        </el-row>
        <el-row v-if="!hidden" type="flex" class="row-bg" justify="end" :gutter="20">
            <el-col :span="24">
                <div class="grid-content">
                    <el-button @click="searchClick" type="primary" size="mini">搜索</el-button>
                    <el-button @click="resetClick" class="reset" size="mini">重置</el-button>
                    <el-button v-if="fieldList.length > 2" @click="collapseClick" type="text">收起<i class="el-icon-arrow-up el-icon--right"></i></el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name: 'Search',
    props: {
        // 查询数据的code
        searchCode: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            fieldList: [],
            hidden: true
        }
    },
    methods: {
        searchClick () {
            console.info(111)
            let list = [];
            this.fieldList.map(item => {
                if (item.value !== undefined && item.value !== '' && item.value !== null) {
                    list.push({
                        fieldCode: item.fieldCode,
                        fieldType: item.fieldType,
                        value: item.value
                    })
                }
            })
            this.$emit('search', {
                searchCode: this.searchCode,
                filters: _.cloneDeep(list)
            })
        },
        resetClick () {
            let list = _.cloneDeep(this.fieldList)
            list.map(item => {
                delete item.value
            })
            this.fieldList = _.cloneDeep(list)
            this.$emit('reset', {
                searchCode: this.searchCode,
                filters: []
            })
        },
        unfoldClick () {
            this.hidden = false;
        },
        collapseClick () {
            this.hidden = true;
        }
    },
    mounted () {
        // 直接请求后端返回的接口，从接口中获取数据渲染col和row
        if (this.searchCode === undefined || this.searchCode === null) {
            this.$message.warning('请传入searchCode参数！');
        } else {
            request({
                url: `${process.env.API_HOST}/api/search/filterList`,
                method: 'get',
                data: {
                    searchCode: this.searchCode
                }
            }).then(response => {
                if (response.code === 600) {
                    this.fieldList = _.cloneDeep(response.data)
                } else {
                    this.$message.warning('请求出错，请重新操作！');
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .search-pack {
        text-align: right;

        .el-row {
            margin-bottom: 0px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .is-justify-end {
            .grid-content {
                justify-content: flex-end;
            }
        }

        .grid-content {
            min-height: 36px;
            margin-bottom: 10px;
            display: -webkit-flex;
            display: flex;
            align-items: center;

            span {
                display: inline-block;
                width: 175px;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
            }

            /deep/ .el-select {
                width: 100%;
            }

            /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner {
                width: 100%;
            }

            /deep/ .el-input-number {
                width: 100%;
            }
        }
    }


</style>
