<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="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="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="isTop" v-show="searchBox.expand">
                        <el-tooltip
                            content="请选择顶级交易员"
                            placement="bottom"
                            effect="light"
                        >
                            <el-select
                                v-model="queryParams.isTop"
                                class="m-2"
                                placeholder="请选择顶级交易员"
                                size="small"
                                clearable
                            >
                                <el-option label="是" :value="1" />
                                <el-option label="否" :value="2" />
                            </el-select>
                        </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 :data="state.tradersList" border v-loading="state.loading">
            <el-table-column label="交易员ID" prop="id" align="center" />
            <el-table-column
                label="交易员会员ID"
                prop="memberId"
                align="center"
            />
            <el-table-column label="头像" prop="avatar" align="center">
                <template #default="scope">
                    <el-image
                        style="width: 20px; height: 20px"
                        :src="scope.row.avatar"
                        fit="cover"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="交易员昵称"
                prop="nickname"
                align="center"
            />
            <el-table-column
                label="创建时间"
                prop="createdTime"
                align="center"
                min-width="180"
            >
                <template #default="scope">
                    <span>{{
                        timestampToTime(scope.row.createdTime)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                label="更新时间"
                prop="updatedTime"
                align="center"
                min-width="180"
            >
                <template #default="scope">
                    <span>{{
                        timestampToTime(scope.row.updatedTime)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column label="统计状态" prop="updatedTime" align="center">
                <template #default="scope">
                    <span>{{
                        scope.row.editDataSwitch == true ? "开" : "关"
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                label="当前默认跟单"
                prop="updatedTime"
                align="center"
                min-width="120"
            >
                <template #default="scope">
                    <span>{{ scope.row.defaultFollowCustomer }}</span></template
                >
            </el-table-column>
            <el-table-column
                label="当前跟单"
                prop="followCustomer"
                align="center"
                min-width="120"
            >
                <template #default="scope">
                    <span
                        @click="
                            ((state.studentParams.traderMemberId =
                                scope.row.memberId),
                            (state.studentParams.status = 10),
                            (state.title = '当前跟单列表')),
                                studentFollowing(
                                    scope.row.followCustomer,
                                    scope.row.id
                                )
                        "
                        style="padding: 30px; cursor: pointer; color: #409eff"
                        >{{ scope.row.followCustomer }}</span
                    ></template
                >
            </el-table-column>
            <el-table-column
                label="当前取消跟单"
                prop="cancelFollowerCustomer"
                align="center"
                min-width="120"
            >
                <template #default="scope">
                    <span
                        @click="
                            ((state.studentParams.traderMemberId =
                                scope.row.memberId),
                            (state.studentParams.status = 20),
                            (state.title = '取消跟单列表')),
                                studentFollowing(
                                    scope.row.cancelFollowerCustomer
                                )
                        "
                        style="padding: 30px; cursor: pointer; color: #409eff"
                        >{{ scope.row.cancelFollowerCustomer }}</span
                    ></template
                >
            </el-table-column>
            <el-table-column
                label="当前移除跟单"
                prop="removeFollowerCustomer"
                align="center"
                min-width="120"
            >
                <template #default="scope">
                    <span
                        @click="
                            ((state.studentParams.traderMemberId =
                                scope.row.memberId),
                            (state.studentParams.status = 30),
                            (state.title = '移除跟单列表')),
                                studentFollowing(
                                    scope.row.removeFollowerCustomer
                                )
                        "
                        style="padding: 30px; cursor: pointer; color: #409eff"
                        >{{ scope.row.removeFollowerCustomer }}</span
                    ></template
                >
            </el-table-column>
            <el-table-column
                label="入住天数"
                prop="defaultRegisterDays"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.defaultRegisterDays }}</span></template
                >
            </el-table-column>
            <el-table-column
                label="最小默认金额"
                prop="updatedTime"
                align="center"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.minFollowAmount)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column label="等级" prop="updatedTime" align="center">
                <template #default="scope">
                    <span v-if="scope.row.traderLevelId==1">初级</span>
                    <span v-else-if="scope.row.traderLevelId==2">中级</span>
                    <span v-else-if="scope.row.traderLevelId==3">高级</span>
                    <span v-else-if="scope.row.traderLevelId==4">特级</span>
                    <span v-else-if="scope.row.traderLevelId==5">M级</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="最高跟随金额" align="center" min-width="130">
                <template #default="scope">
                    <span v-if="scope.row.traderLevelId == 5">{{ truncation(scope.row.maxPrincipalAmount) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="顶级交易员" align="center" min-width="110">
                <template #default="scope">
                    <span v-if="scope.row.isTop == 1" style="color: #42b983">是</span>
                    <span v-else style="color: #ff0000">否</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                prop="updatedTime"
                align="center"
                width="310"
            >
                <template #default="scope">
                    <el-button type="success" @click.stop="updata(scope.row)"
                        >修改</el-button
                    >
                    <el-button type="danger" @click.stop="cancel(scope.row)"
                        >取消</el-button
                    >
                    <el-button
                        type="warning"
                        @click.stop="modifyingConfiguration(scope.row)"
                        >修改配置</el-button
                    >
                    <el-button
                        type="primary"
                        @click.stop="setTop(scope.row)"
                        >设置顶级交易员</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="centerDialogVisible" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.changeTraderLevelsParams"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="交易员ID:" prop="region">
                    <el-input
                        type="text"
                        disabled
                        v-model="changeTraderLevelsParams.traderId"
                    />
                </el-form-item>
                <el-form-item label="交易员等级:" prop="region">
                    <el-select
                        v-model="changeTraderLevelsParams.levelId"
                        placeholder="请选择交易员等级"
                    >
                        <el-option
                            v-for="item in HierarchyList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="success"
                        @click="submitForm(changeTraderLevelsParams)"
                    >
                        确认
                    </el-button>
                    <el-button
                        @click="state.centerDialogVisible = false"
                        type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="state.configuration" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.traderForm"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item
                    label="当前跟单默认人数"
                    prop="defaultFollowCustomer"
                >
                    <el-input v-model="traderForm.defaultFollowCustomer" />
                </el-form-item>
                <el-form-item label="默认入住天数" prop="defaultRegisterDays">
                    <el-input v-model="traderForm.defaultRegisterDays" />
                </el-form-item>
                <el-form-item label="最低跟随金额" prop="minFollowAmount">
                    <el-input v-model="traderForm.minFollowAmount" />
                </el-form-item>
                <el-form-item label="最高跟随金额" prop="maxPrincipalAmount" v-if="state.currentTraderLevelId == 5">
                    <el-input v-model="traderForm.maxPrincipalAmount" />
                </el-form-item>
                <el-form-item label="老师统计数据开关" prop="editDataSwitch">
                    <el-select
                        v-model="traderForm.editDataSwitch"
                        placeholder="请选择开或者关"
                    >
                        <el-option label="开" value="true" />
                        <el-option label="关" value="false" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="success"
                        @click="submittingConfiguration()"
                    >
                        确认
                    </el-button>
                    <el-button
                        @click="state.configuration = false"
                        type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 设置顶级交易员弹窗 -->
        <el-dialog v-model="state.topDialogVisible" width="30%" align-center title="设置顶级交易员">
            <el-form label-width="120px">
                <el-form-item label="交易员ID:">
                    <el-input type="text" disabled v-model="state.setTopParams.traderId" />
                </el-form-item>
                <el-form-item label="顶级交易员:">
                    <el-select v-model="state.setTopParams.isTop" placeholder="请选择">
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="submitSetTop">确认</el-button>
                    <el-button @click="state.topDialogVisible = false" type="danger">取消</el-button>
                </el-form-item>
            </el-form>
        </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"
        />

        <el-dialog v-model="state.dialogTableVisible" :title="state.title">
            <el-row>
                <el-col :span="22">
                    <!-- 搜索表单 -->
                    <el-form
                        ref="studentFormRef"
                        :model="studentParams"
                        :inline="true"
                    >
                        <el-form-item prop="memberId">
                            <el-tooltip
                                content="请输入学生会员ID搜索"
                                placement="bottom"
                                effect="light"
                            >
                                <el-input
                                    v-model="studentParams.memberId"
                                    placeholder="请输入学生会员ID搜索"
                                    style="width: 260px"
                                    clearable
                                    @keyup.enter="studentList"
                                />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item prop="nickname">
                            <el-tooltip
                                content="请输入学生会员昵称搜索"
                                placement="bottom"
                                effect="light"
                            >
                                <el-input
                                    v-model="studentParams.nickname"
                                    placeholder="请输入学生会员昵称搜索"
                                    style="width: 260px"
                                    clearable
                                    @keyup.enter="studentList"
                                />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                :icon="Search"
                                @click="studentList"
                                >搜索</el-button
                            >
                            <el-button :icon="Refresh" @click="resetQuery(1)"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-table
                :data="state.studentFollowingData"
                border
                v-loading="state.follow"
            >
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column
                    prop="memberId"
                    label="会员ID"
                    align="center"
                />
                <el-table-column
                    prop="nickname"
                    label="会员昵称"
                    align="center"
                />
                <el-table-column
                    prop="username"
                    label="会员账号"
                    align="center"
                />
                <el-table-column
                    prop="totalAccountBalance"
                    label="账户总余额"
                    align="center"
                >
                    <template #default="scope">
                        <span>{{
                            truncation(scope.row.totalAccountBalance)
                        }}</span></template
                    >
                </el-table-column>
                <el-table-column
                    prop="assetAccount"
                    label="资产账户"
                    align="center"
                >
                    <template #default="scope">
                        <span>{{
                            truncation(scope.row.assetAccount)
                        }}</span></template
                    >
                </el-table-column>
                <el-table-column
                    prop="contractAccount"
                    label="合约账户"
                    align="center"
                >
                    <template #default="scope">
                        <span>{{
                            truncation(scope.row.contractAccount)
                        }}</span></template
                    >
                </el-table-column>
                <el-table-column
                    prop="followAccount"
                    label="跟单账户"
                    align="center"
                >
                    <template #default="scope">
                        <span>{{
                            truncation(scope.row.followAccount)
                        }}</span></template
                    >
                </el-table-column>
                <el-table-column
                    prop="followAllprofitOrLoss"
                    label="跟单总盈亏"
                    align="center"
                >
                    <template #default="scope">
                        <span>{{
                            truncation(scope.row.followAllprofitOrLoss)
                        }}</span></template
                    >
                </el-table-column>
                <el-table-column
                    prop="followTime"
                    label="时间"
                    align="center"
                    min-width="120"
                />
                <el-table-column
                    v-if="state.title == '当前跟单列表'"
                    label="操作"
                    prop="updatedTime"
                    align="center"
                >
                    <template #default="scope">
                        <el-button
                            type="danger"
                            @click.stop="unfollow(scope.row)"
                            >移除跟随</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-if="state.studentTotal > 0"
                :total="state.studentTotal"
                v-model:page="state.studentParams.currentPage"
                v-model:limit="state.studentParams.pageSize"
                @pagination="studentFollowing"
            />
        </el-dialog>
    </div>
</template>
<script lang="ts">
name: "dealerList";
</script>
<script lang="ts" setup>
import {
    traderHierarchy,
    listOfTraders,
    changeTraderLevels,
    updateTraderTop,
    cancelTraders,
    modifyingTraderConfiguration,
    studentFollowingList,
    removeFollow,
} from "@/api/documentary/index";
import { ElMessage, ElForm } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

import {
    traderApplicationParam,
    traderHierarchyItem,
    approvalOfTransactionParam,
} from "@/types/api/documentary/index";
import { timestampToTime, truncation } from "@/utils/filter";
import { reactive, onMounted, toRefs, ref } from "vue";
const state = reactive({
    queryParams: {
        currentPage: 1,
        pageSize: 15,
        traderLevelId: "",
        nickname: "",
        isTop: "",
    } as traderApplicationParam,
    studentParams: {
        currentPage: 1,
        pageSize: 15,
        traderMemberId: "",
        status: 10,
        hasPosition: false,
        id: "",
        nickname: "",
        memberId: "",
    },
    tradersList: [],
    HierarchyList: [] as traderHierarchyItem[],
    total: 0,
    centerDialogVisible: false,
    changeTraderLevelsParams: {
        levelId: 0,
        traderId: 0,
    } as approvalOfTransactionParam,
    topDialogVisible: false,
    setTopParams: {
        traderId: 0,
        isTop: 2,
    },
    loading: true,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    option: [
        { id: 1, name: "初级" },
        { id: 2, name: "中级" },
        { id: 3, name: "高级" },
        { id: 4, name: "特级" },
        { id: 5, name: "M级" },
    ],
    configuration: false,
    traderForm: {
        defaultFollowCustomer: 0,
        editDataSwitch: "",
        minFollowAmount: 0,
        defaultRegisterDays: 0,
        maxPrincipalAmount: 0 as Number,
    },
    traderId: 0,
    currentTraderLevelId: 0,
    dialogTableVisible: false,
    studentFollowingData: [],
    studentTotal: 0,
    memberId: 0,
    follow: true,
    title: "当前跟随列表",
});
const {
    queryParams,
    HierarchyList,
    centerDialogVisible,
    changeTraderLevelsParams,
    searchBox,
    traderForm,
    studentParams,
} = toRefs(state);
const queryFormRef = ref(ElForm);
const studentFormRef = ref(ElForm);
// 获取跟随学生列表
const studentFollowing = (row?: any, index?: any) => {
    if (row < 1) {
        return;
    }
    state.studentParams.id = index;
    state.dialogTableVisible = true;
    studentList();
};

const studentList = () => {
    studentFollowingList(state.studentParams, state.memberId).then(
        (res: any) => {
            state.studentFollowingData = res.data.records;
            state.studentTotal = res.data.total;
            console.log(state.studentFollowingData);
            state.follow = false;
        }
    ).catch(() => {});
};
const handleQuery = () => {
    // 获取交易员列表
    listOfTraders(state.queryParams).then((res: any) => {
        if (res.code == 0) {
            state.loading = false;
            state.tradersList = res.data.records;
            state.total = res.data.total;
        }
    }).catch(() => {});
    //获取交易员等级列表
    // traderHierarchy().then((res: any) => {
    //     if (res.code == 0) {
    //         state.HierarchyList = res.data;
    //     }
    // });
};
// 筛选交易员等级

// const screen = (ID: number) => {
//     let arr = state.HierarchyList.filter((res: any) => {
//         return res.id === ID;
//     });
//     if (arr.length > 0) {
//         state.loading = false;
//         return arr[0].name;
//     }
// };

// 提交修改申请
const submitForm = (row: approvalOfTransactionParam) => {
    changeTraderLevels(row).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("修改成功");
            state.centerDialogVisible = false;
            handleQuery();
        }
    }).catch(() => {});
};
// 修改
const updata = (row: any) => {
    state.centerDialogVisible = true;
    state.changeTraderLevelsParams.levelId = row.traderLevelId;
    state.changeTraderLevelsParams.traderId = row.id;
    //获取交易员等级列表
    traderHierarchy().then((res: any) => {
        if (res.code == 0) {
            state.HierarchyList = res.data;
        }
    }).catch(() => {});
};
// 设置顶级交易员
const setTop = (row: any) => {
    state.setTopParams.traderId = row.id;
    state.setTopParams.isTop = row.isTop ?? 2;
    state.topDialogVisible = true;
};

const submitSetTop = () => {
    updateTraderTop(state.setTopParams.traderId, state.setTopParams.isTop).then(
        (res: any) => {
            if (res.code == 0) {
                ElMessage.success("设置成功");
                state.topDialogVisible = false;
                handleQuery();
            }
        }
    ).catch(() => {});
};

// 移除跟随
const unfollow = (row: any) => {
    console.log(row);
    removeFollow({ customerId: row.id, traderId: state.studentParams.id }).then(
        (res: any) => {
            if (res.code == 0) {
                ElMessage.success("移除成功");
                studentList();
            }
        }
    ).catch(() => {});
};

// 展开修改交易员配置

const modifyingConfiguration = (row: any) => {
    state.traderId = row.id;
    state.configuration = !state.configuration;
    state.currentTraderLevelId = row.traderLevelId;
    state.traderForm.minFollowAmount = row.minFollowAmount;
    state.traderForm.defaultFollowCustomer = row.defaultFollowCustomer;
    state.traderForm.editDataSwitch = row.editDataSwitch == "1" ? "开" : "关";
    state.traderForm.defaultRegisterDays = row.defaultRegisterDays;
    state.traderForm.maxPrincipalAmount = row.maxPrincipalAmount ?? 0;
};

// 提交交易员配置修改

const submittingConfiguration = () => {
    state.traderForm.editDataSwitch =
        state.traderForm.editDataSwitch == "开"
            ? "true"
            : state.traderForm.editDataSwitch == "true"
            ? "true"
            : "false";

    const submitForm: Record<string, any> = { ...state.traderForm };
    if (state.currentTraderLevelId !== 5) {
        delete submitForm.maxPrincipalAmount;
    }

    modifyingTraderConfiguration({
        traderForm: submitForm,
        traderId: state.traderId,
    }).then((res: any) => {
        if (res.code == 0) {
            handleQuery();
            state.configuration = !state.configuration;
            ElMessage.success("修改成功");
        }
    }).catch(() => {});
};

// 取消交易员
const cancel = (row: any) => {
    cancelTraders(row.id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("取消成功");
            handleQuery();
        }
    }).catch(() => {});
};

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

/**
 * 查询重置
 */
function resetQuery(index?: number) {
    if (index == 1) {
        studentFormRef.value.resetFields();
        studentList();
    } else {
        queryFormRef.value.resetFields();
        handleQuery();
    }
}

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

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