<script lang="ts">
export default {
    name: "entrust",
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm, ElTable, ElMessage } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { useDateFormat } from "@vueuse/core";
import { queryEntrustList, cancelEntrustOrder } from "@/api/swap";
import { EntrustQueryParam, EntrustItem } from "@/types/api/swap";
import { queryContractCoinList } from "@/api/system/dashboard";
import { ContractCoinListResponseData } from "@/types/api/system/dashboard";
import { emptyTransfer, truncation } from "@/utils/filter";

const queryFormRef = ref(ElForm);
const dataTableRef = ref(ElTable);

const state = reactive({
    loading: true,
    loading2: false,
    coinList: [] as ContractCoinListResponseData,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        contractId: "",
        entrustType: "",
        direction: "",
        type: "",
        isBlast: "",
        isFromSpot: "",
        status: "0",
        memberId: "",
        phone: "",
        email: "",
        profitAndLoss: "",
        volume: "",
        startTime: "",
        endTime: "",
    } as EntrustQueryParam,
    list: [] as EntrustItem[],
    total: 0,
    type: [
        "平仓",
        "市价全平",
        "一键平仓",
        "反向开仓",
        "止盈止损",
        "爆仓",
        "管理员平仓",
        "跟单账户止盈",
        "跟单账户止损",
        "跟单仓位止盈",
        "跟单仓位止损",
        "跟单用户平仓",
    ],
});

const { loading, loading2, searchBox, queryParams, list, total } =
    toRefs(state);

