<template>
    <div class="dhc-table-search" v-if="columns.length">
        <a-form ref="formRef" :model="searchParam" :rules="rules"
            :label-width="formProps && formProps.labelWidth ? formProps.labelWidth : labelWidth" v-bind="formProps">
            <a-row :gutter="20" class="first-row">
                <a-col v-for="(item, index) in columns" v-show="handlerItemShow(index)" :key="item.prop"
                    :span="formSpan(item)" :index="index">
                    <a-form-item :label="`${item.label} :`" :prop="item.prop" v-bind="item.search.formItemProps">
                        <SearchFormItem :column="item" :searchParam="searchParam" :search="search" />
                    </a-form-item>
                </a-col>
                <a-col :span="operationCol">
                    <div class="operation">
                        <a-button type="primary" icon="el-icon-search" size="mini"
                            @click="searchFormHandler({ ...searchParam, isButton: true })">搜索</a-button>
                        <a-button icon="el-icon-refresh-right" size="mini" @click="reset(initValues)">重置</a-button>
                        <!-- <a-button v-if="columns.length > searchCol-1"  type="text" size="small" link class="search-isOpen" @click="collapsed = !collapsed">

{{ collapsed ? "收起" : "展开" }}

<i v-if="collapsed" class="el-icon-arrow-up"></i>

<i v-else class="el-icon-arrow-down"></i>

</a-button> -->
                    </div>
                </a-col>
            </a-row>
            <a-row>
                <a-col>
                    <div class="expansion-button">
                        <a-button v-if="columns.length > foldedlinesNum * searchCol - 1" type="text" size="small"
                            @click="$emit('collapsedChange')" link class="expansion-button1">
                            <i v-if="collapsed" class="el-icon-arrow-up"></i>
                            <i v-else class="el-icon-arrow-down"></i>
                            {{ collapsed ? "收起" : "展开更多条件" }}
                        </a-button>
                    </div>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
import SearchFormItem from './components/SearchFormItem.vue'
// import { setFormItemStyle, rebuildVaildMessage } from '@/utils/util.ts'
import { rebuildVaildMessage } from '@/utils/util.ts'

import settings from '@/settings';
const { proTable } = settings
export default {
    props: {
        columns: { // 搜索配置列
            type: Array,
            require: true,
            default: () => []
        },
        searchParam: { // 搜索参数
            type: Object,
            default: () => ({})
        },
        search: Function, // 搜索方法
        reset: Function, // 重置方法
        searchCol: {
            type: [Number, String],
            default: () => 3
        },
        tableCollapsed: Boolean, //表单是否展开 true展开；false收起
        labelWidth: { //查询表单项label宽度
            type: String,
            default: () => "120px"
        },
        formProps: {     //查询表单参数
            type: Object,
            default: () => ({})
        },
        searchDefaultShowRow: [Number, String] //查询表单默认展示的行数
    },
    components: {
        SearchFormItem,
    },
    data () {
        let propLabel = {}
        this.columns.forEach(item => {
            propLabel[item.prop] = item.label
        })
        let { rules = {} } = this.formProps
        //从settings文件中获取 当点收起按钮时展示几行
        let { foldedlinesNum = 1 } = proTable.searchForm
        //重构rules,对必输，最小长度，最大长度校验信息进行处理
        rebuildVaildMessage(rules, propLabel)
        return {
            collapsed: this.tableCollapsed,
            initValues: {},
            //收起按钮被点击标志
            collapsedUpdataFlag: false,
            rules,
            //当点收起按钮时展示几行
            foldedlinesNum: foldedlinesNum
        }
    },
    mounted () {
        this.initValues = JSON.parse(JSON.stringify(this.searchParam))
        // setFormItemStyle();
    },
    methods: {
        getOrignRef () {
            return this.$refs.formRef
        },
        formSpan (item) {
            let { searchCol } = this
            //之后实现自定义span功能
            // let span = item.search.span ?? 1
            let span = 1
            return span * (24 / searchCol)
        },
        //控制表单项展示策略
        handlerItemShow (index) {
            let {
                searchCol,
                collapsed,
                searchDefaultShowRow,
                collapsedUpdataFlag,
                foldedlinesNum
            } = this
            //首次进入时，展示的项
            if (searchDefaultShowRow != undefined && searchDefaultShowRow != 0 && !collapsedUpdataFlag) {
                return index < searchDefaultShowRow * searchCol - 1
            }
            return index < foldedlinesNum * searchCol - 1 || (index >= searchCol - 1 && collapsed)
        },
        // 查询
        searchFormHandler (data) {
            let searchParam = Object.keys(data).filter((key) => data[key] !== null && data[key] != '' && data[key] !== undefined)
                .reduce((acc, key) => ({ ...acc, [key]: data[key] }), {});
            this.search(searchParam);
        }
    },
    computed: {
        operationCol () {
            //展开
            if (this.collapsed) {
                let { searchCol } = this
                //每列的长度
                let col = 24 / searchCol
                //最后一行空几列
                let row = this.columns.length % searchCol
                return (searchCol - row) * col;
            } else { //收起
                return 24 / this.searchCol
            }
        }
    },
    watch: {
        collapsed () {
            if (!this.collapsedUpdataFlag) {
                this.collapsedUpdataFlag = true
            }
        },
        tableCollapsed () {
            this.collapsed = this.tableCollapsed
        }
    }
}
</script>

<style lang="scss" scoped>
.dhc-table-search {
    background-color: white;
    margin-bottom: 5px;
    padding: 10px 5px 0px 5px;

    ::v-deep .el-form-item__error {
        padding-top: 0px;
        line-height: 0.8;
    }

    .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 8px 5px 5px 5px;
    }

    //解决数据项显示错行问题
    .el-row {
        display: flex;
        flex-wrap: wrap;
    }

    .first-row {
        .el-col {
            margin-bottom: 5px;
        }
    }

    .expansion-button {
        height: 24px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .expansion-button1 {
            padding: 5px 15px;
            border-radius: 8px 8px 0 0;
            background-color: rgb(240, 242, 245);
            color: #606266;
        }
    }

    ::v-deep.el-form-item {
        margin-bottom: 5px;
    }
}
</style>
