<template>
  <!-- 现货贸易 - 买卖大厅 - 买报价牌 -->
  <a-table :columns="handleColumn(columns)" :class="['sellHallTable', isBottom ? '' : 'sellHallTableHigh', 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" @click="openComponent" />
    </template>
    <template #orderprice="{ record }">
      <span>{{ getBuyOrSellMarketPrice(record, parantSelectedRow) }}</span>
    </template>
    <template #username="{ text, record }">
      <span>{{ record.userid + " " }}{{ text }}</span>
    </template>
  </a-table>
  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :enumName="enumName" :buyOrSell="BuyOrSell.sell" :parantSelectedRow="parantSelectedRow" @cancel="closeComponent"></component>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { ComposeTableParam, BtnList, defineComponent, handleComposeTable, queryTableList, ModalEnum } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
import { defineAsyncComponent, onBeforeUnmount, 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 { Moment } from 'moment';
import moment from 'moment';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { useBuyOrSellBtnList, getBuyOrSellMarketPrice, sortPirce, hasFloat } from '../setup';
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 { findItemGoods } from '../../setup';
import { RefGoodsList } from '../../interface';
import TimerUtils from '@/utils/timer/timerUtil';

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

export default defineComponent({
  emits: ['cancel', 'openComponent'],
  name: 'warehouse_receipt_trade_price_delisting_sell',
  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: 1,
        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).filter(el => el.userid !== getUserId());
        };
        fn()
        if (hasFloat(res)) {
          // 有浮动价， 则每三秒更新一次数据
          TimerUtils.setInterval(fn, 3 * 1000, 'sellMarket');
        }
      });
    };
    onBeforeUnmount(() => {
      TimerUtils.clearInterval('sellMarket');
    });
    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
    };
    function handleColumn(columns: ColumnType[]) {
      columns.forEach((item) => {
        columns.forEach((item) => {
          if (item.dataIndex == 'username') {
            delete item.width;
          }
        });
      });
      return columns;
    }
    return {
      isBottom,
      ...handleComposeTable<QueryTjmdTradeOrderDetailRsp>(param),
      queryTableAction,
      loading,
      tableList,
      BuyOrSell,
      enumName: props.enumName,
      expandIcon,
      handleColumn,
      btnList: useBuyOrSellBtnList(),
      columns,
      getBuyOrSellMarketPrice,
    };
  },
});
</script>
<style lang="less">
.buy-sell-market {
    .btnDeafault.ant-btn {
        height: 28px;
        line-height: 28px;
    }
}
</style>