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

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { perTradeAll } from "@/api/finance";
import { TradeQueryParam, TradeItem } from "@/types/api/finance";

const queryFormRef = ref(ElForm);

const state = reactive({
    loading: true,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        type: "",
        memberId: "",
        minMoney: "",
        maxMoney: "",
        minFee: "",
        maxFee: "",
        startTime: "",
        endTime: "",
        account: "",
        property: "",
        direction: "",
    } as TradeQueryParam,
    list: [] as TradeItem[],
    total: 0,
});

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

const typeMap = {
    0: "充值",
    1: "提现",
    2: "转账",
    3: "币币交易",
    4: "法币买入",
    5: "法币卖出",
    6: "签到奖励",
    7: "推广奖励",
    8: "合约跟单奖励",
    9: "投票",
    10: "人工充值",
    11: "配对",
    12: "交易奖励",
    13: "CTC买入",
    14: "CTC卖出",
    15: "红包发出",
    16: "红包领取",
    17: "提现码提现",
    18: "提现码充值",
    19: "永续合约手续费",
    20: "永续合约盈利",
    21: "永续合约亏损",
    22: "期权合约失败",
    23: "期权合约手续费",
    24: "期权合约奖金",
    25: "合约返佣",
    26: "合约资金费率",
    27: "永续合约爆仓",
    28: "活动手续费",
    29: "活动盈利",
    30: "活动亏损",
    31: "活动返佣",
    32: "平级奖励",
    33: "平台手续费收入",
    34: "秒合约失败",
    35: "秒合约奖金",
    36: "理财利息",
    37: "合约跟单手续费",
    38: "合约跟单盈利",
    39: "合约跟单亏损",
    40: "合约跟单分润",
    41: "合约跟单返佣",
    42: "跟单资金费率",
    43: "现货盈利",
    44: "现货亏损",
    45: "现货手续费",
    46: "现货返佣",
    47: "体验金提现",
    48: "现货交易",
};

function handleQuery() {
    state.loading = true;
    perTradeAll(state.queryParams).then(({ data }) => {
        state.list = data.content;
        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();
}

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

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

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

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="memberId">
                <el-tooltip
                    content="请输入会员ID搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.memberId"
                        placeholder="请输入会员ID搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="type">
                <span>交易类型：</span>
                <el-select
                    v-model="queryParams.type"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option
                        v-for="(key, value) in typeMap"
                        :key="key"
                        :label="key"
                        :value="value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="startTime">
                <el-date-picker
                    v-model="queryParams.startTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="开始时间"
                />
            </el-form-item>
            <el-form-item prop="endTime">
                <el-date-picker
                    v-model="queryParams.endTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="结束时间"
                />
            </el-form-item>
            <el-form-item prop="account">
                <el-tooltip
                    content="请输入账号搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.account"
                        placeholder="请输入账号搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="minMoney" v-show="searchBox.expand">
                <el-col :span="11">
                    <el-tooltip
                        content="最低交易金额搜索"
                        placement="bottom"
                        effect="light"
                    >
                        <el-input
                            v-model="queryParams.minMoney"
                            placeholder="最低交易金额搜索"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-tooltip>
                </el-col>
                <el-col :span="2" align="center">~</el-col>
                <el-col :span="11">
                    <el-tooltip
                        content="最高交易金额搜索"
                        placement="bottom"
                        effect="light"
                    >
                        <el-input
                            v-model="queryParams.maxMoney"
                            placeholder="最高交易金额搜索"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-tooltip>
                </el-col>
            </el-form-item>
            <el-form-item prop="maxMoney" v-show="false"> </el-form-item>

            <el-form-item prop="minFee" v-show="searchBox.expand">
                <el-col :span="11">
                    <el-tooltip
                        content="最低手续费搜索"
                        placement="bottom"
                        effect="light"
                    >
                        <el-input
                            v-model="queryParams.minFee"
                            placeholder="最低手续费搜索"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-tooltip>
                </el-col>
                <el-col :span="2" align="center">~</el-col>
                <el-col :span="11">
                    <el-tooltip
                        content="最高手续费搜索"
                        placement="bottom"
                        effect="light"
                    >
                        <el-input
                            v-model="queryParams.maxFee"
                            placeholder="最高手续费搜索"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-tooltip>
                </el-col>
            </el-form-item>
            <el-form-item prop="maxFee" v-show="false"> </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"
                >
                    {{ 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="memberId"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="交易类型"
                prop="type"
                min-width="100"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span>{{ typeMap[scope.row.type] }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="交易金额"
                prop="amount"
                min-width="110"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span>{{ scope.row.amount }} {{ scope.row.symbol }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="交易手续费"
                prop="fee"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="交易时间"
                prop="createTime"
                align="center"
                sortable="custom"
            />
        </el-table>
        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>

<style lang="scss">
.dropdown-text {
    margin-left: 12px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}
</style>
