<template>
  <div class="filterTable">
    <FilterOption :inputList="inputList" :buttonList="buttonList">
      <template #before>
        <a-select class="conditionSelect" v-model:value="selectedUser" @change="userChange" placeholder="请选择交易用户">
          <a-select-option v-for="item in userList" :value="item.value" :key="item.value">
            {{ item.lable }}
          </a-select-option>
        </a-select>
      </template>
    </FilterOption>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
import { useFilter } from '@/common/components/filter/setup';
import { initData } from '@/common/methods';
import { getUserId } from '@/services/bus/user'
import { handlerManagerList } from '@/common/setup/user';
import { getAreaUserName } from '@/services/bus/user';
import FilterOption from '@/common/components/filter/index.vue';

export default defineComponent({
  name: 'sell-filter-table',
  components: {
    FilterOption
  },
  setup(props, context) {
    const { inputList, buttonList, search } = useFilter<ErmcpRealExposureModel>(context);
    // 交易用户
    const userList = ref<{ value: number; lable: string; }[]>([]);
    const loading = ref(false);
    const selectedUser = ref<number | undefined>(undefined);

    inputList.value = [
      { keys: ['MiddleGoodsName'], value: '', placeholder: '模糊搜索套保品种' },
    ]

    const userChange = (userid: number) => {
      context.emit('update', userid);
      search();
    }

    const { queryTable } = handlerManagerList(loading, 2);

    initData(() => {
      queryTable().then((res) => {
        const id = getUserId();
        const has = res.find((e) => e.roleid === id);
        userList.value = [];

        if (has) {
          userList.value.push({ value: id, lable: has.rolename });
        } else {
          // 没有找到代表着是机构,可以查看所有交易用户，不能查看交易员
          userList.value.push({ value: id, lable: getAreaUserName() });
          res.forEach((e) => {
            userList.value.push({ value: e.roleid, lable: e.rolename });
          });
        }
        selectedUser.value = getUserId();
      });
    })

    return {
      inputList,
      buttonList,
      userList,
      selectedUser,
      userChange,
    }
  },
})
</script>