<template>
    <div class="search-bar">
        <el-form :inline="true">
            <el-form-item v-for="(item, index) in form" :key="index" :label="item.label">
                <template
                    v-if="
                        item.component &&
                            item.component !== 'SelectOrgTree' &&
                            item.component !== 'DgDatePicker' &&
                            item.component !== 'SelectApp'
                    "
                >
                    <component
                        :is="item.component"
                        v-model="item.value"
                        v-bind="item.attr"
                        :placeholder="setPlaceHolder(item)"
                        clearable
                    />
                </template>
                <!-- 下拉机构树 -->
                <template v-else-if="item.component == 'SelectOrgTree'">
                    <select-org-tree
                        ref="orgTree"
                        v-model="item.value"
                        :api-name="item.apiName || 'getTree'"
                        :nodeKey="item.nodeKey || 'id'"
                        :name="item.name"
                        :type="item.type"
                        :filterable="item.filterable == false ? false : true"
                        :defaultCurrentUserOrg="item.defaultCurrentUserOrg"
                        :defaultSearch="item.defaultSearch == false ? false : true"
                        :needDeleted="item.needDeleted === true ? true : false"
                        :searchParams="item.searchParams ? item.searchParams : {}"
                        v-bind="item.attr"
                        @search="search"
                    ></select-org-tree>
                </template>
                <!-- 应用系统下拉列表 -->
                <template v-else-if="item.component == 'SelectApp'">
                    <select-app
                        ref="app"
                        :api-url="item.apiUrl"
                        :tableSearchName="item.name"
                        :valueName="item.valueName"
                        :labelName="item.labelName"
                        :placeholder="item.placeholder"
                        @submitAppValue="getAppValue"
                        @submitCurrentApp="getCurrentApp"
                    ></select-app>
                </template>
                <!-- 时间 -->
                <template v-else-if="item.component == 'DgDatePicker'">
                    <dg-date-picker
                        v-model="item.value"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :clearable="item.clearable === false ? false : true"
                        :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                        :unlink-panels="true"
                        :default-time="['00:00:00', '23:59:59']"
                        v-bind="item.attr"
                    >
                    </dg-date-picker>
                </template>
            </el-form-item>
            <el-form-item>
                <dg-button type="primary" @click="handleSearch" :icon="'查询' | optIcon">查询</dg-button>
                <dg-button @click="handleReset" :icon="'重置' | optIcon">重置</dg-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import selectOrgTree from "@/components/select-org-tree"
import selectApp from "@/components/select-app"
import _ from "lodash"
export default {
    props: {
        conditionForm: {
            type: Array
        },
        resetable: {
            type: Boolean,
            default: true
        }
    },
    components: { selectOrgTree, selectApp },
    data() {
        return {
            form: []
        }
    },
    computed: {},
    watch: {
        conditionForm: {
            immediate: true,
            handler(val) {
                this.form = val
            }
        }
    },
    methods: {
        setCondition() {
            let condition = {}
            this.form.forEach(item => {
                const { name, value, op, format, type } = item
                condition[name] = {
                    value,
                    op,
                    format,
                    type
                }
            })
            return condition
        },
        handleSearch() {
            this.$emit("submitSearch", this.setCondition())
        },
        handleReset() {
            const vm = this
            let form = _.cloneDeep(this.form)
            form.forEach(item => {
                if (item.component) {
                    item.value = ""
                    if (item.component == "SelectOrgTree") {
                        vm.$refs.orgTree[0].handleClearSelect()
                    } else if (item.component == "SelectApp") {
                        vm.$refs.app[0].handleClearSelect()
                    }
                }
            })
            this.form = form
        },
        // 获取机构树选中值
        getOrgTreeValue(val, key = "id") {
            const name = key == "id" ? "orgId" : "orgCode"
            this.form.find(item => item.name == name).value = val
        },
        // 默认查询
        search(defaultSearch) {
            if (defaultSearch) {
                this.handleSearch()
            }
            this.$emit("submitDefaultSearch", this.setCondition())
        },
        getOrgRootValue(val, key) {
            this.getOrgTreeValue(val, key)
            this.$emit("submitDefaultSearch", this.setCondition())
        },
        // 获取应用系统选中值
        getAppValue(val, name) {
            this.form.find(item => item.name == name).value = val
        },
        // 获取选中应用
        getCurrentApp(item) {
            this.$emit("submitCurrentApp", item)
        },
        setPlaceHolder(item) {
            const { component, label } = item
            const inputType = ["ElInput, DgInput"]
            const selectType = ["ElSelect", "DgSelect", "DgDatePicker"]
            let prefix
            if (inputType.includes(component)) {
                prefix = "请输入"
            } else if (selectType.includes(component)) {
                prefix = "请选择"
            } else {
                prefix = "请输入"
            }

            return prefix + label
        }
    },
    created() {},
    mounted() {}
}
</script>

<style lang="scss" scoped>
/deep/ .el-button--small {
    min-width: 90px;
}
</style>
