<template>
  <!-- 过滤 -->
  <div class="filterTable">
    <a-range-picker v-model:value="date"
                    class="commonPicker"
                    style="width: 200px"
                    :show-time="{hideDisabledOptions: true}"
                    format="YYYY-MM-DD" />
    <FilterOption :selectList="selectList"
                  :inputList="inputList"
                  :fixedBtnList="fixedBtnList">
      <template #selectAfter>
        <a-checkbox v-model:checked="includesub"
                    class="filter-check">包含子级</a-checkbox>
      </template>
    </FilterOption>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import FilterOption from '@/common/components/filter/index.vue';
import { defineComponent, ref } from 'vue';
import { handleFilter, InputList } from '@/common/setup/filter';
import { initData } from '@/common/methods';
import { Moment } from 'moment';
import { getRangeTime } from '@/utils/time';
import { handleSelectOption } from '../../setup';

export default defineComponent({
    name: 'filter-platinum_pick_query',
    components: { FilterOption },
    setup(props, context) {
        const date = ref<Moment[]>([]);
        const { select, getSelectList } = handleSelectOption();
        const input: InputList[] = [{ value: '', placeholder: '模糊搜索账号', key: 'filtername' }];
        // 是否包含子级 1-包含
        const includesub = ref<boolean>(false);
        const param = {
            search(result: any) {
                result.includesub = includesub.value ? 1 : 0;
                // 处理范围时间内搜索
                const time = date.value;
                const temp = time.length > 1 ? getRangeTime(time[0], time[1]) : [''];
                result.ordertime = temp;
            },
            reset() {
                includesub.value = false;
                date.value = [];
            },
        };
        const { selectList, inputList, fixedBtnList } = handleFilter(select, input, context, param);
        initData(() => {
            getSelectList();
        });
        return {
            includesub,
            date,
            selectList,
            inputList,
            fixedBtnList,
        };
    },
});
</script>

<style lang="less">
.filterTable {
    .commonPicker.ant-calendar-picker {
        display: inline-flex;
        padding-top: 9px;
        padding-bottom: 6px;
        margin-right: 10px;
        .ant-input {
            border: 0;
            background: @m-grey9;
        }
    }
}
</style>;
