<template>
    <!-- 成交列表 -->
    <div class="transactionList flex-col">
        <s-header name="成交列表" :noback="false"></s-header>

        <div class="transactionBox flex-col">
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
                @load="onLoad">
                <div class="searchRow flex-row justify-between">
                    <div class="flex-col">
                        <div class="flex-row justify-between bd3">
                            <!-- 图标 -->
                            <!-- <div class="flex-col outer4 proportionIcon"></div> -->
                            <span class="flex-col txt2">{{ $t("taskMessage.total")
                                }}<span class="discountNumber">{{ transactionListTotal }}</span>{{
                                    $t("taskMessage.recordsInTotal") }}</span>
                        </div>
                    </div>
                </div>

                <div class="listBox">
                    <div v-for="(item) in transactionList" :key="item.id" class="listItem">
                        <div class="itemBox">

                            <div class="itemRow">
                                <span class="itemTitle">买家:&nbsp;</span>{{
                                    item.buyer }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">卖家:&nbsp;</span>{{
                                    item.seller }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">价格:&nbsp;</span>{{
                                    item.price }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">股票数:&nbsp;</span>{{
                                    item.tradeNumber }}
                            </div>
                            <!-- 创建时间 -->
                            <div class="itemRow">
                                <span class="itemTitle">创建时间:&nbsp;</span>{{
                                    showDateTime(item.createTime) }}
                            </div>

                            <!-- 卖家确认时间 -->
                            <div class="itemRow" v-if="item.status === '1'">
                                <span class="itemTitle">卖家确认时间:&nbsp;</span>{{
                                    showDateTime(item.sellerConfirmTime)
                                }}
                            </div>

                            <div class="itemRow" style="display: flex; justify-content: flex-end">
                                <!-- 未确认 -->
                                <span v-if="item.status === '0'" style="color: #EA5223">{{
                                    showStatusText(item.status)
                                    }}</span>
                                <!-- 已确认 -->
                                <span v-if="item.status === '1'" style="color: #4fc08d">{{
                                    showStatusText(item.status)
                                    }}</span>
                                <!-- 特殊取消 -->
                                <span v-if="item.status === '2'" style="color: #ff0000">{{
                                    showStatusText(item.status)
                                    }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </van-list>
        </div>

    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getTransactionList } from "@/service/transaction";
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";

const showStatusText = (statusVal) => {
    const statusMap = {
        0: '未确认',
        1: '已确认',
        2: '特殊取消',
    }
    return statusMap[statusVal] || '未知状态';
}

const user = getLoginUser();
const loading = ref(false); // 加载状态
const error = ref(false); // 错误状态
const finished = ref(false); // 结束翻页状态
const transactionList = ref([]); // 列表集合
const transactionListTotal = ref(0); // 列表总数
let searchParams = reactive({
    current: 1, // 当前页，默认第一页
    size: 10, // 页大小，默认10条
});


// 查询列表
const searchGetList = () => {
    transactionList.value = [];
    searchParams.current = 1;
    getList();
};
// 获取新人账号注册审批列表数据
const getList = async () => {
    finished.value = false;
    const { data } = await getTransactionList(
        Object.assign({}, searchParams)
    );
    if (data.code === "00000") {
        if (searchParams.current === 0) {
            transactionList.value = [];
        }
        // 列表值叠加
        transactionList.value = transactionList.value.concat(
            data.data.records
        );
        transactionListTotal.value = data.data.total;
        if (transactionList.value.length === data.data.total) {
            finished.value = true;
        }
        loading.value = false;
    } else {
        showFailToast(data.message);
    }
};

const showDateTime = (date) => {
    return date
        ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
        : "";
};


// const userStore = useUserStore();


// 滚动加载
const onLoad = () => {
    if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
    }
};

// 是否有操作的权限
const isOper = ref(true);
// 初始化页面获取列表
onMounted(async () => {
    // 加载样式
    styleUrl('transactionList');
    if (user) {
        // searchParams.adminId = user.id;
        searchGetList();

        // 如果不是admin账号，不能有操作权限
        if (user.userName != 'admin') {
            isOper.value = false;
        }
    }
});

</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>