<!-- 交易商管理-交易商管理-交易商管理-登录账户-登录流水 -->
<template>
    <app-drawer :title="t('investor.manage.user.login.log.title')" width="960" v-model:show="show" :refresh="refresh">
        <app-table :data="dataList" :columns="tableColumns">
            <template #footer>
                <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                    @change="run" />
            </template>
        </app-table>
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/filters'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { queryLoginLog } from '@/services/api/investor'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppPagination from '@pc/components/base/pagination/index.vue'
import { i18n } from '@/stores'

const props = defineProps({
    selectedItem: {
        type: Object as PropType<Investor.InvestorLoginListRsp>,
        required: true
    },
})

const clientTypeEnum = useEnum('clientType') // 终端类型

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)

const { dataList, total, pageSize, pageIndex, run } = useRequest(queryLoginLog, {
    params: {
        pageNum: 1,
        pageSize: 20,
        loginid: props.selectedItem.loginid
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const tableColumns = shallowRef<Model.TableColumn[]>([
    { field: 'loginflowno', label: 'investor.manage.user.login.log.loginflowno' },
    { field: 'operatetime', label: 'investor.manage.user.login.log.operatetime', formatValue: (val) => formatDate(val) },
    { field: 'loginip', label: 'investor.manage.user.login.log.loginip' },
    { field: 'clienttype', label: 'investor.manage.user.login.log.clienttype', formatValue: (val) => clientTypeEnum.getEnumTypeName(val) },
    { field: 'softversion', label: 'investor.manage.user.login.log.softversion' },
    { field: 'loginretcode', label: 'investor.manage.user.login.log.loginretcode' },
    { field: 'funcode', label: 'investor.manage.user.login.log.funcode' },
    { field: 'operatetype', label: 'investor.manage.user.login.log.operatetype' },
])

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}
</script>