<template>
  <div class="filterTable">
    <Filter @update="update" :selectList="selectList">
      <template #default="{ reset }">
        <a-button class="selectBtn" @click="resetAction(reset)">重置</a-button>
      </template>
    </Filter>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { TypeAndTime } from '@/views/report/interface';
import { initData } from '@/common/export/table';
import { QueryMiddleGoodsDetail } from '@/services/go/ermcp/goodsInfo'
import { Ermcp3ExpourseReport } from '@/services/go/ermcp/report/interface';
import { useFilter } from '@/common/components/filter/setup';
import Filter from '../../../components/filter/index.vue';

export default defineComponent({
  name: 'exposure-filter-table',
  components: {
    Filter
  },
  setup(props, context) {
    const { selectList, search, reset } = useFilter<Ermcp3ExpourseReport>(context);

    selectList.value = [
      {
        key: 'middlegoodsid',
        alias: 'middlegoodsname',
        selectedValue: 0,
        options: [
          { label: '全部套保品种', value: 0 },
        ],
        onChange: search,
      },
    ]

    // 数据初始化
    initData(() => {
      QueryMiddleGoodsDetail().then((res) => {
        res.forEach((item) => {
          selectList.value[0].options.push({
            label: item.middlegoodsname,
            value: item.middlegoodsid
          })
        })
      })
    })

    function resetAction(parentReset: () => void) {
      parentReset();
      reset();
    }

    function update(value: TypeAndTime) {
      context.emit('update', value);
    }

    return {
      selectList,
      update,
      resetAction,
    }
  },
})
</script>