<template>
    <div class="app-container">
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="state.tableData"
            highlight-current-row
            border
            ><el-table-column type="index" width="50" align="center" />

            <el-table-column
                align="center"
                prop="memberId"
                label="用户ID"
                width="250"
            />
            <el-table-column
                align="center"
                prop="type"
                label="类型"
                width="150"
            />
            <el-table-column
                align="center"
                prop="createTime"
                label="创建时间"
                width="150"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="content"
                label="内容描述"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                label="操作"
                width="100"
            >
                <template #default="scope">
                    <el-button
                        size="small"
                        type="primary"
                        @click="download(scope.row)"
                        >导出</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination
            v-if="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.pageNo"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
<script lang="ts">
export default {
    name: "riskcontrolrecord",
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import { memberRiskControlRecord } from "@/api/member/riskcontrol";
import { RiskControlRecordItem, RiskControlRecordQueryParam } from "@/types/api/member/riskcontrol";

const state = reactive({
    loading: true,
    tableData: [] as RiskControlRecordItem[],
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        type: "",
    } as RiskControlRecordQueryParam,
    total: 0,
});

const { loading, tableData, queryParams } = toRefs(state);
function handleQuery() {
    state.loading = true;
    memberRiskControlRecord(state.queryParams).then(({ data }) => {
        state.tableData = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
}

function download(row: any) {
    var blob = new Blob([row.createTime + "\r\n\r\n", row.content], {
        type: "text/plain",
    });
    var anchor = document.createElement("a");
    anchor.download = row.memberId + ".txt";
    anchor.href = window.URL.createObjectURL(blob);
    anchor.target = "_blank";
    anchor.style.display = "none"; // just to be safe!
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
}

onMounted(() => {
    handleQuery();
});
</script>

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