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

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm, ElTable, ElMessage } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
import { inviteRank, alterRank } from "@/api/invitation/index";
import {
    RankQueryParam,
    RankItem,
    AlterRankParam,
} from "@/types/api/invitation/index";

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

const state = reactive({
    loading: true,
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        rankType: "0",
        mobilePhone: "",
    } as RankQueryParam,
    list: [] as RankItem[],
    total: 0,
    dialog: {
        title: "",
        visible: false,
    },
    formData: {} as AlterRankParam,
    rules: {
        estimatedReward: [
            {
                required: true,
                message: "返佣折合USDT不能为空",
                trigger: "blur",
            },
        ],
        extraReward: [
            {
                required: true,
                message: "额外奖励(USDT)不能为空",
                trigger: "blur",
            },
        ],
        levelOne: [
            {
                required: true,
                message: "一级邀请人数不能为空",
                trigger: "blur",
            },
        ],
        levelTwo: [
            {
                required: true,
                message: "二级邀请人数不能为空",
                trigger: "blur",
            },
        ],
    },
});

const { loading, queryParams, list, total, dialog, formData, rules } =
    toRefs(state);

const rankTypeMap = {
    "0": "人数排名",
    "1": "返佣排名",
};

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

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

const showAlterRank = (row: any) => {
    state.dialog = {
        title: "修改参数",
        visible: true,
    };
    formData.value.id = row.id;
    formData.value.estimatedReward = row.estimatedReward;
    formData.value.extraReward = row.extraReward;
    formData.value.levelOne = row.levelOne;
    formData.value.levelTwo = row.levelTwo;
};

/**
 * 提交
 */
function submitFormData() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true;
            alterRank(state.formData)
                .then((res: any) => {
                    if (!res.code) {
                        ElMessage.success(res.message);
                        cancel();
                        loading.value = false;
                        handleQuery();
                    } else {
                        ElMessage.error(res.message);
                        cancel();
                        loading.value = false;
                    }
                })
                .catch(() => {
                    loading.value = false;
                });
        }
    });
}

/**
 * 取消
 */
function cancel() {
    dialog.value.visible = false;
    formData.value.id = "0";
    formData.value.estimatedReward = "";
    formData.value.extraReward = "";
    formData.value.levelOne = "";
    formData.value.levelTwo = "";
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
}

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

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="mobilePhone">
                <el-tooltip
                    content="请输入手机号搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.mobilePhone"
                        placeholder="请输入手机号"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="rankType">
                <el-select
                    v-model="queryParams.rankType"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option
                        v-for="(key, value) in rankTypeMap"
                        :key="key"
                        :label="key"
                        :value="value"
                    />
                </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-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="list"
            highlight-current-row
            border
        >
            <el-table-column label="ID" prop="id" align="center" />
            <el-table-column
                label="用户ID"
                prop="memberId"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="手机号"
                prop="userIdentify"
                min-width="160"
                align="center"
            >
                <template #default="scope">
                    <span>
                        {{ scope.row.userIdentify.split("-")[1] }}
                    </span></template
                >
            </el-table-column>
            <el-table-column label="一级邀请" prop="levelOne" align="center" />
            <el-table-column label="二级邀请" prop="levelTwo" align="center" />
            <el-table-column
                label="返佣折合"
                prop="estimatedReward"
                align="center"
                sortable
            />
            <el-table-column
                label="额外奖励"
                prop="extraReward"
                align="center"
                sortable
            />
            <el-table-column
                label="操作"
                align="center"
                width="160"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click.stop="showAlterRank(scope.row)"
                    >
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />

        <!-- 用户平仓弹窗 -->
        <el-dialog
            :title="dialog.title"
            v-model="dialog.visible"
            width="640px"
            destroy-on-close
        >
            <el-form
                ref="dataFormRef"
                :model="formData"
                :rules="rules"
                label-width="136px"
            >
                <el-form-item label="ID" prop="id">
                    <el-input
                        type="text"
                        v-model="formData.id"
                        readonly
                        disabled
                    />
                </el-form-item>
                <el-form-item label="返佣折合USDT" prop="estimatedReward">
                    <el-input
                        type="number"
                        v-model="formData.estimatedReward"
                        placeholder="请输入"
                    />
                </el-form-item>
                <el-form-item label="额外奖励(USDT)" prop="extraReward">
                    <el-input
                        type="number"
                        v-model="formData.extraReward"
                        placeholder="请输入"
                    />
                </el-form-item>
                <el-form-item label="一级邀请人数" prop="levelOne">
                    <el-input
                        type="number"
                        v-model="formData.levelOne"
                        placeholder="请输入"
                    />
                </el-form-item>
                <el-form-item label="二级邀请人数" prop="levelTwo">
                    <el-input
                        type="number"
                        v-model="formData.levelTwo"
                        placeholder="请输入"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="submitFormData"
                        >确 定</el-button
                    >
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

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