<template>
    <view class="locer-manage">
        <device-name :name="optionsQuery.name"></device-name>
        <view class="lm-list">
            <view class="ll-item" v-for="(e,i) in boxList" :key="i" @click="itemClick(i)">
                <view class="li-left">

                    <view class="ll-box">{{e.id || '-'}}号</view>
                    <view 
                        v-if="getleaseBoxType(e)" 
                        class="ll-tag" 
                        :class="[e.usage_status==0?'grey':e.usage_status==1&&!isRent(e)?'orange':'']"
                    >{{getleaseBoxType(e)}}</view>
                </view>

                <view class="li-content">
                    
                    <view>
                        <view class="lc-name">{{isRent(e)?e.cabinet_name || '-':e.goods_name || '-'}}</view>
                        <view class="lc-price">
                            <view>{{e.price || '0'}}<text>{{e.unit || '-'}}</text></view>
                            <view v-if="optionsQuery.page_id == 8&&isRent(e)">押金：{{e.deposit || '0'}}元</view>
                        </view>
                    </view>

                    <image 
                    v-if="e._isSelected"
                        class="active" 
                        mode="aspectFit" 
                        src="/subpackage/device/static/images/selected_987.png">
                    </image>
                    <image v-else></image>
                    
                </view>
            </view>
        </view>
        <view class="lm-tip">{{getTip}}</view>
        
        <view class="lm-fixed-bar">
            <view class="lfb-select-all" @click="selectAll">
                <image v-if="isSelectedAll" class="active" mode="aspectFit" src="/subpackage/device/static/images/selected_987.png"></image>
                <image v-else></image>
                <text>全选</text>
            </view>
            <view class="lfb-confirm" hover-class="hover-active" @click="openLocker">打开柜子</view>
        </view>
    </view>
</template>

