<!-- 报表查询-资金账户报表 -->
<template>
    <app-view calss="report-account">
        <template #header>
            <app-filter :option="filterOption">
                <template #cycletime="{ item }">
                    <el-form-item :label="item.label" prop="cycletime">
                        <el-date-picker :type="dateType" v-model="item.value" :format="dateFormat"
                            :value-format="dateFormat" :placeholder="t('common.pleasechoice')" />
                    </el-form-item>
                </template>
                <template #quarter="{ item }">
                    <el-form-item :label="item.label" prop="quarter"
                        v-if="queryParams.cycletype === ReportType.Quarter">
                        <el-select v-model="item.value">
                            <el-option v-for="item in getQuarterList()" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <template v-else>
                        {{ (item.value = undefined) }}
                    </template>
                </template>
                <template #accountid="{ item }">
                    <el-form-item :label="item.label" prop="accountid">
                        <app-select-account v-model="item.value" @change="onAccountChange" />
                    </el-form-item>
                </template>
            </app-filter>
            <div class="report-account__info" v-if="selectedAccount">
                <span>{{ t('report.account.accountid1') }}{{ selectedAccount.relatedname }}</span>
                <span>{{ t('report.account.accountid') }}{{ selectedAccount.accountid }}</span>
                <span>{{ t('report.account.invloginids') }}{{ selectedAccount.invloginids }}</span>
            </div>
        </template>
        <el-tabs v-model="componentIndex" v-if="children.length" @tab-change="onSearch">
            <template v-for="(item, index) in children" :key="index">
                <el-tab-pane :label="t('routes.'+item.resourceCode)" :name="index" />
            </template>
        </el-tabs>
        <component ref="componentRef" :is="loadComponent()" v-bind="{ params }" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent, computed } from 'vue'
import { useRoute } from 'vue-router'
import { findTreeNodeById, formatDate } from '@/filters'
import { useDataFilter } from '@/hooks/datatable-v2'
import { ReportType, getReportTypeList, getQuarterList } from '@/constants/report'
import { useRequest } from '@/hooks/request'
import { queryCommonFlag } from '@/services/api/account'
import { i18n, useRouterStore } from '@/stores'
import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
import AppFilter from '@pc/components/base/table-filter-v2/index.vue'

const route = useRoute()
const routerStore = useRouterStore()
const { global: { t } } = i18n
const componentRef = shallowRef()
const componentIndex = shallowRef(0)
const selectedAccount = shallowRef<Model.TAAccountChildrenSelectRsp>()
const params = shallowRef<Partial<Model.TaaccountReportReq>>({})

const { children = [] } = findTreeNodeById(routerStore.userRoutes, String(route.name), { id: 'resourceCode' }) ?? {}

const loadComponent = () => {
    const item = children[componentIndex.value]
    if (item) {
        const componentString = item.component.replace(/^\/+/, '')
        const componentPath = componentString.replace(/\.\w+$/, '')
        return defineAsyncComponent(() => import('/' + process.env.VUE_APP_ROOT + componentPath + '.vue'))
    }
    return undefined
}

const { queryParams, filterOption, getQueryParams } = useDataFilter<Model.TaaccountReportReq>({
    filters: [
        {
            field: 'cycletype',
            label: t('report.account.cycletype'),
            value: 0,
            required: true,
            options: () => getReportTypeList()
        },
        {
            field: 'cycletime',
            label: t('report.account.cycletime'),
            required: true
        },
        {
            field: 'quarter',
            label: t('report.account.quarter'),
            required: true
        },
        {
            field: 'accountid',
            label: t('report.account.accountid'),
            required: true
        }
    ],
    buttons: [
        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
        //{ label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => resetFilters() }
    ]
})

// 日期类型
const dateType = computed(() => {
    switch (queryParams.value.cycletype) {
        case ReportType.Week:
            return 'week'
        case ReportType.Month:
            return 'month'
        case ReportType.Quarter:
        case ReportType.Year:
            return 'year'
        default:
            return 'date'
    }
})

// 日期格式
const dateFormat = computed(() => {
    switch (queryParams.value.cycletype) {
        case ReportType.Month:
            return 'YYYY-MM'
        case ReportType.Quarter:
        case ReportType.Year:
            return 'YYYY'
        default:
            return 'YYYY-MM-DD'
    }
})

const onAccountChange = (item?: Model.TAAccountChildrenSelectRsp) => {
    selectedAccount.value = item
}

const onSearch = () => {
    const qs = getQueryParams()
    qs.pageNum = 1
    qs.pageSize = 20

    switch (qs.cycletype) {
        case ReportType.Month:
            qs.cycletime = formatDate(qs.cycletime, 'YYYY-MM')
            break
        case ReportType.Quarter:
        case ReportType.Year:
            qs.cycletime = formatDate(qs.cycletime, 'YYYY')
            break
        default:
            qs.cycletime = formatDate(qs.cycletime, 'YYYY-MM-DD')
    }

    params.value = qs

    setTimeout(() => {
        componentRef.value.query?.()
    }, 20)
}

useRequest(queryCommonFlag, {
    onSuccess: (res) => {
        filterOption.filters[1].value = formatDate(res.data.tradedate, 'YYYY-MM-DD')
    }
})
</script>

<style lang="less">
@import './index.less';
</style>