<template>
    <div class="app-container">
        <el-row>
            <el-col :span="22">
                <!-- 搜索表单 -->
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item prop="customerMemberId">
                        <el-tooltip
                            content="请输入用户会员ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.customerMemberId"
                                placeholder="请输入学生ID搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="traderMemberId">
                        <el-tooltip
                            content="请输入交易员会员ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.traderMemberId"
                                placeholder="请输入交易员会员ID搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="positionId">
                        <el-tooltip
                            content="请输入交易员会员ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.positionId"
                                placeholder="请输入仓位ID"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="customerName" v-show="searchBox.expand">
                        <el-tooltip
                            content="请输入用户手机号搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.customerName"
                                placeholder="请输入学生昵称"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="traderName" v-show="searchBox.expand">
                        <el-tooltip
                            content="请输入用户邮箱搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.traderName"
                                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="listdata"
            v-loading="state.loading"
            highlight-current-row
            border
        >
            <el-table-column align="center" prop="customerId" label="用户ID" />
            <el-table-column
                align="center"
                prop="customerMemberId"
                label="学生ID"
            />
            <!-- <el-table-column
                align="center"
                prop="customerName"
                label="学生昵称"
            /> -->
            <!-- <el-table-column align="center" prop="traderId" label="交易员ID" /> -->
            <el-table-column
                align="center"
                prop="traderMemberId"
                label="交易员会员ID"
                min-width="90"
            />
            <el-table-column
                align="center"
                prop="traderName"
                label="交易员昵称"
            />
            <el-table-column align="center" prop="positionId" label="仓位ID" />
            <el-table-column
                align="center"
                prop="traderPositionId"
                label="老师仓位ID"
            />
            <el-table-column align="center" prop="symbol" label="交易对" />
            <el-table-column align="center" prop="leverage" label="杠杆">
                <template #default="scope">
                    <span
                        :style="{
                            'background-color': `${
                                scope.row.direction
                                    ? 'red'
                                    : 'rgb(66, 185, 131)'
                            }`,
                            padding: '3px',
                            color: 'white',
                            borderRadius: '5px',
                        }"
                        >{{ scope.row.leverage + "X" }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" prop="direction" label="方向">
                <template #default="scope">
                    <span
                        :style="{
                            'background-color': `${
                                scope.row.direction
                                    ? 'red'
                                    : 'rgb(66, 185, 131)'
                            }`,
                            padding: '3px',
                            color: 'white',
                            borderRadius: '5px',
                        }"
                        >{{
                            // scope.row.direction ? "卖出开空" : "买入开多"
                            scope.row.direction ? "空" : "多"
                        }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="availablePosition"
                label="当前可平张数"
                min-width="90"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.availablePosition)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column align="center" prop="closePrice" label="平仓均价">
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.closePrice)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column align="center" prop="openPrice" label="开仓价格">
                <template #default="scope">
                    <span>{{ truncation(scope.row.openPrice) }}</span></template
                >
            </el-table-column>
            <!-- <el-table-column
                align="center"
                prop="contractOrderEntrustId"
                label="合约委托单号"
                min-width="90"
                show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
                align="center"
                prop="currentPosition"
                label="当前持仓张数"
                min-width="100"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.currentPosition)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column align="center" prop="dividendFee" label="分润金额">
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.dividendFee)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="principalAmount"
                label="保证金"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.principalAmount)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="profitAndLoss"
                label="盈亏金额"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.profitAndLoss)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column align="center" prop="status" label="持仓状态">
                <template #default="scope">
                    <span>{{
                        scope.row.status == 10
                            ? "未平仓"
                            : scope.row.status == 20
                            ? "部分平仓"
                            : "全部平仓"
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="totalPosition"
                label="总持仓张数"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.totalPosition)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="totalPrincipalAmount"
                label="总本金"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.totalPrincipalAmount)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="transactionFee"
                label="交易手续费"
            >
                <template #default="scope">
                    <span>{{
                        truncation(scope.row.transactionFee)
                    }}</span></template
                >
            </el-table-column>
            <el-table-column
                align="center"
                prop="updatedTime"
                label="更新时间"
                min-width="140"
            >
                <template #default="scope">
                    <span>{{
                        timestampToTime(scope.row.updatedTime)
                    }}</span></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" setup>
import { positionHistory } from "@/api/documentary/index";
import { reactive, onMounted, toRefs, ref } from "vue";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { ElForm } from "element-plus";
import { truncation, timestampToTime } from "@/utils/filter";

const state = reactive({
    loading: true,
    total: 0,
    queryParams: {
        currentPage: 1,
        pageSize: 15,
        customerMemberId: "" as any,
        traderMemberId: "" as any,
        customerName: "",
        traderName: "",
        positionId: "" as any,
    },
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    listdata: [],
});
const queryFormRef = ref(ElForm);

const { listdata, queryParams, searchBox } = toRefs(state);

const handleQuery = () => {
    if (state.queryParams.customerMemberId == "") {
        state.queryParams.customerMemberId == "";
    } else {
        state.queryParams.customerMemberId = Number(
            state.queryParams.customerMemberId
        );
    }
    if (state.queryParams.positionId == "") {
        state.queryParams.positionId == "";
    } else {
        state.queryParams.positionId = Number(state.queryParams.positionId);
    }
    if (state.queryParams.traderMemberId == "") {
        state.queryParams.traderMemberId == "";
    } else {
        state.queryParams.traderMemberId = Number(
            state.queryParams.traderMemberId
        );
    }
    positionHistory(state.queryParams).then((res: any) => {
        state.listdata = res.data.records;
        state.total = res.data.total;
        state.loading = false;
    });
};

onMounted(() => {
    handleQuery();
});

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

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

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