<template>
    <div class="app-container">
        <el-row>
            <el-col :span="22">
                <!-- 搜索表单 -->
                <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="nickname" v-show="searchBox.expand">
                        <el-tooltip
                            content="请输入用户手机号搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.nickname"
                                placeholder="请输入用户昵称"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>

                    <el-form-item
                        prop="traderLevelId"
                        v-show="searchBox.expand"
                    >
                        <el-tooltip
                            content="请选择交易员等级"
                            placement="bottom"
                            effect="light"
                        >
                            <el-select
                                v-model="queryParams.traderLevelId"
                                class="m-2"
                                placeholder="请选择交易员等级"
                                size="small"
                            >
                                <el-option
                                    v-for="item in state.option"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </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-row>
        <el-table
            highlight-current-row
            v-loading="state.loading"
            :data="state.documentary"
            border
        >
            <el-table-column
                prop="id"
                label="交易员ID"
                align="center
            "
            >
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="交易员昵称"
                align="center
            "
            >
            </el-table-column>
            <el-table-column
                prop="username"
                label="会员账号"
                min-width="120"
                align="center
            "
            >
            </el-table-column>
            <el-table-column
                prop="memberId"
                label="会员ID"
                align="center
            "
            >
            </el-table-column>
            <el-table-column label="会员级别" prop="levelName" align="center">
            </el-table-column>

            <el-table-column
                prop="followTeamBalance"
                label="跟单团队余额"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.followTeamBalance) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="following"
                label="跟单团队人数"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.following) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="balance"
                label="跟单账户余额"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.balance) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="inAmount"
                label="跟单总划入"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.inAmount) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="outAmount"
                label="跟单总划出"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.outAmount) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="commission"
                label="跟单总佣金"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.commission) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="totalFollowProfit"
                label="跟单总分润"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.totalFollowProfit) }}
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-if="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.currentPage"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
<script lang="ts">
export default {
    name: "summaryOfDocumentaryBusiness",
};
</script>

<script lang="ts" setup>
import { onMounted, ref, reactive, toRefs } from "vue";
import { summaryDocumentaryIndustry } from "@/api/documentary/index";
import { timestampToTime, truncation, emptyTransfer } from "@/utils/filter";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { ElMessage, ElForm } from "element-plus";

const state = reactive({
    loading: true,
    queryParams: {
        currentPage: 1,
        memberId: "",
        nickname: "",
        pageSize: 15,
        traderLevelId: "",
    },
    documentary: [],
    total: 0,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    option: [
        { id: 1, name: "初级" },
        { id: 2, name: "中级" },
        { id: 3, name: "高级" },
        { id: 4, name: "特级" },
        { id: 5, name: "M级" },
    ],
});
const queryFormRef = ref(ElForm);
const { queryParams, loading, searchBox, option } = toRefs(state);
const handleQuery = () => {
    summaryDocumentaryIndustry(state.queryParams).then((res: any) => {
        if (res.code == 0) {
            state.documentary = res.data.records;
            state.total = res.data.total;
            state.loading = false;
        }
    });
};

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

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

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

<style lang="less" scoped></style>