<script>
import util from '../../../../utils/util';
import device_name from '../../components/device_name/device_name';
import deviceServer from '../../js/device_server';
import deviceApi from '../../js/device_api';
// e.page_id == 8  ||　  // 租售柜
// e.page_id == 9  ||　  // 储物柜
export default {
    components: {
        'device-name': device_name
    },
    computed: {
        getTip(){
            let { optionsQuery } = this;
            if(optionsQuery.page_id == 8)return 'Tips：如需更换货物、设置价格请前往PC端商家后台设置';
            if(optionsQuery.page_id == 9)return 'Tips：如需设置柜子信息、设置价格请前往PC端商家后台设置';
            return 
        },
        isSelectedAll(){
            let { boxList } = this;
            let _is = true;
            boxList.forEach(el=>{
                if(!el._isSelected)_is = false;
            })
            return _is
        }
    },
    data(){
        return{
            optionsQuery: {},
            boxList: [],
        }
    },
    onLoad(options){
        let _query = util.jsonPar(options.query);
        this.optionsQuery = _query;
        console.log(_query);
        this.getBoxList();
    },
    methods: {
        selectAll(){
            let { isSelectedAll } = this;
            let _boxList = this.boxList.slice();
            this.boxList = _boxList.map(el=>{
                el._isSelected = !isSelectedAll;
                return el;
            });
        },
        itemClick(index){
            let _boxList = this.boxList.slice();
            _boxList[index]._isSelected = !_boxList[index]._isSelected;
            this.boxList = _boxList;
        },
        isRent(info){
            if(!info)return false;
            return info.cabinet_type === 'rent'
        },
        getleaseBoxType(info){
            let _rentArr = ['未租', '已租'];
            let _sellArr = ['未卖', '已卖'];
            if(!info)return '';
            if(info.cabinet_type == 'rent')return _rentArr[info. usage_status] || '';
            if(info.cabinet_type == 'sell')return _sellArr[info. usage_status] || '';
        },
        getBoxList(){
            deviceServer.get({
                url: this.getListApi(),
                data: {},
                failMsg: '加载失败！'
            })
            .then(res=>{
                let _list = res.list || [];
                this.boxList = _list;
                console.log(res);
            })
        },  
        getListApi(){
            let { optionsQuery } = this;
            if(optionsQuery.page_id == 8)return deviceApi.leaseList;
            if(optionsQuery.page_id == 9)return deviceApi.lockerList;
        },
        openLocker(){
            let { optionsQuery } = this;
            if(optionsQuery.page_id == 9)return util.showModal({
                title: '提示',
                content: '是否补货',
                showCancel: true,
                success: modalRes=>{
                    console.log(modalRes)
                }
            })
        }
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .locer-manage{
        padding-bottom: 108upx;
        padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
    }
    .lm-list{
        padding: 24upx;
        .ll-item{
            margin-bottom: 24upx;
            padding: 30upx;
            border-radius: 10upx;
            background-color: #fff;
            @include centerFlex(space-between);
            &:nth-child(odd){
                .li-left{
                    border: none;
                    background-color: #f0f0f1;
                    .ll-box{
                        border: none;
                        background-color: #e3e3e5;
                        &::before{
                            border: none;
                            background-color: #f0f0f1;
                        }
                    }
                }
            }
            .li-left{
                flex-shrink: 0;
                position: relative;
                margin-right: 22upx;
                width: 156upx;
                height: 156upx;
                border-radius: 10upx;
                border: 2upx solid #ededf5;
                @include centerFlex(center);
                .ll-box{
                    position: relative;
                    padding: 10upx;
                    width: 120upx;
                    height: 120upx;
                    line-height: 100upx;
                    text-align: center;
                    border-radius: 10upx;
                    font-size: 32upx;
                    color: #9a9a9d;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    border: 2upx solid #ededf5;
                    &::before{
                        content: '';
                        position: absolute;
                        left: 10upx;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 10upx;
                        height: 20upx;
                        border-radius: 6upx;
                        border: 2upx solid #ededf5;
                    }
                }
                .ll-tag{
                    position: absolute;
                    top: -14upx;
                    right: -26upx;
                    padding: 0 6upx;
                    border-radius: 6upx;
                    border: 2upx solid $themeColor;
                    text-align: center;
                    line-height: 28upx;
                    font-size: 20upx;
                    color: $themeColor;
                    &.grey{
                        border-color: #D8D8D8;
                        color: #9A9A9D;
                    }
                    &.orange{
                        border-color: #FF873D;
                        color: #FF873D;
                    }
                }
            }
            .li-content{
                flex-grow: 1;
                display: flex;
                justify-content: space-between;
                >image{
                    flex-shrink: 0;
                    margin-left: 10upx;
                    width: 32upx;
                    height: 32upx;
                    border-radius: 50%;
                    border: 2upx solid #dddddd;
                    align-self: center;
                    &.active{
                        border-color: transparent;
                    }
                }
                >view{
                    flex-grow: 1;
                    .lc-name{
                        margin-bottom: 18upx;
                        line-height: 50upx;
                        font-size: 36upx;
                        color: #333;
                        @include textHide(1);
                    }
                    .lc-price{
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-end;
                        >view{
                            flex-shrink: 0;
                            flex-grow: 0;
                            width: 50%;
                            @include textHide(1);
                            &:first-child{
                                line-height: 56upx;
                                font-size: 40upx;
                                color: #FF873D;
                                >text{
                                    font-size: 28upx;
                                }
                            }
                            &:nth-child(2){
                                line-height: 44upx;
                                font-size: 28upx;
                                color: #9a9a9d;
                            }
                        }
                    }

                }
            }
        }
    }
    .lm-tip{
        padding: 0 24upx;
        margin-bottom: 24upx;
        line-height: 34upx;
        font-size: 24upx;
        color: #9a9a9d;

    }
    .lm-fixed-bar{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10upx 24upx;
        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        padding-top: 10upx;
        background-color: #fff;
        @include centerFlex(space-between);
        .lfb-select-all{
            font-size: 28upx;
            line-height: 40upx;
            color: #494949;
            >image{
                margin-right: 12upx;
                vertical-align: middle;
                width: 32upx;
                height: 32upx;
                border: 2upx solid #d8d8d8;
                border-radius: 50%;
                &.active{
                    border-color: transparent;
                }
            }
        }
        .lfb-confirm{
            padding: 0 56upx;
            text-align: center;
            height: 86upx;
            line-height: 86upx;
            font-size: 32upx;
            border-radius: 46upx;
            background-color: $themeColor;
            color: #fff;
        }
    }
</style>