<template>
  <div class="centercompBox">
    <component :is="componentTag" />
  </div>
</template>

<script>
// 外汇即期
import menuForexSpot from '../componentMenu/menuForexSpot.vue';
// 外汇远期
import menuForexForward from '../componentMenu/menuForexForward.vue';
// 外汇掉期
import menuForexSwap from '../componentMenu/menuForexSwap.vue';
export default {
  components: {
    menuForexSpot,
    menuForexForward,
    menuForexSwap,
  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 默认
      componentTag: 'menuForexSpot',
    };
  },
  watch: {
    value(nVal) {
      const name = nVal.chsMenuName;
      console.log(name);

      if (name === 'menu.forexSpot') {
        this.componentTag = 'menuForexSpot';
      } else if (name === 'menu.forexForward') {
        this.componentTag = 'menuForexForward';
      } else if (name === 'menu.forexSwap') {
        this.componentTag = 'menuForexSwap';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.centercompBox {
  width: 100%;
  height: 100%;
}
</style>
