<template>
  <div :class="['mtp-footer', isShow ? 'is-show' : 'is-hide']">
    <div class="mtp-footer__left" v-if="isCapitalLeft">
      <CapitalInfo />
    </div>
    <div class="mtp-footer__right">
      <mtp-tabbar class="mtp-tabbar--top" :data-source="dynamicComponents" label="title" @change="componentChange">
        <a-button class="operBtn" @click="getTradeAccountList">刷新</a-button>
        <!-- 资金信息 -->
        <a-select class="select" style="width: 200px" placeholder="请选择账户" @change="tradeAccountChange"
          v-model:value="selectedAccountId">
          <a-select-option v-for="item in tradeAccountList" :value="item.accountid" :key="item.accountid">
            {{ item.accountid }}/{{ item.accountname }}</a-select-option>
        </a-select>
        <div class="iconfont icon icon-shouqi" @click="isShow = !isShow"></div>
      </mtp-tabbar>
      <component class="container" :is="currentTabComponent.component" :parent-component="currentTabComponent"
        v-if="currentTabComponent"></component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeUnmount } from 'vue';
import { useDynamicComponent } from '@/@next/hooks/common'
import { useTradeAccount } from '@/hooks/account'
import { getSelectedAccount } from '@/services/bus/account'
import { initData } from '@/common/methods'
import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import MtpTabbar from '@/@next/components/base/tabbar/index.vue'
import Bus from '@/utils/eventBus/index'

export default defineComponent({
  components: {
    MtpTabbar,
    CapitalInfo
  },
  setup() {
    const { dynamicComponents, currentTabComponent, componentChange } = useDynamicComponent('bottom');
    const { tradeAccountList, getTradeAccountList, tradeAccountChange } = useTradeAccount();
    const selectedAccount = getSelectedAccount();
    const selectedAccountId = ref(selectedAccount.accountid || undefined);
    const isShow = ref(true);

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

    // 控制资金面板是否显示在左边
    const isCapitalLeft = ref<boolean>(true);
    initData(() => {
      getTradeAccountList();
      // if (isOemByEnum(OemType.wrspot) || isOemByEnum(OemType.tian_jing_mai_dun)) {
      //   isCapitalLeft.value = false;
      // }
    });

    onBeforeUnmount(() => {
      stopNotify();
    })

    return {
      getTradeAccountList,
      isShow,
      tradeAccountList,
      selectedAccountId,
      tradeAccountChange,
      isCapitalLeft,
      dynamicComponents,
      currentTabComponent,
      componentChange
    }
  }
})
</script>

<style lang="less">
@import './index.less';
</style>