<template>
    <div class="table-com-search-wrapper">
        <div class="table-com-search">
            <el-form
                @submit.prevent=""
                @keyup.enter="baTable.onTableAction('com-search', { event: 'submit-com-search-form' })"
                label-position="top"
                :model="baTable.comSearch.form"
            >
                <el-row>
                    <template v-for="(item, idx) in baTable.table.column" :key="idx">
                        <template v-if="item.operator !== false">
                            <!-- 自定义渲染 component、slot -->
                            <el-col
                                v-if="item.comSearchRender == 'customRender' || item.comSearchRender == 'slot'"
                                v-bind="{
                                    xs: item.comSearchColAttr?.xs ? item.comSearchColAttr?.xs : 24,
                                    sm: item.comSearchColAttr?.sm ? item.comSearchColAttr?.sm : 6,
                                    ...item.comSearchColAttr,
                                }"
                            >
                                <!-- 外部可以使用 :deep() 选择器修改css样式 -->
                                <div class="com-search-col" :class="item.prop">
                                    <div class="com-search-col-label" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
                                    <div class="com-search-col-input">
                                        <!-- 自定义组件/函数渲染 -->
                                        <component
                                            v-if="item.comSearchRender == 'customRender'"
                                            :is="item.comSearchCustomRender"
                                            :renderRow="item"
                                            :renderField="item.prop!"
                                            :renderValue="baTable.comSearch.form[item.prop!]"
                                        />

                                        <!-- 自定义渲染-slot -->
                                        <slot v-else-if="item.comSearchRender == 'slot'" :name="item.comSearchSlotName"></slot>
                                    </div>
                                </div>
                            </el-col>

                            <!-- 时间日期范围 -->
                            <el-col
                                v-else-if="
                                    (item.render == 'datetime' || item.comSearchRender == 'datetime' || item.comSearchRender == 'date') &&
                                    (item.operator == 'RANGE' || item.operator == 'NOT RANGE')
                                "
                                :xs="24"
                                :sm="12"
                            >
                                <div class="com-search-col" :class="item.prop">
                                    <div class="com-search-col-label w16" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
                                    <div class="com-search-col-input-range w83">
                                        <el-date-picker
                                            class="datetime-picker w100"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                                            :type="item.comSearchRender == 'date' ? 'daterange' : 'datetimerange'"
                                            :range-separator="$t('To')"
                                            :start-placeholder="getPlaceholder(item.operatorPlaceholder, 0, $t('el.datepicker.startDate'))"
                                            :end-placeholder="getPlaceholder(item.operatorPlaceholder, 1, $t('el.datepicker.endDate'))"
                                            :value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                                            :teleported="false"
                                            v-bind="item.comSearchInputAttr"
                                        />
                                    </div>
                                </div>
                            </el-col>

                            <!-- 时间范围 -->
                            <el-col
                                v-else-if="item.comSearchRender == 'time' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')"
                                :xs="24"
                                :sm="12"
                            >
                                <div class="com-search-col" :class="item.prop">
                                    <div class="com-search-col-label w16" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
                                    <div class="com-search-col-input-range w83">
                                        <el-time-picker
                                            class="time-picker w100"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            is-range
                                            :default-value="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                                            :range-separator="$t('To')"
                                            :start-placeholder="getPlaceholder(item.operatorPlaceholder, 0, $t('el.datepicker.startTime'))"
                                            :end-placeholder="getPlaceholder(item.operatorPlaceholder, 1, $t('el.datepicker.endTime'))"
                                            value-format="HH:mm:ss"
                                            v-bind="item.comSearchInputAttr"
                                        />
                                    </div>
                                </div>
                            </el-col>

                            <!-- 其他 -->
                            <el-col v-else :xs="24" :sm="6">
                                <div class="com-search-col" :class="item.prop">
                                    <div class="com-search-col-label" v-if="item.comSearchShowLabel !== false">{{ item.label }}</div>
                                    <!-- 数字范围 -->
                                    <div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
                                        <el-input
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            type="string"
                                            v-model="baTable.comSearch.form[item.prop! + '-start']"
                                            :clearable="true"
                                            v-bind="item.comSearchInputAttr"
                                        ></el-input>
                                        <div class="range-separator">{{ $t('To') }}</div>
                                        <el-input
                                            :placeholder="getPlaceholder(item.operatorPlaceholder, 1)"
                                            type="string"
                                            v-model="baTable.comSearch.form[item.prop! + '-end']"
                                            :clearable="true"
                                            v-bind="item.comSearchInputAttr"
                                        ></el-input>
                                    </div>
                                    <!-- 是否 [NOT] NULL -->
                                    <div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
                                        <el-checkbox
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :label="item.operator"
                                            size="large"
                                            v-bind="item.comSearchInputAttr"
                                        ></el-checkbox>
                                    </div>
                                    <div v-else-if="item.operator" class="com-search-col-input">
                                        <!-- 时间日期筛选 -->
                                        <el-date-picker
                                            class="datetime-picker w100"
                                            v-if="item.render == 'datetime' || item.comSearchRender == 'date' || item.comSearchRender == 'datetime'"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :type="item.comSearchRender == 'date' ? 'date' : 'datetime'"
                                            :value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            :teleported="false"
                                            v-bind="item.comSearchInputAttr"
                                        />

                                        <!-- 时间筛选 -->
                                        <el-time-picker
                                            class="time-picker w100"
                                            v-if="item.comSearchRender == 'time'"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            value-format="HH:mm:ss"
                                            v-bind="item.comSearchInputAttr"
                                        />

                                        <!-- tag、tags、select -->
                                        <el-select
                                            class="w100"
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            v-else-if="
                                                (item.render == 'tag' || item.render == 'tags' || item.comSearchRender == 'select') &&
                                                item.replaceValue
                                            "
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :multiple="item.operator == 'IN' || item.operator == 'NOT IN'"
                                            :clearable="true"
                                            v-bind="item.comSearchInputAttr"
                                        >
                                            <el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
                                        </el-select>

                                        <!-- 远程 select -->
                                        <BaInput
                                            v-else-if="item.comSearchRender == 'remoteSelect'"
                                            type="remoteSelect"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :attr="{ ...item.remote, ...item.comSearchInputAttr }"
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                        />

                                        <!-- 开关 -->
                                        <el-select
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            v-else-if="item.render == 'switch'"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :clearable="true"
                                            class="w100"
                                            v-bind="item.comSearchInputAttr"
                                        >
                                            <template v-if="!isEmpty(item.replaceValue)">
                                                <el-option
                                                    v-for="(opt, okey) in item.replaceValue"
                                                    :key="item.prop! + okey"
                                                    :label="opt"
                                                    :value="okey"
                                                />
                                            </template>
                                            <template v-else>
                                                <el-option :label="$t('utils.open')" value="1" />
                                                <el-option :label="$t('utils.close')" value="0" />
                                            </template>
                                        </el-select>

                                        <!-- 字符串 -->
                                        <el-input
                                            :placeholder="getPlaceholder(item.operatorPlaceholder)"
                                            v-else
                                            type="string"
                                            v-model="baTable.comSearch.form[item.prop!]"
                                            :clearable="true"
                                            v-bind="item.comSearchInputAttr"
                                        ></el-input>
                                    </div>
                                </div>
                            </el-col>
                        </template>
                    </template>
                    <el-col :xs="24" :sm="6">
                        <div class="com-search-col pl-20">
                            <el-button v-blur @click="baTable.onTableAction('com-search', { event: 'submit-com-search-form' })" type="primary">
                                {{ $t('Search') }}
                            </el-button>
                            <el-button @click="onResetForm()">{{ $t('Reset') }}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { isArray, isEmpty, isUndefined } from 'lodash-es'
