<template>
    <div class="capital-info">
        <!-- 资金信息 -->
        <a-collapse
            class="capitalCollapse"
            default-active-key="1"
            :bordered="false"
            expand-icon-position="right"
        >
            <a-collapse-panel key="1" header="南山铜加工厂（074345345345345345）">
                <div class="capitalItem">
                    <div class="firstLine">
                        <div>净值</div>
                        <div>
                            <i class="iconfont icon-zhengyan"></i>
                        </div>
                    </div>
                    <div class="numBar">128,000.00</div>
                </div>
                <div class="capitalItem">
                    <div class="firstLine">
                        <div>占用</div>
                    </div>
                    <div class="numBar green">128,000.00</div>
                </div>
                <div class="capitalItem">
                    <div class="firstLine">
                        <div>冻结</div>
                    </div>
                    <div class="numBar red">128,000.00</div>
                </div>
                <div class="capitalItem">
                    <div class="firstLine">
                        <div>可用</div>
                    </div>
                    <div class="numBar blue">128,000.00</div>
                </div>
                <a-icon slot="extra" type="setting" @click="handleClick" />
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';

interface Key {
    [propName: string]: string;
}
// 折叠
const handleCollapse = () => {
    function handleClick(value: any) {}
    return { handleClick };
};
export default defineComponent({
    name: 'capital-info',
    props: {
        list: {
            default: [],
            type: Object as PropType<Key[]>,
        },
        value: {
            // 需要绑定的值得 key
            default: '',
            type: String,
        },
    },
    components: {},
    setup(props, context) {
        const current = ref<string[]>(['0']);
        function menuClick(value: any) {
            const index = +value.key;
            context.emit('selectMenu', props.list[index]);
        }
        const activeKey = ref<string[]>(['1']);
        const handleClick = handleCollapse();
        return {
            current,
            menuClick,
            activeKey,
            handleClick,
        };
    },
});
</script>

<style lang="less">
.capital-info {
    width: 100%;
    height: 100%;
    background: @m-grey6;
    .capitalCollapse {
        height: 100%;
        background: transparent;
        .ant-collapse-item {
            height: 100%;
            border: 0;
            .ant-collapse-header {
                width: 100%;
                padding: 0 25px 0 12px;
                height: 40px;
                line-height: 40px;
                border: 1px solid @m-blue0;
                border-left: 0;
                font-size: 14px;
                font-family: Adobe Heiti Std;
                color: @m-white0;
                .ellipse;
                .ant-collapse-arrow {
                    right: 10px;
                }
            }
            .ant-collapse-content {
                height: calc(100% - 60px);
                overflow: auto;
                .ant-collapse-content-box {
                    padding: 10px 12px;
                    .flex();
                    flex-direction: column;
                    .capitalItem {
                        width: 100%;
                        padding-top: 10px;
                        font-size: 14px;
                        color: @m-grey1;
                        .firstLine {
                            width: 100%;
                            .inlineflex;
                            justify-content: space-between;
                            height: 18px;
                            line-height: 18px;
                            .iconfont {
                                font-size: 18px;
                                color: @m-black3;
                            }
                        }
                        .numBar {
                            width: 100%;
                            margin-top: 8px;
                            height: 16px;
                            line-height: 16px;
                            font-size: 16px;
                            text-align: left;
                            color: @m-white0;
                            margin-bottom: 5px;
                        }
                        .green {
                            color: @m-green0;
                        }
                        .red {
                            color: @m-red1;
                        }
                        .blue {
                            color: @m-blue0;
                        }
                    }
                }
            }
        }
    }
}
</style>;
