<template>
    <div class="app-container">
        <el-row>
            <el-col :span="22">
                <!-- 搜索表单 -->
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item prop="traderId">
                        <el-tooltip
                            content="请输入用户ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.traderId"
                                placeholder="请输入用户ID搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </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 prop="email" v-show="searchBox.expand">
                        <el-tooltip
                            content="请输入用户邮箱搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.email"
                                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-row>
        <el-table
            :data="state.traderStatisticsList"
            highlight-current-row
            v-loading="state.loading"
            border
        >
            <el-table-column
                prop="traderId"
                label="交易员ID"
                align="center
            "
            >
                <template #default="scope">
                    <a
                        style="color: #2d8cf0"
                        href="javascript:;"
                        @click.prevent="goMemberdetail(scope.row)"
                    >
                        {{ scope.row.traderId }}
                    </a>
                </template>
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="交易员昵称"
                align="center
            "
            >
            </el-table-column>
            <el-table-column
                prop="dayYield14"
                label="14日收益率"
                align="center
            "
            >
                <template #default="scope">
                    {{ truncation(scope.row.dayYield14) + "%" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="winRate14"
                label="14日胜率"
                align="center
            "
            >
                <template #default="scope">
                    {{ truncation(scope.row.winRate14) + "%" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="teamProfit14"
                label="14日团队盈利"
                align="center
            "
            >
                <template #default="scope">
                    {{ truncation(scope.row.teamProfit14) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="profitAmount"
                label="累计盈利额"
                align="center
            "
                ><template #default="scope">
                    {{ truncation(scope.row.profitAmount) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="followCustomer"
                label="累计跟单人数"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.followCustomer) }}
                </template>
            </el-table-column>

            <el-table-column
                prop="orderDeal14"
                label="14日成交单量"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.orderDeal14) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="retractionRate14"
                label="14日最大回撤率"
                align="center
            "
            >
                <template #default="scope">
                    {{ truncation(scope.row.retractionRate14) + "%" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="tradingDays"
                label="累计交易天数"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.tradingDays) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="profitDays"
                label="累计盈利天数"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.profitDays) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="dayYield30"
                label="30日收益率"
                align="center
            "
            >
                <template #default="scope">
                    {{ truncation(scope.row.dayYield30) + "%" }}
                </template>
            </el-table-column>
            <el-table-column
                prop="currentMonthFollow"
                label="本月跟单人数"
                align="center
            "
            >
                <template #default="scope">
                    {{ emptyTransfer(scope.row.currentMonthFollow) }}
                </template>
            </el-table-column>

            <el-table-column
                prop="currentMonthFollow"
                label="操作"
                align="center
            "
            >
                <template #default="scope">
                    <el-button type="primary" @click="unfold(scope.row)"
                        >修改</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="state.centerDialogVisible"
            :title="state.title"
            width="30%"
            align-center
        >
            <el-form :model="state.traderData" label-width="120px">
                <el-form-item label="本月跟单人数" align-center>
                    <el-input v-model="traderData.currentMonthFollow" />
                </el-form-item>
                <el-form-item label="14日收益率" align-center>
                    <el-input v-model="traderData.dayYield14" />
                </el-form-item>
                <el-form-item label="30日收益率" align-center>
                    <el-input v-model="traderData.dayYield30" />
                </el-form-item>
                <el-form-item label="累计跟单人数" align-center>
                    <el-input v-model="traderData.followCustomer" />
                </el-form-item>
                <el-form-item label="14日成交单量" align-center>
                    <el-input v-model="traderData.orderDeal14" />
                </el-form-item>
                <el-form-item label="累计盈利额" align-center>
                    <el-input v-model="traderData.profitAmount" />
                </el-form-item>
                <el-form-item label="累计盈利天数" align-center>
                    <el-input v-model="traderData.profitDays" />
                </el-form-item>
                <!-- <el-form-item label="14日最大回撤率" align-center>
                    <el-input v-model="traderData.retractionRate14" />
                </el-form-item> -->
                <el-form-item label="14日团队盈利" align-center>
                    <el-input v-model="traderData.teamProfit14" />
                </el-form-item>
                <el-form-item label="累计交易天数" align-center>
                    <el-input v-model="traderData.tradingDays" />
                </el-form-item>
                <el-form-item label="14日胜率" align-center>
                    <el-input v-model="traderData.winRate14" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit()">
                        确认
                    </el-button>
                    <el-button @click="cancel()">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <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: "statisticsManagement",
};
</script>
<script lang="ts" setup>
import {
    statisticsCanBeModified,
    modifyingTrader,
} from "@/api/documentary/index";
import { onMounted, reactive, toRefs, ref } from "vue";
import { truncation, emptyTransfer } from "@/utils/filter";
import router from "@/router";
import { ElMessage, ElForm } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

const state = reactive({
    queryParams: {
        pageSize: 15,
        currentPage: 1,
        email: "",
        traderId: "" as any,
        phone: "",
    },
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    traderStatisticsList: [],
    loading: true,
    traderData: {
        currentMonthFollow: 0,
        dayYield14: 0,
        dayYield30: 0,
        followCustomer: 0,
        id: 0,
        orderDeal14: 0,
        profitAmount: 0,
        profitDays: 0,
        retractionRate14: 0,
        teamProfit14: 0,
        traderId: 0,
        tradingDays: 0,
        winRate14: 0,
    },
    centerDialogVisible: false,
    total: 0,
    title: "",
});
const { queryParams, traderStatisticsList, traderData, searchBox } =
    toRefs(state);
const queryFormRef = ref(ElForm);

const handleQuery = () => {
    statisticsCanBeModified(state.queryParams).then((res: any) => {
        if (res.code == 0) {
            state.traderStatisticsList = res.data.records;
            state.loading = false;
            state.total = res.data.total;
            state.queryParams.traderId = "" + state.queryParams.traderId;
        }
    });
};

const goMemberdetail = (row: any) => {
    router.push({ path: "dailyStatistics", query: { traderId: row.traderId } });
};

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

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

// 展开

const unfold = (row: any) => {
    state.centerDialogVisible = !state.centerDialogVisible;
    traderData.value.dayYield14 = row.dayYield14;
    traderData.value.currentMonthFollow = row.currentMonthFollow;
    traderData.value.dayYield14 = row.dayYield14;
    traderData.value.dayYield30 = row.dayYield30;
    traderData.value.followCustomer = row.followCustomer;
    traderData.value.id = row.id;
    traderData.value.orderDeal14 = row.orderDeal14;
    traderData.value.profitAmount = row.profitAmount;
    traderData.value.profitDays = row.profitDays;
    traderData.value.retractionRate14 = row.retractionRate14;
    traderData.value.teamProfit14 = row.teamProfit14;
    traderData.value.traderId = row.traderId;
    traderData.value.tradingDays = row.tradingDays;
    traderData.value.winRate14 = row.winRate14;
    state.title = row.nickname;
};

// 提交

const submit = () => {
    modifyingTrader(state.traderData).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("修改成功");
            state.centerDialogVisible = !state.centerDialogVisible;
            handleQuery();
        }
    });
};

// 取消

const cancel = () => {
    state.centerDialogVisible = !state.centerDialogVisible;
};

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

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