import BaInput from '/@/components/baInput/index.vue'

const baTable = inject('baTable') as baTableClass

const onResetForm = () => {
    /**
     * 封装好的 /utils/common.js/onResetForm 工具在此处不能使用，因为未使用 el-form-item
     * 改用公共搜索重新初始化函数
     */
    baTable.initComSearch()

    // 通知 baTable 发起公共搜索
    baTable.onTableAction('com-search', { event: 'reset-com-search-form' })
}

const getPlaceholder = (placeholder: string | string[] | undefined, key = 0, defaultValue = '') => {
    if (isUndefined(placeholder)) {
        return defaultValue
    } else if (isArray(placeholder)) {
        return placeholder[key]
    } else {
        return placeholder
    }
}
</script>

<style scoped lang="scss">
.table-com-search {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color-soft);
    border-bottom: none;
    padding: 16px;
    font-size: 14px;
    border-radius: var(--ba-radius-panel) var(--ba-radius-panel) 0 0;
    .com-search-col {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding-top: 8px;
        color: var(--el-text-color-regular);
        font-size: 13px;
    }
    .com-search-col-label {
        width: 33.33%;
        padding: 0 12px;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        color: var(--el-text-color-secondary);
        font-weight: 600;
    }
    .com-search-col-input {
        padding: 0 12px;
        width: 66.66%;
    }
    .com-search-col-input-range {
        display: flex;
        align-items: center;
        padding: 0 12px;
        width: 66.66%;
        .range-separator {
            padding: 0 8px;
            color: var(--el-text-color-secondary);
            font-size: 12px;
        }
    }
}
.pl-20 {
    padding-left: 20px;
}
.w16 {
    width: 16.5% !important;
}
.w83 {
    width: 83.5% !important;
}

@media screen and (max-width: 768px) {
    .table-com-search {
        padding: 12px;
        .com-search-col {
            display: block;
        }
        .com-search-col-label,
        .com-search-col-input,
        .com-search-col-input-range,
        .w16,
        .w83 {
            width: 100% !important;
            padding: 0;
            text-align: left;
        }
        .com-search-col-label {
            margin-bottom: 6px;
        }
    }
    .pl-20 {
        padding-left: 0;
    }
}
</style>
