<template>
    <view class="device-manage">
        <store-name></store-name>
        <view class="dm-tit">售货柜管理</view>
        <view class="dm-list">
            <view class="dl-item" v-for="i in 10" :key="i">
                <view class="di-header">
                    <image></image>
                    <view class="dh-name">欧轩智能测试柜-01</view>
                    <view class="dh-test-btn">
                        <image></image>
                        <view>测试</view>
                    </view>
                </view>
                <view class="di-section">
                    <view class="ds-stock">
                        <view>库存：<text class="active">充足</text></view>
                        <view>补货</view>
                    </view>
                    <view class="ds-contral">
                        <view>
                            设备：<text class="active">离线</text>
                        </view>
                        <view>更新</view>
                        <view class="active">
                            <text>开启售货</text>
                            <image></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import store_name from '../../components/store_name/store_name';
const dmObj = {
    'd7': {
        id: 7,
        name: '',
        isTestBtn: true,
        testBtnIcon: '',
        testBtnName: '测试',
        isShowStock: true,
        stockBtnName: '补货',
        deviceBtnOpenName: '开启售货',
        deviceBtnStopName: '停止售货',
    }
}
export default {
    components: {
        'store-name': store_name
    },
    onLoad(options){
        console.log(options)
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .dm-tit{
        padding: 50upx 40upx 30upx;
        line-height: 60upx;
        font-weight: 500;
        font-size: 44upx;
        color: #333;
    }
    .dm-list{
        padding: 0 40upx;
        .dl-item{
            margin-bottom: 30upx;
            background-color: #fff;
        }
        .di-header{
            padding: 24upx 20upx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2upx solid #D8D8D8;
            >image{
                flex-shrink: 0;
                flex-grow: 0;
                margin-right: 20upx;
                width: 80upx;
                height: 80upx;
                background-color: skyblue;
            }
            .dh-name{
                flex-grow: 1;
                font-size: 32upx;
                line-height: 44upx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .dh-test-btn{
                flex-shrink: 0;
                margin-left: 20upx;
                >image{
                    display: block;
                    margin: 0 auto 8upx;
                    width: 36upx;
                    height: 36upx;
                    background-color: grey;
                }
                >view{
                    text-align: center;
                    line-height: 34upx;
                    font-size: 24upx;
                    color: #666;
                }
            }
        }
        .di-section{
            padding: 30upx 20upx;
            .ds-stock{
                margin-bottom: 40upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        font-size: 26upx;
                        line-height: 36upx;
                        color: #9A9A9D;
                        >text{
                            color: #EA5061;
                            &.active{
                                color: $themeColor;
                            }
                        }
                        
                    }
                    &:nth-child(2){
                        width: 140upx;
                        height: 56upx;
                        text-align: center;
                        line-height: 56upx;
                        font-size: 28upx;
                        color: #fff;
                        border-radius: 10upx;
                        background-color: $themeColor;
                    }
                }

            }
            .ds-contral{
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        font-size: 26upx;
                        line-height: 36upx;
                        color: #9A9A9D;
                        >text{
                            color: #333333;
                            &.active{
                                color: $themeColor;
                            }
                        }
                    }
                    &:nth-child(2){
                        margin-left: 28upx;
                        width: 116upx;
                        height: 46upx;
                        line-height: 42upx;
                        text-align: center;
                        border: 2upx solid $themeColor;
                        border-radius: 25upx;
                        font-size: 24upx;
                        color: $themeColor;
                    }
                    &:nth-child(3){
                        padding: 0 18upx;
                        height: 56upx;
                        line-height: 52upx;
                        text-align: center;
                        font-size: 28upx;
                        color: $themeColor;
                        border: 2upx solid $themeColor;
                        border-radius: 10upx;
                        >image{
                            margin-left: 6upx;
                            vertical-align: middle;
                            width: 32upx;
                            height: 32upx;
                            background-color: red;
                        }
                        &.active{
                            border-color: #EA5061;
                            color: #EA5061;
                        }
                    }
                }
            }
        }
    }
</style>