<template>
    <div class="app-container">
        <el-row>
            <el-col :span="20">
                <!-- 搜索表单 -->
                <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: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <!-- <el-form-item prop="contractId" v-show="searchBox.expand">
                        <span>合约交易对：</span>
                        <el-select
                            v-model="queryParams.contractId"
                            class="filter-item"
                            placeholder="请选择"
                            style="width: 100px"
                        >
                            <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 prop="contractId" v-show="searchBox.expand">
                        <span>场次选择：</span>
                        <el-select
                            v-model="queryParams.status"
                            class="filter-item"
                            placeholder="请选择"
                            style="width: 100px"
                        >
                            <el-option value="STARTED" label="第一场" />
                            <el-option value="PARTLYDONE" label="第二场" />
                            <el-option value="DONE" label="第三场" />
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item prop="phone" v-show="searchBox.expand">
                        <el-tooltip
                            content="请输入用户手机号搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.phone"
                                placeholder="请输入用户手机号搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </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-col>
            <el-col :span="4" class="right-btns">
                <el-button type="danger" @click.stop="selection">
                    一键审核
                </el-button>
            </el-col>
        </el-row>
        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="orderList"
            highlight-current-row
            @selection-change="handleSelectionChange"
            border
            ><el-table-column
                type="selection"
                width="55"
                align="center"
                :selectable="selectable"
            />
            <el-table-column label="编号" prop="id" align="center" sortable
                ><template #default="scope">
                    <div>{{ scope.row.id }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="用户ID"
                prop="id"
                align="center"
                sortable="custom"
                ><template #default="scope">
                    <div>{{ scope.row.order.memberId }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="用户名"
                prop="username"
                min-width="160"
                align="center"
                show-overflow-tooltip
            >
                <template #default="scope">
                    <div>{{ scope.row.order.username }}</div>
                </template>
            </el-table-column>

            <el-table-column
                label="场次名称"
                prop="batchName"
                min-width="160"
                align="center"
                width="260"
                show-overflow-tooltip
            >
                <template #default="scope">
                    <div>{{ scope.row.order.batchName }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                prop="createTime"
                min-width="160"
                align="center"
            >
                <template #default="scope">
                    <div>{{ scope.row.order.createTime }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="结算时间"
                prop="clearTime"
                min-width="160"
                align="center"
            >
                <template #default="scope">
                    <div>{{ scope.row.createTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="下单金额" prop="amount" align="center">
                <template #default="scope">
                    <div>{{ scope.row.order.amount }}</div>
                </template>
            </el-table-column>
            <el-table-column label="盈利" prop="profit" align="center">
                <template #default="scope">
                    <div>{{ scope.row.profit }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="备注"
                prop="remark"
                align="center"
                width="260"
                show-overflow-tooltip
            >
                <template #default="scope">
                    <div>{{ scope.row.order.remark }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="返佣状态"
                prop="rewardStatus"
                align="center"
            >
                <template #default="scope">
                    <span
                        :style="{
                            background:
                                scope.row.order.rewardStatus == 1
                                    ? '#42b983'
                                    : 'red',
                            color: '#fff',
                            padding: '3px 5px',
                            'border-radius': '5px',
                        }"
                    >
                        {{
                            scope.row.order.rewardStatus == 1
                                ? "已返佣"
                                : "未返佣"
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" align="center">
                <template #default="scope">
                    <span
                        :style="{
                            background:
                                scope.row.order.status == 1 ? '#42b983' : 'red',
                            color: '#fff',
                            padding: '3px 5px',
                            'border-radius': '5px',
                        }"
                    >
                        {{ scope.row.order.status == 1 ? "已结算" : "未结算" }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="100">
                <template #default="scope">
                    <el-button
                        v-if="scope.row.order.status == 1"
                        type="success"
                        disabled
                        >审核通过</el-button
                    >
                    <el-button
                        type="primary"
                        v-else
                        @click.stop="cwLock(scope.row.id)"
                        >未审核</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="state.queryParams.pageNo"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
<script lang="ts">
export default {
    name: "order",
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import { orderform, audit } from "@/api/events/order";
import { TradeQueryParam, TradeItem } from "@/types/api/events/order/idnex";
import { ElForm, ElTable, ElMessage } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

const state = reactive({
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        admitStatus: "",
        batchName: "",
        direction: "",
        Available: "",
        endTime: "",
        memberId: "",
        startTime: "",
        phone: "",
    } as TradeQueryParam,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    orderList: [] as TradeItem[],
    loading: true,
    loading2: true,
    ids: [] as TradeItem[],
    total: 0,
});
const queryFormRef = ref(ElForm);
const { queryParams, orderList, loading, searchBox, total } = toRefs(state);
// 获取表格信息
const handleQuery = () => {
    state.loading = true;
    orderform(state.queryParams).then(({ data }) => {
        console.log(data);
        state.orderList = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
};
/**
 * 展开/收起搜索
 */
const closeSearch = () => {
    state.searchBox.expand = !state.searchBox.expand;
    state.searchBox.title = !state.searchBox.expand ? "展开搜索" : "收起搜索";
};
/**
 * 查询重置
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    handleQuery();
}
/**
 * 单独审核
 */
const cwLock = (row: any) => {
    state.loading2 = true;
    let data = state.ids.toString();
    audit({ ids: row }).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.message);
            handleQuery();
        }
    });
};
/**
 * 多选审核
 */
const selection = () => {
    state.loading2 = true;
    if (state.ids.length == 0) {
        return;
    } else {
        let data = state.ids.toString();
        audit({ ids: data }).then((res: any) => {
            console.log(res);
            if (res.code == 0) {
                ElMessage.success(res.message);
                handleQuery();
                state.ids = [];
            }
        });
    }
};
// 表格选中事件
const handleSelectionChange = (val: any) => {
    val.forEach((item: any) => {
        state.ids.push(item.id);
    });
};
// 审核通过的不被选中
const selectable = (row: any) => {
    return row.order.status == 1 ? false : true;
};
onMounted(() => {
    handleQuery();
});
</script>

<style lang="scss" scoped>
.right-btns {
    text-align: right;
    margin-bottom: 20px;
}
</style>
