<!-- 无用组件，待废弃 -->
<template>
  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
    <CapitalInfo class="capital-info-container" v-if="isCapitalLeft"></CapitalInfo>
    <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
      <firstMenu :list="dynamicComponents" :value="'title'" @selectMenu="componentChange">
        <div class="right-menu-content">
          <a-button class="operBtn" @click="getTradeAccountList">刷新</a-button>
          <!-- 资金信息 -->
          <a-select class="capitalSelect" style="width: 180px" placeholder="请选择账户" @change="tradeAccountChange"
            v-model:value="selectedAccountId">
            <a-select-option v-for="item in tradeAccountList" :value="item.accountid" :key="item.accountid">
              {{ item.accountid }}</a-select-option>
          </a-select>
          <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
        </div>
      </firstMenu>
      <component class="layout-bottom__container" :is="currentTabComponent.component" :code="currentTabComponent.code"
        v-if="currentTabComponent"></component>
    </main>
  </section>
</template>
<script lang="ts">
import { defineComponent, ref, onBeforeUnmount } from 'vue';
import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import firstMenu from '@/common/components/firstMenu/index.vue';
import quoteTable from '@/common/components/quoteTable/index.vue';
import { handleShowBottom, getShowBottomValue } from '@/common/config/constrolBottom';
import { getSelectedAccount } from '@/services/bus/account';
import Bus from '@/utils/eventBus/index';
import { initData } from '@/common/methods';
import { useTradeAccount } from '@/hooks/account'
import { useDynamicComponent } from '@/@next/hooks/common'
import MtpFooter from '@/@next/components/layout/footer/index.vue'

export default defineComponent({
  name: 'layout-top',
  components: {
    CapitalInfo,
    firstMenu,
    quoteTable,
    MtpFooter,
    // futures_information: defineAsyncComponent(() => import('@/views/order/futures_information/index.vue')), // 期货订单
    // funding_information: defineAsyncComponent(() => import('@/views/order/funding_information/index.vue')), // 资金信息
    // [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/order/spot_warran/index.vue')), // 现货仓单
    // [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/order/performance_information/index.vue')),
    // [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/order/pre_sale_warehouse_receipt/index.vue')),
    // [enumOrderComponents.financing_manager]: defineAsyncComponent(() => import('@/views/order/financing_manager/index.vue')),
    // [enumOrderComponents.commodity_contract]: defineAsyncComponent(() => import('@/views/order/commodity_contract/index.vue')),
  },
  setup() {
    const { dynamicComponents, currentTabComponent, componentChange } = useDynamicComponent('bottom');
    const { tradeAccountList, getTradeAccountList, tradeAccountChange } = useTradeAccount();
    const selectedAccount = getSelectedAccount();
    const selectedAccountId = ref(selectedAccount.accountid || undefined);
    const isCapitalLeft = ref<boolean>(true); // 控制资金面板是否显示在左边

    // 消息订阅
    const notify = [
      // 资金变化，重新加载数据
      Bus.$on('moneyChangedNtf', () => {
        getTradeAccountList();
      }),
      // 头寸变化，重新加载数据
      Bus.$on('posChangedNtf', () => {
        getTradeAccountList();
      })
    ]

    initData(() => {
      getTradeAccountList();
      // if (isOemByEnum(OemType.wrspot) || isOemByEnum(OemType.tian_jing_mai_dun)) {
      //   isCapitalLeft.value = false;
      // }
    });

    onBeforeUnmount(() => {
      notify.forEach((stop) => {
        stop();
      })
    })

    return {
      getTradeAccountList,
      tradeAccountList,
      isShowBottom: getShowBottomValue(),
      getShowBottomValue,
      handleShowBottom,
      selectedAccountId,
      tradeAccountChange,
      isCapitalLeft,
      dynamicComponents,
      currentTabComponent,
      componentChange
    };
  },
});
</script>
<style lang="less">
.right-menu-content {
  display: flex;
  align-items: center;

  .capitalSelect {
    margin-top: 2px;
    margin-right: 10px;

    .ant-select-selector {
      background-color: @m-grey6;
      border: none;
      height: 30px;
    }

    .ant-select-arrow {
      top: 15px;
    }

    .ant-select-selection-placeholder {
      color: @m-grey10;
    }
  }
}

.layout-bottom-all {
  height: 280px;
}

.layout-bottom-hidden {
  height: 36px;

  .conditionIcon {
    transform: rotate(180deg);
  }
}

.layout-bottom {
  display: flex;
  width: 100%;
  transition: height 300ms;
  overflow: hidden;

  .operBtn {
    margin-right: 8px;
  }

  .capital-info-container {
    border-right: 1px solid @m-black2;
  }

  main {
    flex: 1;
    .flex;
    flex-direction: column;
    background: @m-black36;
    position: relative;
    overflow: hidden;

    .conditionIcon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: initial;
      font-size: 16px;
      color: @m-grey1;
      width: 16px;
      cursor: pointer;
      margin-right: 10px;

      &:hover {
        color: @m-grey1-hover;
      }
    }
  }

  &__container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid transparent;
  }
}
</style>
