<template>
  <!-- 报表通用过滤 -->
  <div class="filterTable">
    <div class="filter-custom-table">
      <a-select label-in-value
                class="conditionSelect"
                style="width: 120px"
                v-model:value="selectedReportType"
                @change="reportTypeChange"
                placeholder="请选择报表类型">
        <a-select-option v-for="item in reportType"
                         :key="item.value">
          {{item.lable}}
        </a-select-option>
      </a-select>
      <a-space direction="vertical">
        <a-month-picker v-model:value="time"
                        :allowClear="false"
                        @change="timeChange"
                        class="commonDatePicker"
                        v-if="isMonth()" />
        <a-date-picker v-model:value="time"
                       :allowClear="false"
                       v-else
                       @change="timeChange"
                       class="commonDatePicker"
                       :format="dateFormat" />
      </a-space>
      <a-select label-in-value
                v-if="showUser"
                class="conditionSelect ml10"
                style="width: 120px"
                v-model:value="selectedUser"
                @change="userChange"
                placeholder="请选择交易用户">
        <a-select-option v-for="item in userList"
                         :key="item.value">
          {{item.lable}}
        </a-select-option>
      </a-select>
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import FilterOption from '@/common/components/filter/index.vue';
import { initData } from '@/common/methods';
import { SelectOption } from '@/common/setup/filter/interface';
import { handlerManagerList } from '@/common/setup/user';
import { getUserId } from '@/services/bus/account';
import { getUserName } from '@/services/bus/user';
import { defineComponent, ref } from 'vue';
import { handleReprotType } from '../../setup';

export default defineComponent({
    name: 'report-common-filter-table',
    components: { FilterOption },
    props: {
        showUser: {
            type: Boolean,
            default: true,
        },
    },
    setup(props, context) {
        const { selectedReportType, reportType, reportTypeChange, isMonth, timeChange, dateFormat, time, selectedUser, userChange } = handleReprotType(context);
        const loading = ref<boolean>(false);
        // 交易用户
        const userList = ref<SelectOption[]>([]);
        const { queryTable } = handlerManagerList(loading, 2);
        initData(() => {
            // 处理刷新
            selectedUser.value.key = getUserId();
            queryTable().then((res) => {
                userList.value.length = 0;
                const id = getUserId();
                const has = res.find((e) => e.roleid === id);
                if (has) {
                    userList.value.push({ value: id, lable: has.rolename });
                } else {
                    // 没有找到代表着是机构,可以查看所有交易用户，不能查看交易员
                    userList.value.push({ value: id, lable: getUserName() });
                    res.forEach((e) => {
                        userList.value.push({ value: e.roleid, lable: e.rolename });
                        // e.userlist.forEach((el) => {
                        //     userList.value.push({ value: el.loginid, lable: `${el.loginname}-${el.logincode}` });
                        //     // userList.value.push({ value: el.loginid, lable: el.loginname });
                        // });
                    });
                }
            });
        });
        return {
            reportType,
            selectedReportType,
            dateFormat,
            timeChange,
            reportTypeChange,
            selectedUser,
            userChange,
            isMonth,
            time,
            userList,
        };
    },
});
</script>

<style lang="less">
</style>;

