<template>
    <div class="app-container">
        <el-table
            :data="listdata"
            v-loading="state.loading"
            highlight-current-row
            border
        >
            <el-table-column align="center" prop="id" label="ID" />
            <el-table-column align="center" prop="memberId" label="会员ID" />
            <el-table-column align="center" prop="nickname" label="昵称" />
            <el-table-column align="center" prop="nickname" label="创建时间">
                <template #default="scope">
                    <span>{{ timestampToTime(scope.row.createdTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="nickname" label="更新时间">
                <template #default="scope">
                    <span>{{ timestampToTime(scope.row.updatedTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <div>
                        <el-button
                            @click.stop="examineAndApprove(scope.row)"
                            type="primary"
                            >审批</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="centerDialogVisible" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.ruleForm"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="交易员ID:" prop="region">
                    <el-input
                        type="text"
                        disabled
                        v-model="ruleForm.traderId"
                    />
                </el-form-item>
                <el-form-item label="交易员等级:" prop="region">
                    <el-select
                        v-model="ruleForm.levelId"
                        placeholder="请选择交易员等级"
                    >
                        <el-option
                            v-for="item in HierarchyList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="submitForm(ruleForm)">
                        批准
                    </el-button>
                    <el-button @click="resetForm(ruleForm)" type="danger"
                        >拒绝</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>

        <pagination
            v-if="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.currentPage"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
<script lang="ts">
name: "traderApplication";
</script>
<script lang="ts" setup>
import {
    traderApplication,
    traderHierarchy,
    approvalOfTransaction,
    rejectTrade,
    addTraderLevels,
} from "@/api/documentary/index";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import {
    traderApplicationParam,
    traderApplicationItem,
    traderHierarchyItem,
    approvalOfTransactionParam,
    addTraderLevelsParam,
} from "@/types/api/documentary/index";
import { reactive, onMounted, toRefs, ref } from "vue";
import { timestampToTime } from "@/utils/filter";
const ruleFormRef = ref<FormInstance>();
const state = reactive({
    loading: true,
    queryParams: {
        currentPage: 1,
        pageSize: 15,
    } as traderApplicationParam,
    centerDialogVisible: false,
    total: 0,
    ruleForm: {
        levelId: "",
        traderId: "",
    } as approvalOfTransactionParam,
    listdata: [] as traderApplicationItem[],
    HierarchyList: [] as traderHierarchyItem[],
    dialog: false,
    traderLevelForm: {
        asset: 0,
        enName: "",
        maxFollow: 0,
        name: "",
        dividendPercent: 0,
    } as addTraderLevelsParam,
});
const {
    queryParams,
    listdata,
    loading,
    centerDialogVisible,
    ruleForm,
    HierarchyList,
    dialog,
    traderLevelForm,
} = toRefs(state);
const handleQuery = () => {
    // 获取交易员申请记录
    traderApplication(state.queryParams).then((res: any) => {
        if (res.code == 0) {
            state.loading = false;
            state.total = res.data.total;
            state.listdata = res.data.records;
        }
    });
};
// 审批
const examineAndApprove = (row: any) => {
    //获取交易员等级列表
    traderHierarchy().then((res: any) => {
        if (res.code == 0) {
            state.HierarchyList = res.data;
        }
    });
    state.centerDialogVisible = true;
    state.ruleForm.traderId = row.id;
};
// 提交
const submitForm = (formEl: any) => {
    console.log(Object.keys(formEl).length);
    if (Object.keys(formEl).length == 2) {
        // 提交审批
        state.centerDialogVisible = false;
        approvalOfTransaction(formEl).then((res: any) => {
            if (res.code == 0) {
                ElMessage({
                    message: "交易员申请已通过",
                    type: "success",
                });
                handleQuery();
            }
        });
    }
};
// 取消
const resetForm = (formEl: any) => {
    if (Object.keys(formEl).length == 2) {
        state.ruleForm.levelId = "";
        state.centerDialogVisible = false;
        rejectTrade(formEl.traderId).then((res: any) => {
            if (res.code == 0) {
                ElMessage({
                    message: "已拒绝交易员申请",
                    type: "warning",
                });
                handleQuery();
            }
        });
    }
};

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

<style lang="scss" scoped>
.add_button {
    margin-bottom: 10px;
}
</style>
