<template>
    <view class="air-conditioner-detail">
        <view class="acd-tit">{{ airName || '-' }}</view>
        <view class="acd-panel">
            <view class="ap-top-info">
                <view class="ati-box ati-temp">
                    <view class="ab-tit">温度</view>
                    <view class="at-info">
                        <view class="ai-btn">
                            <image mode="aspectFit" :src="getIconPath('temp_add')" @click="tempBtn('add')"></image>
                        </view>
                        <view class="ai-temp">
                            <view class="at-num">{{ pageInfo.temperature || 0 }}</view>
                            <view class="at-unit">℃</view>
                        </view>
                        <view class="ai-btn">
                            <image mode="aspectFit" :src="getIconPath('temp_reduce')" @click="tempBtn('reduce')"></image>
                        </view>
                    </view>
                </view>
                <view class="ati-box ati-wind">
                    <view class="ab-tit">风速</view>
                    <!-- 1: 低速， 2：中，3：高，4：自动 -->
                    <view class="aw-txt">{{ getSpeedName(pageInfo.speed || 0) }}</view>
                </view>
            </view>
            <view class="ap-btns">
                <view class="ab-item"  @click="operateBtn({ op: 'on' })">
                    <image mode="aspectFit" :src="getIconPath('nw_open')"></image>
                    <view>开</view>
                </view>
                <view class="ab-item" @click="operateBtn({ op: 'off' })">
                    <image mode="aspectFit" :src="getIconPath('nw_close')"></image>
                    <view>关</view>
                </view>
            </view>
        </view>
        <view class="acd-btn-ls">
            <view class="abl-tit">模式</view>
            <view class="abl-ls">
                <view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in modelLs" :key="i" @click="operateBtn({ op: 'mode', ext: e.mode })">
                    <view class="ai-icon" :class="[e.mode == pageInfo.mode? 'active': '']">
                        <image mode="aspectFit" :src="getIconPath(e.icon)"></image>
                    </view>
                    <view class="ai-txt">{{ e.name || '-' }}</view>
                </view>
            </view>
        </view>
        <view class="acd-btn-ls">
            <view class="abl-tit">风速</view>
            <view class="abl-ls">
                <view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in airSpeedLs" :key="i" @click="operateBtn({ op: 'speed', ext: e.speed })">
                    <view class="ai-icon" :class="[e.speed == pageInfo.speed? 'active': '']">
                        <image mode="aspectFit" :src="getIconPath(e.icon)"></image>
                    </view>
                    <view class="ai-txt">{{ e.name || '-' }}</view>
                </view>
            </view>
        </view>
        <!-- 后台：水阀的不管 隐藏掉 -->
        <!-- <view class="acd-btn-ls">
            <view class="abl-tit">水阀</view>
            <view class="abl-ls">
                <view class="al-item" v-for="(e, i) in hydrovalveLs" :key="i">
                    <view class="ai-icon">
                        <image mode="aspectFit" :src="getIconPath(e.icon)"></image>
                    </view>
                    <view class="ai-txt">{{ e.name || '-' }}</view>
                </view>
            </view>
        </view> -->
        <view class="acd-btn-ls">
            <view class="abl-tit">允许使用按钮</view>
            <view class="abl-ls">
                <view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in allowLs" :key="i" @click="operateBtn({ op: e.op })">
                    <view class="ai-icon">
                        <image mode="aspectFit" :src="getIconPath(e.icon)"></image>
                    </view>
                    <view class="ai-txt">{{ e.name || '-' }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import deviceServer from '../../../js/device_server';
import deviceApi from '../../../js/device_api';
import util from '../../../../../utils/util';

/*
    + info  获取信息状态
    + st  设置温度(value:{op:"st",ext:"24"})  10 - 50 
    + mode  模式设置(value:{op:"mode",ext:"1"})   // 0：内机制热， 1：内机地暖同时制热(默认)， 2：地暖制热，3：制冷模式，9：通风模式
    + speed  风速设置(value:{op:"speed",ext:"1"})   // 1: 低速， 2：中，3：高，4：自动
    + lock  锁
    + unlock  解锁
    + on  开
    + off  关
*/ 
export default {
    computed: {
        modelLs(){
            return ([
                {
                    id: 1,
                    name: '内机制热',
                    icon: 'heating',
                    mode: 0,
                },
                {
                    id: 2,
                    name: '内机地暖 制热',
                    icon: 'in_under_heating',
                    mode: 1,
                },
                {
                    id: 3,
                    name: '地暖制热',
                    icon: 'under_heating',
                    mode: 2,
                },
                {
                    id: 4,
                    name: '制冷',
                    icon: 'refrigeration',
                    mode: 3,
                },
                {
                    id: 5,
                    name: '通风',
                    icon: 'ventilate',
                    mode: 9,
                },
            ])
        },
        airSpeedLs(){
            return ([
                {
                    id: 1,
                    name: '高',
                    icon: 'wind_3',
                    speed: 3,
                },
                {
                    id: 2,
                    name: '中',
                    icon: 'wind_2',
                    speed: 2,
                },
                {
                    id: 3,
                    name: '低',
                    icon: 'wind_1',
                    speed: 1,
                },
                {
                    id: 4,
                    name: '自动',
                    icon: 'wind_0',
                    speed: 4,
                },
            ])
        },
        hydrovalveLs(){
            return ([
                {
                    id: 1,
                    name: '开',
                    icon: 'open'
                },
                {
                    id: 2,
                    name: '关',
                    icon: 'close'
                },
            ])
        },
        allowLs(){
            return ([
                
                {
                    id: 2,
                    name: '开机',
                    icon: 'switch',
                    op: 'on',
                },
                {
                    id: 3,
                    name: '关机',
                    icon: 'close',
                    op: 'off',
                },
                {
                    id: 1,
                    name: '解锁',
                    icon: 'normal',
                    op: 'unlock',
                },
                {
                    id: 4,
                    name: '全锁',
                    icon: 'lock',
                    op: 'lock',
                },
            ])
        },
    },
    data(){
        return {
            subpackInfo: {},
            pageInfo: {},
            airName: ''
        }
    },
    onLoad(options){
        console.warn('qrstr', options.qrstr);
        if(options.name)this.airName = options.name;
        let _qyObj = null;
        try{
            _qyObj = util.jsonPar(options.qrstr);
        }catch(err){
            console.warn('json ERR', err);
        }
        if(!_qyObj)return;
        console.warn('_qyObj', _qyObj);
        _qyObj = this.setExt({ query: _qyObj, value: '', });
        this.subpackInfo = _qyObj; 
		console.log(11111,_qyObj);
        this.operateReq({ data: _qyObj, isTip: false });
    },
    methods: {  
        tempBtn: util.debounce(function(type){
            let { pageInfo } = this;
            let _num = pageInfo.temperature || 0;
            _num = type == 'add' ? ++_num : type == 'reduce' ? --_num : _num;
            this.operateReq({ data: this.getOperateData({ op: 'st', ext: _num }), isTip: false });

        }, 300, true),

        operateBtn: util.debounce(function({ op='', ext='' }){
            let { subpackInfo } = this;
            this.operateReq({
                data: this.getOperateData({ op, ext })
            })
            .then(res=>{
                if(res == 'success'){
                    setTimeout(_=>{
                        this.operateReq({ data: this.getOperateData({ op: 'st',  }), isTip: false });
                    }, 1200)
                }
            })
        }, 300, true),  
        getOperateData({ op='', ext='' }){
            let { subpackInfo } = this;
            let _obj = null;
            _obj = this.setOp({ query: subpackInfo, value: op, });
            _obj = this.setExt({ query: subpackInfo, value: ext, });
            return _obj;
        },
        getSpeedName(speed){
            switch(+speed){
                case 1:
                    return '低速'
                case 2:
                    return '中速'
                case 3:
                    return '高速'
                case 4:
                    return '自动'
                default:
                    return '-'
            }
        },
        setExt({query, value}){
            if(query.data.toString() !== '[object Object]')query.data = {};
            if(query.data.value.toString() !== '[object Object]')query.data.value = {};
            query.data&&query.data.value&&(query.data.value.ext = value + '');
            return query;
        },
        setOp({query, value}){
            if(query.data.toString() !== '[object Object]')query.data = {};
            if(query.data.value.toString() !== '[object Object]')query.data.value = {};
            query.data&&query.data.value&&(query.data.value.op = value);
            return query;
        },
        getIconPath(iconName){
            if(!iconName)return '';
            return `/subpackage/device/static/images/air_conditioner/${iconName}.png`
        },
        // 操作接口请求
        operateReq({data, isTip=true, isLoad=true}){
            if(isLoad)util.showLoad();
            return deviceServer.post({
                url: deviceApi.ouxuanac,
                data: data,
                isDefaultGet: false,
            })
            .then(res=>{
                if(isLoad)util.hideLoad();
                if(res.data.code == 0){
                    if(isTip)util.showNone(res.data.message || '操作成功！');
                    if(data.data&&data.data.value&&data.data.value.op === 'info')this.pageInfo = res.data.data || {};
                    return 'success'
                }else{
                    if(isTip)util.showNone(res.data.message || '操作失败！');
                    return 'fail';
                }
            })
            .catch(err=>{if(isLoad)util.hideLoad()})
        },
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    page{
        &::after{
            content: '';
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../../../static/images/page_bg.jpg) repeat-y;
            background-size: 100%;
            z-index: -1;
        }
    }
    .air-conditioner-detail{
        padding: 40upx;
        .acd-tit{
            margin-bottom: 40upx;
            font-size: 44upx;
            font-weight: 500;
            color: #1A1A1A;
        }
        .acd-panel{
            margin-bottom: 60upx;
            padding: 24upx 14upx 50upx;
            border-radius: 10upx;
            border: .5px solid #fff;
            box-shadow: 0 4upx 12upx 0 #00987454, inset 0 0 40upx 0 #ffffff80;
            background-image: linear-gradient(180deg, #eff6f44d 0%, #FFFFFF 100%);
            .ap-top-info{
                margin-bottom: 64upx;
                flex-wrap: nowrap;
                @include centerFlex(center);
                .ati-box{
                    flex-shrink: 0;
                    max-width: 50%;
                    margin: 0 10upx;
                    padding: 12upx 20upx;
                    flex-grow: 1;
                    height: 178upx;
                    border-radius: 4upx;
                    background-color: #f2f2f7;
                    .ab-tit{
                        font-size: 28upx;
                        line-height: 40upx;
                        color: #9c9c9f;
                    }
                }
                .ati-temp{
                    .at-info{
                        @include centerFlex(space-between);
                        .ai-btn{
                            flex-shrink: 0;
                            width: 24upx;
                            height: 24upx;
                            >image{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .ai-temp{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .at-num{
                                line-height: 112upx;
                                font-weight: 500;
                                font-size: 80upx;
                                color: $themeColor;
                                @include textHide(1);
                            }
                            .at-unit{
                                flex-shrink: 0;
                                padding-top: 10upx;
                                align-self: flex-start;
                                font-size: 28upx;
                                line-height: 40upx;
                                color: $themeColor;
                            }
                        }
                    }
                }
                .ati-wind{
                    .aw-txt{
                        line-height: 90upx;
                        text-align: center;
                        font-weight: 500;
                        font-size: 64upx;
                        color: $themeColor;
                        
                    }
                }
            }
            
            .ap-btns{
                @include centerFlex(center);
                .ab-item{
                    margin: 0 60upx;
                    >image{
                        margin: 0 auto 20upx;
                        display: block;
                        width: 100upx;
                        height: 100upx;
                    }
                    >view{
                        margin: 0 auto;
                        text-align: center;
                        font-size: 24upx;
                        line-height: 34upx;
                        color: #9a9a9d;
                    }
                }
            }
        }
        .acd-btn-ls{
            width: 100%;
            margin-bottom: 50upx;
            .abl-tit{
                margin-bottom: 28upx;
                line-height: 40upx;
                font-size: 28upx;
                color: #fff;
            }
            .abl-ls{
                display: flex;
                flex-wrap: wrap;
                .al-item{
                    margin-bottom: 24upx;
                    width: 116upx;
                    flex-shrink: 0;
                    flex-grow: 0;
                    &:not(:nth-child(5n)){
                        margin-right: 20upx;
                    }
                    &.acd-hover-active{
                        .ai-icon{
                            &::after{
                                position: absolute;
                                content: '';
                                left: 0;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                background-color: rgba($color: #000000, $alpha: .3);
                            }
                        }
                    }
                    .ai-icon{
                        position: relative;
                        margin: 0 auto 14upx;
                        width: 116upx;
                        height: 116upx;
                        border-radius: 10upx;
                        background-color: #fff;
                        overflow: hidden;
                        @include centerFlex(center);
                        >image{
                            width: 60upx;
                            height: 60upx;
                        }
                        &.active{
                            border: 2upx solid $themeColor;
                        }
                    }
                    .ai-txt{
                        text-align: center;
                        text-align: center;
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #1a1a1a;
                        @include textHide(2);
                    }
                }
            }
        }
    }
</style>