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

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm, ElTable } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { queryRewardRecordList } from "@/api/swap";
import { RewardQueryParam, RewardItem } from "@/types/api/swap";

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

const state = reactive({
    loading: true,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        type: "",
        memberId: "",
        startTime: "",
        endTime: "",
    } as RewardQueryParam,
    list: [] as RewardItem[],
    total: 0,
});

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

const typeMap = {
    "0": "开仓手续费返佣",
    "1": "平仓手续费返佣",
    "2": "平级奖励",
    "3": "平台手续费收入",
};

function handleQuery() {
    state.loading = true;
    queryRewardRecordList(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="type" v-show="searchBox.expand">
                <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="memberId">
                <el-tooltip
                    content="请输入用户ID搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.memberId"
                        placeholder="用户ID"
                        style="width: 180px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="startTime" v-show="searchBox.expand">
                <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" v-show="searchBox.expand">
                <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>
                <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="member.id"
                min-width="80"
                align="center"
            />
            <el-table-column
                label="用户手机号"
                prop="member.mobilePhone"
                min-width="120"
                align="center"
            >
                <template #default="scope">
                    <div>
                        {{
                            scope.row.member.mobilePhone
                                ? scope.row.member.mobilePhone
                                : scope.row.member.email
                        }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                label="来源用户ID"
                prop="fromMember.id"
                min-width="80"
                align="center"
            />
            <el-table-column
                label="来源用户手机号"
                prop="fromMember.mobilePhone"
                min-width="120"
                align="center"
                ><template #default="scope">
                    <div>
                        {{
                            scope.row.member.mobilePhone
                                ? scope.row.member.mobilePhone
                                : scope.row.member.email
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="类型"
                prop="type"
                min-width="120"
                align="center"
            >
                <template #default="scope">
                    <span
                        v-if="scope.row.type == 0"
                        class="reward-type-txt open-fee"
                    >
                        开仓手续费返佣
                    </span>
                    <span
                        v-else-if="scope.row.type == 1"
                        class="reward-type-txt force-fee"
                    >
                        平仓手续费返佣
                    </span>
                    <span
                        v-else-if="scope.row.type == 2"
                        class="reward-type-txt same-state-award"
                    >
                        平级奖励
                    </span>
                    <span
                        v-else-if="scope.row.type == 3"
                        class="reward-type-txt all-fee-in"
                    >
                        平台手续费收入
                    </span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="返佣数量"
                prop="num"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="佣金币种"
                prop="coin.name"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="委托id"
                prop="contractOrderEntrust.id"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="返佣时间"
                prop="createTime"
                min-width="120"
                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" scoped>
.reward-type-txt {
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
}

.open-fee {
    background: #42b983;
}
.force-fee {
    background: #ff0000;
}
.same-state-award {
    background: #562ff6;
}
.all-fee-in {
    background: #f8a640;
}
</style>
