<template>
  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
    <CapitalInfo class="capital-info-container"></CapitalInfo>
    <main>
      <firstMenu :list="orderList"
                 :value="'title'"
                 @selectMenu="selectMenu">
        <div class="conditionIcon icon iconfont icon-shouqi"
             @click="openOrCloseBottom"></div>
      </firstMenu>
      <div v-show="isShowBottom">
        <component :is="componentId"
                   v-if="componentId">
        </component>
      </div>
    </main>
  </section>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';
import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import firstMenu from '@/common/components/firstMenu/index.vue';
import thirdMenu from '@/common/components/thirdMenu/index.vue';
import quoteTable from '@/common/components/quoteTable/index.vue';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { handleOrderData } from '@/common/setup/order/orderData';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';

// 控制底部打开与关闭
function handleBottom() {
    const isShowBottom = ref<boolean>(true);
    function openOrCloseBottom() {
        isShowBottom.value = !isShowBottom.value;
    }
    return { isShowBottom, openOrCloseBottom };
}

export default defineComponent({
    name: 'layout-top',
    components: {
        CapitalInfo,
        firstMenu,
        quoteTable,
        thirdMenu,
        [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/business/order/spot_warran/index.vue')),
        [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/business/order/funding_information/index.vue')),
        [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/business/order/performance_information/index.vue')),
        [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/business/order/pre_sale_warehouse_receipt/index.vue')),
    },
    setup() {
        // 控制底部展开逻辑
        const { isShowBottom, openOrCloseBottom } = handleBottom();
        const { orderList, componentId } = handleOrderData();
        // 切换组件
        function selectMenu(value: OperationTabMenu) {
            componentId.value = value.code as enumOrderComponents;
        }
        return {
            selectMenu,
            componentId,
            orderList,
            isShowBottom,
            openOrCloseBottom,
        };
    },
});
</script>
<style lang="less">
.layout-bottom-all {
    height: 330px;
}
.layout-bottom-hidden {
    height: 40px;
}
.layout-bottom {
    display: flex;
    width: 100%;
    transition: height 0.5s;
    overflow: hidden;
    .capital-info-container {
        width: 180px;
    }
    main {
        max-width: calc(100% - 180px);
        flex: 1;
        .flex;
        flex-direction: column;
        background: rgb(14, 14, 15);
        position: relative;
        .conditionIcon {
            font-size: 16px;
            color: @m-grey1;
            width: 16px;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            &:hover {
                color: rgba(@m-grey1, 0.8);
            }
        }
    }
}
</style>
