<template>
    <div class='cargoLaneIndex'>
        <div class='grid-4 c-f14 c-border-b c-333 ptb15 bgc-fff'>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{rows}}</div>
                <span>层数</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{number}}</div>
                <span>货道数</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{playNum}}</div>
                <span>启用</span>
            </div>
            <div class="c-t-center">
                <div class='c-ff5e6c c-f16 mb5'>{{disableNum}}</div>
                <span>禁用</span>
            </div>
        </div>
        <div class='bgc-fff p10'>
            <div class='flex f_y_c f_x_s'>
                <div>
                    <van-button type="info" class='mr10 c-border-r-5'>货道开启</van-button>
                    <van-button type="info" class='c-border-r-5'>货道关闭</van-button>
                </div>
                <div>
                    <van-button type="info" class='mr10 c-border-r-5'>售卖</van-button>
                    <van-button type="info" class='c-border-r-5'>停售</van-button>
                </div>
            </div>
            <div class='mt10'><van-button type="info" style='width:100%;' class='c-border-r-5'>获取货道状态</van-button></div>
            <div class='mt20 c-f14'>
                <div class='flex f_y_c x-overflow'>
                    <div v-for='(item, index) in (Math.ceil(number/6))'>
                        <div>
                            <div class='c-t-center w50 ptb10 bgc-ccc' :class='(Math.ceil(number/6))!=index+1?"mr10":""'>{{index+1}}</div>
                            <div v-for='(item, index) in rows'>
                                <div class='c-t-center w50 ptb10 mt10 bgc-fff c-border c-position-r' :class='(Math.ceil(number/6))!=index+1?"mr10":""'>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>正常</div>
                                        <div v-else class='c-ff9526'>故障</div>
                                    </div>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>已停用</div>
                                        <div v-else class='c-ff5e6c'>停售</div>
                                    </div>
                                    <div>
                                        <div v-if='true' class='c-20d7ad'>售卖</div>
                                        <div v-else class='c-ff5e6c'>停售</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default{
    name: 'cargoLaneIndex',
    data(){
        return {
            rows: 6,
            number: 240,
            playNum: 240,
            disableNum: 0,
            list: []
        }
    },
    methods:{

    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.cargoLaneIndex{
    .grid-4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .x-overflow{
        overflow-x: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none
    }
    .x-overflow::-webkit-scrollbar{
        display:none;
    }
}
</style>