<template>
  <!-- 过滤 -->
  <div class="filterTable">
    <a-space>
      <a-date-picker class="commonDatePicker"
                     v-model:value="date" />
    </a-space>
    <FilterOption :selectList="selectList"
                  :inputList="inputList"
                  :fixedBtnList="fixedBtnList" />
    <slot></slot>
  </div>
</template>

<script lang="ts">
import FilterOption from '@/common/components/filter/index.vue';
import { defineComponent, ref } from 'vue';
import { handleFilter, handleTimeFilter, InputList, SelectList } from '@/common/setup/filter';
import { Moment } from 'moment';
import { initData } from '@/common/methods';
import { getGoodsList } from '@/services/bus/goods';

export default defineComponent({
    name: 'filter-plan',
    components: { FilterOption },
    setup(props, context) {
        const date = ref<Moment>();
        const select = ref<SelectList[]>([
            {
                value: undefined,
                key: 'goodsid',
                placeholder: '选择商品',
                list: [],
            },
            {
                value: undefined,
                key: 'regularlystrategystatus',
                placeholder: '选择计划状态',
                list: [
                    { value: 1, lable: '正常' },
                    { value: 2, lable: '暂停' },
                    { value: 3, lable: '终止' },
                ],
            },
        ]);
        const input: InputList[] = [{ value: '', placeholder: '模糊搜索账号', key: 'accountid' }];
        // 具体时间过滤
        const { getFilterItemTime } = handleTimeFilter('nexttriggerdate');

        const { selectList, inputList, fixedBtnList } = handleFilter(select, input, context, getFilterItemTime(date));
        initData(() => {
            select.value[0].list = getGoodsList().map((e) => {
                return { value: e.goodsid, lable: e.goodsname };
            });
        });
        return {
            date,
            selectList,
            inputList,
            fixedBtnList,
        };
    },
});
</script>

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