<template>
    <!--  现货贸易 - 买卖大厅 - 卖报价牌 -->
    <a-table
        :columns="handleColumn(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="btnListData"
                :record="record"
                class="btn-list-sticky"
                @click="openComponent"
            />
        </template>
        <template #fixedprice="{record }">
            <span>{{record.useorderpricerid }}</span>
        </template>
        <template #username="{text, record }">
            <span>{{record.userid + " "}}{{text}}</span>
        </template>
    </a-table>
    <component
        :is="componentId"
        v-if="componentId"
        :selectedRow="selectedRow"
        :parantSelectedRow="parantSelectedRow"
        :buyOrSell="BuyOrSell.buy"
        @cancel="closeComponent"
    ></component>
</template>

<script lang="ts">
import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
import { WrOrderQuote, WrOrderQuoteDetail, WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
import { defineAsyncComponent, PropType } from 'vue';
import { BtnListType } from '@/common/components/btnList/interface';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { expandIcon } from '@/common/setup/table/clolumn';
import { ColumnType } from '@/common/methods/table/interface';

import { getShowBottomValue } from '@/common/config/constrolBottom';
import { TableParam } from '@/common/setup/table/interface';
import { handleTableEventAndData } from '@/common/setup/table/compose';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';

export default defineComponent({
    emits: ['cancel', 'openComponent'],
    name: 'warehouse_receipt_trade_price_delisting_buy',
    props: {
        parantSelectedRow: {
            type: Object as PropType<QueryDeliveryRelationRsp>,
            default: {},
        },
    },
    components: {
        BtnList,
        Delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
    },
    setup(props, context) {
        const isBottom = getShowBottomValue();
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
        const columnsList = [
            { title: '序号', key: 'index', width: 60 },
            { title: '买价', key: 'orderprice' },
            { title: '买量', key: 'orderqty' },
            { title: '购买方', key: 'username' },
        ];
        const btnListData: BtnListType[] = [{ lable: '摘牌', code: 'Delisting', className: 'operBtn' }];

        // 获取列表数据
        const queryTableAction = () => {
            const param: WrTradeOrderDetailReq = {
                buyorsell: 0,
                goodsid: props.parantSelectedRow.goodsid,
            };
            queryTable(queryWrTradeOrderDetail, param);
        };
        const param: TableParam = {
            columnsList,
            queryFn: queryTableAction,
        };
        function handleColumn(columns: ColumnType[]) {
            columns.forEach((item) => {
                if (item.dataIndex == 'username') {
                    delete item.width;
                }
            });
            return columns;
        }
        return {
            isBottom,
            ...handleTableEventAndData(param),
            queryTableAction,
            BuyOrSell,
            loading,
            tableList,
            expandIcon,
            handleColumn,
            btnListData,
            columnsList,
        };
    },
});
</script>
<style lang="less">
.buy-sell-market {
    .btnDeafault.ant-btn {
        height: 30px;
    }
}
</style>