<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="orderId">
                        <el-tooltip
                            content="请输入订单ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.orderId"
                                placeholder="请输入订单ID搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </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: 110px"
                        >
                            <el-option
                                v-for="(key, value) in state.directionMap"
                                :key="key"
                                :label="key"
                                :value="value"
                            />
                        </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: 110px"
                        >
                            <el-option
                                v-for="(key, value) in state.typeMap"
                                :key="key"
                                :label="key"
                                :value="value"
                            />
                        </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: 110px"
                        >
                            <el-option
                                v-for="(key, value) in state.statusMap"
                                :key="key"
                                :label="key"
                                :value="value"
                            />
                        </el-select>
                    </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="memberId" label="用户ID" />
            <el-table-column align="center" prop="orderId" label="订单ID" />
            <el-table-column align="center" prop="symbol" label="交易对标识" />
            <el-table-column align="center" prop="coinSymbol" label="币种" />
            <el-table-column
                align="center"
                prop="baseSymbol"
                label="参照币种"
            />
            <el-table-column align="center" prop="orderResource" label="来源" />
            <el-table-column align="center" prop="price" label="报价">
                <template #default="scope">
                    {{ truncation(scope.row.price) }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="amount" label="下单金额">
                <template #default="scope">
                    {{ truncation(scope.row.amount) }}
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="tradedAmount"
                label="实际成交量"
            >
                <template #default="scope">
                    {{ truncation(scope.row.tradedAmount) }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="triggerPrice" label="触发价">
                <template #default="scope">
                    {{ truncation(scope.row.triggerPrice) }}
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="turnover"
                label="实际成交金额"
                min-width="100"
            >
                <template #default="scope">
                    {{ truncation(scope.row.turnover) }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="direction" label="方向">
                <template #default="scope">
                    {{ state.directionMap[scope.row.direction] }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="委托类型">
                <template #default="scope">
                    {{ state.typeMap[scope.row.type] }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态">
                <template #default="scope">
                    {{ state.statusMap[scope.row.status] }}
                </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">
name: "documentaryRecord";
</script>
<script lang="ts" setup>
import { ExchangeOrderQueryForm } from "../../../types/api/coinspot";
import { exchangeOrder } from "../../../api/coinSpot";
import { timestampToTime, truncation } from "@/utils/filter";
import { reactive, onMounted, toRefs, ref } from "vue";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { ElForm } from "element-plus";

const queryFormRef = ref(ElForm);

const state = reactive({
    loading: true,
    total: 0,
    queryParams: {
        // amount: 0,
        // baseSymbol: "",
        // canceledTime: 0,
        // coinSymbol: "",
        // completedTime: 0,
        currentPage: 1,
        // direction: 0,
        memberId: "",
        orderId: "",
        // orderResource: 0,
        pageSize: 15,
        // status: 0,
        // symbol: "",
        // time: 0,
        // tradedAmount: 0,
        // triggerPrice: 0,
        // turnover: 0,
        // type: 0,
        // useDiscount: "",
    } as ExchangeOrderQueryForm,
    listdata: [],
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    statusMap: {
        "1": "已挂单未成交",
        "2": "已触发",
        "3": "已成交",
        "4": "已撤单",
    },
    typeMap: {
        "1": "市场价",
        "2": "限价",
        "3": "计划",
    },
    directionMap: {
        "1": "买",
        "2": "卖",
    },
});
const { listdata, queryParams, searchBox } = toRefs(state);
const handleQuery = () => {
    exchangeOrder(state.queryParams).then((res: any) => {
        state.listdata = 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>
