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

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm, ElTable, ElMessage } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { queryRewardSetDataList, transactionRebateSet } from "@/api/swap";
import {
    RewardSetQueryParam,
    RewardSetItem,
    RewardSetParam,
} from "@/types/api/swap";

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

const state = reactive({
    loading: true,
    searchBox: {
        title: "展开搜索",
        expand: true,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        account: "",
        commonStatus: "",
        superPartner: "",
    } as RewardSetQueryParam,
    list: [] as RewardSetItem[],
    total: 0,
    dialog: {
        title: "",
        visible: false,
    },
    formData: {
        id: "",
        rate: 0,
        type: "0",
        username: "",
        realName: "",
        canUpdate: false,
    } as RewardSetParam,
    rules: {
        rate: [{ required: true, message: "比例不能为空", trigger: "blur" }],
    },
});

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

const memberStatusMap = {
    "0": "正常",
    "1": "非法",
    "": "全部",
};
const superPartnerMap = {
    "0": "否",
    "1": "是",
    "": "全部",
};

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

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

/**
 * 设置比例弹窗
 * @param row 行数据
 */
const showRewardSetModify = (row: any) => {
    state.dialog = {
        title: "设置比例",
        visible: true,
    };
    formData.value.id = row.id;
    formData.value.username = row.username;
    formData.value.rate = row.thirdLevel;
    formData.value.realName = row.realName;
    formData.value.canUpdate = row.canUpdate;
};

/**
 * 提交
 */
function submitFormData() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true;
            transactionRebateSet(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";
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
}

/**
 * 展开/收起搜索
 */
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="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="commonStatus" v-show="searchBox.expand">
                <span>会员状态：</span>
                <el-select
                    v-model="queryParams.commonStatus"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option
                        v-for="(key, value) in memberStatusMap"
                        :key="key"
                        :label="key"
                        :value="value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="superPartner" v-show="searchBox.expand">
                <span>是否代理商：</span>
                <el-select
                    v-model="queryParams.superPartner"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option
                        v-for="(key, value) in superPartnerMap"
                        :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-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"
            highlight-current-row
            border
        >
            <el-table-column label="会员ID" prop="id" align="center" />
            <el-table-column
                label="会员名称"
                prop="username"
                min-width="160"
                align="center"
            />
            <el-table-column
                label="返佣比例（%）"
                prop="thirdLevel"
                min-width="100"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="会员等级"
                prop="memberLevel"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span v-if="scope.row.memberLevel == 1">实名</span>
                    <span v-else-if="scope.row.memberLevel == 2">认证</span>
                    <span v-else>普通会员</span>
                </template>
            </el-table-column>
            <el-table-column label="邀请者ID" prop="inviterId" align="center" />
            <el-table-column
                label="交易状态"
                prop="transactionStatus"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span v-if="scope.row.transactionStatus == 0">正常</span>
                    <span v-else>禁用</span>
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                prop="status"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-else>非法</span>
                </template>
            </el-table-column>
            <el-table-column
                label="代理商"
                prop="superPartner"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span v-if="scope.row.superPartner == 0">普通会员</span>
                    <span v-else-if="scope.row.superPartner == 1"
                        >超级代理商</span
                    >
                    <span v-else-if="scope.row.superPartner == 2"
                        >超级合伙人</span
                    >
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="注册时间"
                prop="registrationTime"
                min-width="120"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="操作"
                align="center"
                width="160"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click.stop="showRewardSetModify(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="用户" prop="username">
                    <el-input
                        type="text"
                        v-model="formData.username"
                        readonly
                        disabled
                    />
                </el-form-item>
                <el-form-item label="比例" prop="rate">
                    <el-input
                        type="number"
                        v-model="formData.rate"
                        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>
