<script lang="ts">
export default {
    name: "account",
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElTable, ElForm, ElMessage } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { accountList, setIsSupervised } from "@/api/member/account";
import { AccountQueryParam, AccountItem } from "@/types/api/member/account";
import { queryContractCoinList } from "@/api/system/dashboard";
import { ContractCoinListResponseData } from "@/types/api/system/dashboard";

const dataTableRef = ref(ElTable);
const queryFormRef = ref(ElForm);

const state = reactive({
    loading: true,
    coinList: [] as ContractCoinListResponseData,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        account: "",
    } as AccountQueryParam,
    list: [] as AccountItem[],
    total: 0,
});

const { loading, searchBox, queryParams, list, total } = toRefs(state);

function handleQuery() {
    state.loading = true;
    accountList(state.queryParams).then(({ data }) => {
        state.list = data.content;
        console.log(state.list);
        state.total = data.totalElements;
        state.loading = false;
    });
}

/**
 * 排序
 */
function handleSortChange(column: any) {
    var sortingType = column.order;
    state.queryParams.property = column.prop;
    if (sortingType === "ascending") {
        state.queryParams.direction = "1";
    } else if (sortingType === "descending") {
        state.queryParams.direction = "0";
    } else {
        state.queryParams.property = null;
        state.queryParams.direction = null;
    }
    handleQuery();
}

/**
 * 获取合约交易对
 */
const getContractCoinList = () => {
    queryContractCoinList({ pageNo: 1, pageSize: 1000 }).then(({ data }) => {
        state.coinList = data.content;
    });
};

/**
 * 查询重置
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    handleQuery();
}

const accountSupervised = (row: any) => {
    let _is = row.isSupervised == 1 ? 0 : 1;
    setIsSupervised({ id: row.id, isSupervised: _is }).then((res: any) => {
        if (!res.code) {
            ElMessage.success(res.message);
            handleQuery();
        } else {
            ElMessage.error(res.message);
        }
    });
};

const closeSearch = () => {
    state.searchBox.expand = !state.searchBox.expand;
    state.searchBox.title = !state.searchBox.expand ? "展开搜索" : "收起搜索";
};

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

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="account">
                <el-tooltip
                    content="请输入会员ID搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.account"
                        placeholder="请输入会员ID搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <!--<el-form-item prop="contractId">
            <span>合约交易对：</span>
            <el-select
              v-model="queryParams.contractId"
              class="filter-item"
              placeholder="请选择"
              style="width: 128px;"
              >
              <el-option
                v-for="item in state.coinList"
                :key="item.id"
                :value="item.id"
                :label="item.symbol"
                />
            </el-select>
        </el-form-item>-->
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleQuery"
                    >搜索</el-button
                >
                <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button
                    link
                    @click="closeSearch"
                    style="border: 0"
                    size="small"
                    v-show="searchBox.expand"
                >
                    {{ searchBox.title }}
                    <template v-if="searchBox.expand"
                        ><el-icon class="el-icon--right"><ArrowUp /></el-icon
                    ></template>
                    <template v-else
                        ><el-icon class="el-icon--right"><ArrowDown /></el-icon
                    ></template>
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="list"
            @sort-change="handleSortChange"
            highlight-current-row
            border
        >
            <el-table-column
                label="会员ID"
                prop="id"
                min-width="100"
                align="center"
            />
            <el-table-column
                label="资金账户"
                prop="totalBalance"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span v-if="scope.row.totalBalance > 0">{{
                        scope.row.totalBalance.toFixed(8)
                    }}</span>
                    <span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column
                label="合约账户"
                prop="contractBalance"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.contractBalance.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="今日手续费"
                prop="totalFee"
                min-width="160"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.totalFee.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="今日仓位"
                prop="todayPosition"
                min-width="140"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="3分钟订单数"
                prop="orderViolateCount"
                min-width="140"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="3分钟仓位数"
                prop="violateCount"
                min-width="140"
                align="center"
                sortable="custom"
            /> -->
            <el-table-column
                label="今日开仓数"
                prop="todayPosition"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="今日开单数"
                prop="todayOrder"
                min-width="160"
                align="center"
            />

            <el-table-column
                label="3分钟"
                prop="violateCount"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="是否被监控"
                prop="isSupervised"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span v-if="scope.row.isSupervised == 1">监控</span>
                    <span v-else>未监控</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="160"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        :type="
                            scope.row.isSupervised == 1 ? 'success' : 'danger'
                        "
                        size="small"
                        @click.stop="accountSupervised(scope.row)"
                    >
                        {{
                            scope.row.isSupervised == 1
                                ? "解除监控"
                                : "监控账户"
                        }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 10px; margin-bottom: -20px">
            数据说明：1、今日开仓数是指新开的仓位，不包括加仓操作；2、3分钟内开平仓次数是指3分钟内有过开平仓记录的次数；3、今日手续费是指今天的开平仓手续费总和；4、表格数据显示条件是开仓数量大于10个和3分钟开平仓次数大于5次或者已经被监控的账户都在这里表格里显示。
        </div>
        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>

<style lang="scss"></style>
