<template>
    <el-form label-width="100px" :form="form" size="small" class="layout_conditional" :style="{'grid-template-areas': gridAreas}">
        <el-form-item v-for="(opt, i) in cOpts" :key="i" :label="opt.label">
            <OptComponent v-bind="opt"  :value="form[opt.dataIndex]" @change="change" />
        </el-form-item>
        <el-form-item v-if="Object.keys(cOpts).length > 0" label-width="0" :class="{'flex_end': Object.keys(cOpts).length % 4 === 0}">
            <el-button type="primary" size="small" class="btn_check" @click="checkHandle">查询</el-button>
            <el-button v-if="resetBtn" class="btn_reset" size="small" @click="resetHandle">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import OptComponent from './OptComponent'
export default {
    components: {
        OptComponent
    },
    props: {
        opts: {
            type: Object,
            default: () => ({})
        },
        resetBtn: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            form: Object.keys(this.opts).reduce((acc, field) => {
                acc[field] = this.opts[field].defaultVal || null
                return acc
            }, {}),
        }
    },
    watch: {
        opts: {
            handler(opts) {
                this.form = Object.keys(opts).reduce((acc, field) => {
                    acc[field] = this.form[field] || this.opts[field].defaultVal || null
                    return acc
                }, {})
            },
            deep: true
        }
    },
    computed: {
        cOpts() {
            return Object.keys(this.opts).reduce((acc, field) => {
                let opt = {
                    ...this.opts[field]
                }
                opt.dataIndex = field
                acc[field] = opt
                return acc
            }, {})
        },
        gridAreas() { // grid布局按钮位置
            let areas = "'. . . .'" + Object.keys(this.opts).reduce((acc, cur, i) => {
                if ((i + 1) % 4 === 0) {
                    acc += "'. . . .'"
                }
                return acc
            }, '')
            return areas.replace(/\.'$/g, "b'")
        }
    },
    methods: {
        initForm(opts, keepVal = false) {
            return Object.keys(opts).reduce((acc, field) => {
                acc[field] = (keepVal && this.form && this.form[field]) || opts[field].defaultVal || null
                return acc
            }, {})
        },
        resetHandle() {
            this.form = this.initForm(this.opts)
            this.checkHandle()
        },
        change(v, dataIndex) {
            this.form[dataIndex] = v
            this.$emit('change', {
                ...this.form
            })
        },
        checkHandle() {
            this.$emit('submit', this.form)
        }
    },
    created(){
        var lett = this;
        document.onkeydown = function (e) {
            var key = window.event.keyCode;
            if (key == 13) {
                lett.checkHandle();
            }
        }
    }
}
</script>

<style lang="scss">
.layout_conditional {
    display: grid;
    grid-template-columns: repeat(4, minmax(256px, 25%));
    margin-bottom: -22px;
    overflow: auto;

    .el-date-editor,
    .el-input.el-input--suffix,
    .el-select {
        width: 100%;
    }

    .flex_end {
        grid-area: b;

        .el-form-item__content {
            text-align: right;
        }
    }

    .btn_check {
        position: relative;
        top: 0px;
        margin-left: 16px;
    }

    .btn_reset {
        position: relative;
        // top: -1px;
        margin-left: 8px;
    }
}
</style>
