<template>
    <div class='temperature-turnControl'>
        <div class='c-333 c-f14 bgc-fff p15'>
            <div class='flex f_y_c'>
                <span>请设定模式：</span>
                <van-radio-group class='ml20' v-model="model" direction="horizontal">
                    <van-radio :name="1">制冷</van-radio>
                    <van-radio :name="2">制热</van-radio>
                </van-radio-group>
            </div>
            <div class='flex mt20'>
                <div class='lh46'>请设置目标温度值：</div>
                <div style='flex:1' class='ml10'>
                    <div class='flex f_y_c'><van-field class='c-border w50' v-model="wd" maxlength='2' @blur='filterWD' @input="checkWD" type="digit" /><span class='ml10'>度</span></div>
                    <van-notice-bar class='bgc-fff pl0' wrapable :scrollable="false" >可输入的值范围为: {{model==1?'2-25°':model==2?'20-40°':''}}</van-notice-bar>
                </div>
            </div>
            <div class='mt10'>最后一次发送的温度值为 22°</div>
            <div class='mt10 c-999'>指令发送成功后，请等待设备生效，设备每隔十分钟左右会返回一次最新实时温度值</div>
            <div class='flex mt20'>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='w100 c-border-r-5' type="info" @click="confirm">确认</van-button>
                </div>
                <div class='c-t-center' style='flex:1'>
                    <van-button class='bgc-ccc w100 c-border-r-5' style='border:0' type="info" @click="cancel">取消</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'temperature-turnControl',
    data(){
        return {
            model: 0,
            wd: '',
        }
    },
    watch:{
        model(){
            this.wd = ''
        }
    },
    methods:{
        checkWD(wd){
            if(this.model==1){
                if((wd<=25&&wd>=2)||!wd){
                    return;
                }
                if(this.wd > 25){
                    this.wd = 25;
                }
            }else if(this.model==2){
                if((wd<=40&&wd>=20)||!wd){
                    return;
                }
                if(this.wd > 40){
                    this.wd = 40;
                }
            }
        },
        filterWD(){
            if(this.model==1&&this.wd<2){
                this.wd = 2
            }else if(this.model==2&&this.wd<20){
                this.wd = 20
            }
        },
        confirm(){
            this.goBack();
        },
        cancel(){
            this.goBack();
        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.temperature-turnControl{

}
</style>