<template>
    <!--  现货贸易 - 买卖大厅 - 卖报价牌 -->
    <a-table
        :columns="columns"
        :class="['buyHallTable', isBottom ? '' : 'buyHallTableHigh', tableList.length ? '' : 'noDataTable']"
        :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 378px)' : 'calc(100vh - 135px)' }"
        :pagination="false"
        :loading="loading"
        :expandedRowKeys="expandedRowKeys"
        :customRow="Rowclick"
        :expandIcon="expandIcon"
        :expandIconAsCell="false"
        rowKey="key"
        :data-source="tableList"
    >
        <!-- ,  -->
        <!-- 额外的展开行 -->
        <template #expandedRowRender="{ record }">
            <BtnList
                :btnList="btnList"
                :record="record"
                class="btn-list-sticky"
                @click="openComponent"
            />
        </template>
        <template #username="{ text, record }">
            <span>{{ record.userid + " " }}{{ text }}</span>
        </template>
        <template #orderprice="{ record }">
            <span>{{ getBuyOrSellMarketPrice(record, parantSelectedRow) }}</span>
        </template>
    </a-table>
    <component
        :is="componentId"
        v-if="componentId"
        :selectedRow="selectedRow"
        :buyOrSell="BuyOrSell.buy"
        :enumName="enumName"
        :parantSelectedRow="parantSelectedRow"
        @cancel="closeComponent"
    ></component>
</template>

<script lang="ts">
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { BtnList, ComposeTableParam, defineComponent, handleComposeTable, queryTableList } from '@/common/export/commonTable';
import { expandIcon } from '@/common/setup/table/clolumn';
import { getUserId } from '@/services/bus/account';
import { getUserAccountType } from '@/services/bus/user';
import { queryTjmdTradeOrderDetail } from '@/services/go/Tjmd';
import { QueryTjmdTradeOrderDetailReq, QueryTjmdTradeOrderDetailRsp } from '@/services/go/Tjmd/interface';
import { WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
import TimerUtils from '@/utils/timer/timerUtil';
import { defineAsyncComponent, onBeforeUnmount, PropType } from 'vue';
import { RefGoodsList } from '../../interface';
import { findItemGoods } from '../../setup';
import { getBuyOrSellMarketPrice, sortPirce, useBuyOrSellBtnList, hasFloat } from '../setup';

const columns = [
    {
        key: '0th',
        dataIndex: 'index',
        title: '序号',
        align: 'center',
        slots: {
            customRender: 'index',
        },
        width: 60,
    },
    {
        key: '1th',
        dataIndex: 'orderprice',
        title: '买价',
        align: 'center',
        slots: {
            customRender: 'orderprice',
        },
        width: 120,
    },
    {
        key: '2th',
        dataIndex: 'orderqty',
        title: '买量',
        align: 'center',
        slots: {
            customRender: 'orderqty',
        },
        width: 120,
    },
    {
        key: '3th',
        dataIndex: 'username',
        title: '购买方',
        align: 'center',
        slots: {
            customRender: 'username',
        },
    },
];

export default defineComponent({
    emits: ['cancel', 'openComponent'],
    name: 'warehouse_receipt_trade_price_delisting_buy',
    props: {
        enumName: {
            default: '',
            type: String as PropType<EnumRouterName>,
        },
        parantSelectedRow: {
            type: Object as PropType<RefGoodsList>,
            default: {},
        },
    },
    components: {
        BtnList,
        Listing: defineAsyncComponent(() => import('../delisting/index.vue')),
    },
    setup(props, context) {
        const isBottom = getShowBottomValue();
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<QueryTjmdTradeOrderDetailRsp>();
        // 获取列表数据
        const queryTableAction = () => {
            const param: QueryTjmdTradeOrderDetailReq = {
                buyorsell: 0,
                userid: getUserId(),
                usertype: getUserAccountType(),
                goodsid: findItemGoods(props.parantSelectedRow.goodscode)?.goodsid,
            };
            queryTable(queryTjmdTradeOrderDetail, param).then((res) => {
                // 先置空 要不然数据变更了，视图不更新
                const fn = () => {
                    tableList.value = [];
                    tableList.value = sortPirce(res, props.parantSelectedRow, false).filter(el => el.userid !== getUserId());
                };
                fn()
                if (hasFloat(res)) {
                    // 有浮动价， 则每三秒更新一次数据
                    TimerUtils.setInterval(fn, 3 * 1000, 'buyMarket');
                }
            });
        };
        onBeforeUnmount(() => {
            TimerUtils.clearInterval('buyMarket');
        });
        // 表格通用逻辑
        const param: ComposeTableParam = {
            queryFn: queryTableAction,
        };

        return {
            isBottom,
            ...handleComposeTable<WrOrderQuoteDetail>(param),
            queryTableAction,
            BuyOrSell,
            loading,
            tableList,
            enumName: props.enumName,
            expandIcon,
            btnList: useBuyOrSellBtnList(),
            columns,
            getBuyOrSellMarketPrice,
        };
    },
});
</script>
<style lang="less">
.buy-sell-market {
    .btnDeafault.ant-btn {
        height: 28px;
        line-height: 28px;
    }
}
</style>