function handleQuery() {
    state.loading = true;
    queryEntrustList(state.queryParams).then(({ data }) => {
        state.list = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
}

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

/**
 * 获取合约交易对
 */
const getContractCoinList = () => {
    queryContractCoinList({ pageNo: 1, pageSize: 1000 }).then(({ data }) => {
        state.coinList = data.content;
    });
};

const optInitContractWallet = (row: any) => {
    loading2.value = true;
    console.log(row.id);
    cancelEntrustOrder({ entrustId: row.id })
        .then((res: any) => {
            if (!res.code) {
                ElMessage.success(res.message);
                loading2.value = false;
            } else {
                ElMessage.error(res.message);
                loading2.value = false;
            }
        })
        .catch(() => {
            loading2.value = false;
        });
};

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

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

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <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="entrustType" v-show="searchBox.expand">
                <span>委托分类：</span>
                <el-select
                    v-model="queryParams.entrustType"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="开仓" />
                    <el-option key="1" value="1" label="平仓" />
                </el-select>
            </el-form-item>
            <el-form-item prop="direction" v-show="searchBox.expand">
                <span>委托方向：</span>
                <el-select
                    v-model="queryParams.direction"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="多单" />
                    <el-option key="1" value="1" label="空单" />
                </el-select>
            </el-form-item>
            <el-form-item prop="type" v-show="searchBox.expand">
                <span>委托类型：</span>
                <el-select
                    v-model="queryParams.type"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="市价委托" />
                    <el-option key="1" value="1" label="限价委托" />
                    <el-option key="2" value="2" label="计划委托" />
                </el-select>
            </el-form-item>
            <el-form-item prop="isBlast" v-show="searchBox.expand">
                <span>是否爆仓单：</span>
                <el-select
                    v-model="queryParams.isBlast"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="否" />
                    <el-option key="1" value="1" label="是" />
                </el-select>
            </el-form-item>
            <el-form-item prop="isFromSpot" v-show="searchBox.expand">
                <span>是否计划委托：</span>
                <el-select
                    v-model="queryParams.isFromSpot"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="否" />
                    <el-option key="1" value="1" label="是" />
                </el-select>
            </el-form-item>
            <el-form-item prop="status" v-show="searchBox.expand">
                <span>委托状态：</span>
                <el-select
                    v-model="queryParams.status"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option key="0" value="0" label="委托中" />
                    <el-option key="1" value="1" label="已撤销" />
                    <el-option key="2" value="2" label="委托失败" />
                    <el-option key="3" value="3" label="委托成功" />
                    <el-option key="" value="" label="全部委托" />
                </el-select>
            </el-form-item>
            <el-form-item prop="memberId" v-show="searchBox.expand">
                <el-tooltip
                    content="请输入用户ID搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.memberId"
                        placeholder="请输入用户ID搜索"
                        style="width: 200px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="phone">
                <el-tooltip
                    content="请输入用户手机号搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.phone"
                        placeholder="请输入用户手机号搜索"
                        style="width: 200px"
                        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: 200px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="profitAndLoss" v-show="searchBox.expand">
                <el-tooltip
                    content="合约收益大于"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.profitAndLoss"
                        placeholder="合约收益大于"
                        style="width: 110px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="volume" v-show="searchBox.expand">
                <el-tooltip
                    content="委托量大于"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.volume"
                        placeholder="委托量大于"
                        style="width: 110px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="startTime" v-show="searchBox.expand">
                <el-date-picker
                    v-model="queryParams.startTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="开始时间"
                />
            </el-form-item>
            <el-form-item prop="endTime" v-show="searchBox.expand">
                <el-date-picker
                    v-model="queryParams.endTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="结束时间"
                />
            </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-table
            ref="dataTableRef"
            v-loading="loading"
            :data="list"
            highlight-current-row
            border
        >
            <el-table-column label="会员ID" prop="memberId" align="center" />
            <el-table-column
                label="合约"
                prop="symbol"
                min-width="110"
                align="center"
            />
            <el-table-column
                label="类型"
                prop="status"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span
                        v-if="
                            scope.row.direction == 'BUY' &&
                            scope.row.entrustType == 'OPEN'
                        "
                        style="
                            background: #42b983;
                            color: #fff;
                            padding: 3px 5px;
                            border-radius: 5px;
                        "
                    >
                        买入开多
                    </span>
                    <span
                        v-else-if="
                            scope.row.direction == 'SELL' &&
                            scope.row.entrustType == 'OPEN'
                        "
                        style="
                            background: #ff0000;
                            color: #fff;
                            padding: 3px 5px;
                            border-radius: 5px;
                        "
                    >
                        卖出开空
                    </span>
                    <span
                        v-else-if="
                            scope.row.direction == 'BUY' &&
                            scope.row.entrustType == 'CLOSE'
                        "
                        style="
                            background: #42b983;
                            color: #fff;
                            padding: 3px 5px;
                            border-radius: 5px;
                        "
                    >
                        买入平空
                    </span>
                    <span
                        v-else-if="
                            scope.row.direction == 'SELL' &&
                            scope.row.entrustType == 'CLOSE'
                        "
                        style="
                            background: #ff0000;
                            color: #fff;
                            padding: 3px 5px;
                            border-radius: 5px;
                        "
                    >
                        卖出平多
                    </span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="杠杆倍数"
                prop="leverage"
                min-width="110"
                align="center"
                sortable
            />
            <el-table-column
                label="委托类型"
                prop="type"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span v-if="scope.row.isCut == 1">止盈止损</span>
                    <span v-else-if="scope.row.isFromSpot == 1">计划委托</span>
                    <span v-else-if="scope.row.type == 'LIMIT_PRICE'"
                        >限价委托</span
                    >
                    <span v-else-if="scope.row.type == 'MARKET_PRICE'"
                        >市价委托</span
                    >
                    <span v-else>计划委托</span>
                </template>
            </el-table-column>
            <el-table-column
                label="开仓均价"
                prop="usdtOpenPrice"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.usdtOpenPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="委托张数"
                prop="volume"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.volume))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="触发价"
                prop="triggerPrice"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.triggerPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="委托价"
                prop="entrustPrice"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.entrustPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="成交价"
                prop="tradedPrice"
                min-width="150"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.tradedPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="成交张数"
                prop="tradedVolume"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.tradedVolume))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="止盈价"
                prop="profitPrice"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.profitPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="止损价"
                prop="lossPrice"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        truncation(emptyTransfer(scope.row.lossPrice))
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="开仓手续费"
                prop="openFee"
                min-width="120"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span v-if="scope.row.status == 'ENTRUST_CANCEL'">-</span>
                    <span v-else-if="scope.row.status == 'ENTRUST_FAILURE'"
                        >-</span
                    >
                    <span
                        v-else-if="
                            scope.row.status == 'ENTRUST_SUCCESS' &&
                            scope.row.entrustType == 'OPEN'
                        "
                    >
                        {{ truncation(scope.row.openFee) }}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="平仓手续费"
                prop="closeFee"
                min-width="120"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span v-if="scope.row.status == 'ENTRUST_CANCEL'">-</span>
                    <span v-else-if="scope.row.status == 'ENTRUST_FAILURE'"
                        >-</span
                    >
                    <span
                        v-else-if="
                            scope.row.status == 'ENTRUST_SUCCESS' &&
                            scope.row.entrustType == 'CLOSE'
                        "
                    >
                        {{ truncation(scope.row.closeFee) }}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="平仓盈亏"
                prop="profitAndLoss"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span v-if="scope.row.status == 'ENTRUST_CANCEL'">-</span>
                    <span v-else-if="scope.row.status == 'ENTRUST_FAILURE'"
                        >-</span
                    >
                    <span
                        v-else-if="
                            scope.row.status == 'ENTRUST_SUCCESS' &&
                            scope.row.entrustType == 'CLOSE'
                        "
                    >
                        <span
                            v-if="scope.row.profitAndLoss > 0"
                            style="
                                color: #42b983;
                                padding: 3px 5px;
                                border-radius: 5px;
                            "
                        >
                            {{ scope.row.profitAndLoss.toFixed(2) }}
                        </span>
                        <span
                            v-else-if="scope.row.profitAndLoss < 0"
                            style="
                                color: #ff0000;
                                padding: 3px 5px;
                                border-radius: 5px;
                            "
                        >
                            {{ scope.row.profitAndLoss.toFixed(2) }}
                        </span>
                        <span
                            v-else
                            style="
                                color: #afafaf;
                                padding: 3px 5px;
                                border-radius: 5px;
                            "
                        >
                            {{ scope.row.profitAndLoss.toFixed(2) }}
                        </span>
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                prop="status"
                min-width="100"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span v-if="scope.row.isBlast == 1">爆仓</span>
                    <span v-else-if="scope.row.status == 'ENTRUST_CANCEL'"
                        >撤销</span
                    >
                    <span v-else-if="scope.row.status == 'ENTRUST_FAILURE'"
                        >委托失败</span
                    >
                    <span v-else-if="scope.row.status == 'ENTRUST_SUCCESS'"
                        >委托成功</span
                    >
                    <span v-else>委托中</span>
                </template>
            </el-table-column>
            <el-table-column
                label="平仓类型"
                prop="closeType"
                min-width="110"
                align="center"
                sortable
            >
                <template #default="scope">
                    <span>{{
                        state.type[scope.row.closeType]
                            ? state.type[scope.row.closeType]
                            : "-"
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="挂单时间"
                prop="createTime"
                min-width="160"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    {{
                        useDateFormat(
                            scope.row.createTime,
                            "YYYY-MM-DD HH:mm:ss"
                        ).value
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="成交时间"
                prop="dealTime"
                min-width="160"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    {{
                        typeof scope.row.dealTime == "object"
                            ? "-"
                            : useDateFormat(
                                  scope.row.dealTime,
                                  "YYYY-MM-DD HH:mm:ss"
                              ).value
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="160"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        type="danger"
                        size="small"
                        @click.stop="optInitContractWallet(scope.row)"
                    >
                        强制撤销
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
