<template>
    <div id="stockfull" ref='stockfull' style="width:100%;height:100%">
        <div class="stocklist" ref='stocklist' id='stocklist' >
                <div>
                    <p v-for="(item,index) in ShowData" :key="index" :class="item.Color">{{item.Text}}</p>
                </div>
                <div>
                    <p v-for="(item,index) in ShowData" :key="index" :class="item.Color">{{item.Text}}</p>
                </div>
                <div>
                    <p v-for="(item,index) in ShowData" :key="index" :class="item.Color">{{item.Text}}</p>
                </div>
        </div> 
    </div>
</template>


<script>
    import $ from "jquery";
    //import JSCommon from "../umychart.vue/umychart.vue.js";
    import JSCommonStock from "../umychart.vue/umychart.stock.vue.js";

    export default 
    {
        JSCommonStock: JSCommonStock,
        //JSCommon:JSCommon,
        
        name: 'StockList',

        props:
        [
            
        ],

        data() 
        {
            let data =
            {
               ShowData:[]
            }

            return data;
        },

        created:function() 
        {
            for(var i=0;i<3;++i)
            {
                var showText='test'+i;
                this.ShowData.push({Color:"rgb(45,55,0)", Text:showText});
            }
        },

        mounted:function()
        {
            document.getElementById('stocklist').scrollTop=500;

            this.OnSize();
        },

        methods:
        {
            OnSize:function()
            {
                var stockFull=this.$refs.stockfull;
                var width=stockFull.offsetWidth;
                var height=stockFull.offsetHeight;

                var stockList=this.$refs.stocklist;
                stockList.style.height=height+'px';
                stockList.style.width=width+'px';

                console.log('[StockList::OnSize]',width,height);
            },
        }

    }

</script>



<style lang="scss" scoped>

$border: 1px solid #17242b;

.stocklist 
{
    border: $border;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    overflow-y: scroll;
    width: 100%;
    box-sizing: border-box;

    >div {
        flex-grow: 1;
        height: 100%;
        p {
            height: 20%;
            display: table;
            >span{
                display: table-cell;
                vertical-align: middle;
            }
        }
    }

    >div:nth-of-type(3) {
        p {
            text-align: right;
        }
    }
}

</style>

