<template>
    <div class="filterTable">
        <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
        <slot></slot>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getHedgedTypeList } from '@/@next/constants/enum/hedgedType'
import { Ermcp2HedgedItemRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { useFilter } from '@/common/components/filter/setup'
import { handlerManagerList } from '@/common/setup/user'
import { initData } from '@/common/methods'
import FilterOption from '@/common/components/filter/index.vue'

export default defineComponent({
    name: 'filter-custom-table',
    components: {
        FilterOption
    },
    setup(props, context) {
        const loading = ref<boolean>(false);
        const { selectList, inputList, buttonList, search } = useFilter<Ermcp2HedgedItemRsp>(context);
        const { queryTable } = handlerManagerList(loading, 2, true);

        selectList.value = [
            {
                key: 'hedgedtype',
                selectedValue: 0,
                options: [
                    { label: '全部套期类型', value: 0 },
                ],
                onChange: search
            },
            {
                key: 'tradeuserid',
                alias: 'accountname',
                selectedValue: 0,
                options: [
                    { label: '全部套期主体', value: 0 },
                ],
                onChange: search
            },
        ]

        inputList.value = [
            { keys: ['wrstandardname'], value: '', placeholder: '模糊搜索商品' },
            { keys: ['hedgeditemnum'], value: '', placeholder: '模糊搜索项目编号' },
        ]

        initData(() => {
            const hedgedTypeList = getHedgedTypeList();
            hedgedTypeList.forEach((e) => {
                selectList.value[0].options.push({
                    label: e.enumdicname,
                    value: e.enumitemname,
                })
            })

            queryTable().then((res) => {
                res.forEach((e) => {
                    selectList.value[1].options.push({
                        label: e.rolename,
                        value: e.roleid,
                    })
                })
            })
        })

        return {
            selectList,
            inputList,
            buttonList,
        }
    },
})
</script>