<template>
    <div class="drawer">
        <a-drawer :placement="placement" :closable="false" :visible="visible" class="tradeDialog">
            <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
            <div class="collapse" @click="cancel"></div>
            <div class="collapseCont">
                <!-- <div class="title">{{ title }}</div> -->
                <div class="content highContent">
                    <!-- <Listed></Listed> -->
                    <!-- <Delisting></Delisting> -->
                    <Trade></Trade>
                </div>
            </div>
        </a-drawer>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, PropType } from 'vue';
    import { closeModal, ModalName } from '@/common/setup/modal/index';
    import Listed from '@/views/market/warehouseTrade/components/listed/index.vue';
    import Delisting from '@/views/market/warehouseTrade/components/delisting/index.vue';
    import Trade from '@/views/market/warehouseTrade/components/trade/index.vue';

    interface Key {
        [propName: string]: string;
    }

    export default defineComponent({
        name: 'drawer',
        props: {
            modalName: {
                default: 'drawer',
                type: String as PropType<keyof ModalName>,
            },
            title: {
                default: '',
                type: String,
            },
            placement: {
                // 需要绑定的值得 key
                default: 'right',
                type: String,
            },
        },
        components: {
            Listed,
            Delisting,
            Trade,
        },
        setup(props, context) {
            const { visible, cancel } = closeModal(props.modalName);
            return {
                visible,
                cancel,
            };
        },
    });
</script>

<style lang="less">
    .bottom {
        .position(fixed, auto, 0, -2px, auto);
        width: 586px;
        height: 330px;
        background: transparent;
        z-index: 10;
        .ant-drawer-content-wrapper {
            width: 586px !important;
        }
    }
    .top {
        .position(fixed, 116px, 0, auto, auto);
        width: 446px;
        height: 350px;
        background: transparent;
        z-index: 10;
        .ant-drawer-content-wrapper {
            width: 446px !important;
        }
    }
    .tradeDialog {
        .position(fixed, 116px, 0, auto, auto);
        width: 467px;
        height: 310px;
        background: transparent;
        z-index: 10;
        .ant-drawer-content-wrapper {
            width: 467px !important;
        }
    }
    .ant-drawer.ant-drawer-open {
        .ant-drawer-mask {
            background: transparent;
        }
        .ant-drawer-content-wrapper {
            box-shadow: none;
            .ant-drawer-content {
                background: transparent;
                .ant-drawer-wrapper-body {
                    overflow: hidden;
                    .ant-drawer-body {
                        width: 100%;
                        height: 100%;
                        padding: 0;
                        .inlineflex;
                        .collapse {
                            width: 26px;
                            height: 66px;
                            margin-top: 15px;
                            background: url(../../../assets/images/dialogClose.png) center center no-repeat;
                            background-size: cover;
                        }
                        .collapseCont {
                            flex: 1;
                            height: 100%;
                            border: 2px solid @m-blue0;
                            border-right: 0;
                            .flex;
                            flex-direction: column;
                            .title {
                                width: 100%;
                                height: 36px;
                                line-height: 36px;
                                text-align: center;
                                background: linear-gradient(0deg, @m-blue4, @m-blue5);
                                font-size: 16px;
                                color: @m-white1;
                                border-bottom: 2px solid @m-blue0;
                            }
                            .content {
                                flex: 1;
                                width: 100%;
                                max-height: calc(100% - 36px);
                                overflow-y: auto;
                                background: @m-grey11;
                            }
                            .highContent {
                                max-height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }</style
>;
