<template>
    <view class="ant-layout page">
		<page-header></page-header>
        <head-title title="运行参数"></head-title>
        <view class="ant-layout-content content">

            <uni-section title="存储超时设置" titleColor="#fff" titleFontSize="18px"></uni-section>
            <uni-row>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">临期：</view>
                        <view class="value">
                            <input type="number" class="ant-input" v-model="endoNear"/>
                        </view>
                        <view class="ant-form-item-label after">小时</view>
                    </view>
                </uni-col>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">超期：</view>
                        <view class="value">
                            <input type="number" class="ant-input" v-model="endoOver"/>
                        </view>
                        <view class="ant-form-item-label after">小时</view>
                    </view>
                </uni-col>
            </uni-row>
            <uni-section title="传感器设置" titleColor="#fff" titleFontSize="18px"></uni-section>
            <uni-row>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">温度：</view>
                        <view class="value">
                            <input type="number" class="ant-input" v-model="temp"/>
                        </view>
                        <view class="ant-form-item-label after">℃</view>
                    </view>
                </uni-col>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">湿度：</view>
                        <view class="value">
                            <input type="number" class="ant-input" v-model="humi"/>
                        </view>
                        <view class="ant-form-item-label after">%RH</view>
                    </view>
                </uni-col>
            </uni-row>
            <uni-row>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">压差：</view>
                        <view class="value">
                            <input type="number" class="ant-input" v-model="pressure"/>
                        </view>
                        <view class="ant-form-item-label after">Pa</view>
                    </view>
                </uni-col>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label before">压差补偿：</view>
                        <view class="value">
                            <input class="ant-input" v-model="pressureCom"/>
                        </view>
                        <view class="ant-form-item-label after">Pa</view>
                    </view>
                </uni-col>
            </uni-row>
            <uni-section title="自动消毒设置" titleColor="#fff" titleFontSize="18px"></uni-section>
            <view class="ant-flex group-set" v-for="(i, k) in group" :key="k"> 
                <view class="ant-form-item-label">组{{k+1}}：</view>
                <view class="input">
                    <input type="number" class="ant-input" v-model="group[k].start.h" />
                    <text class="form-text"> : </text>
                    <input type="number" class="ant-input" v-model="group[k].start.m" />
                </view>
                <view class="form-text">~</view>
                <view class="input">
                    <input type="number" class="ant-input" v-model="group[k].end.h" />
                    <text class="form-text"> : </text>
                    <input type="number" class="ant-input" v-model="group[k].end.m" />
                </view>
                <view class="form-text" style="width: 120px;margin-left: 10px;">
                    <select-switch :defaultSwitch="group[k].status" @change="groupStatusChange(k)" checked_bj_color="#777D90" :switchList="['ON', 'OFF']"></select-switch>
                </view>
            </view>
            <uni-section title="手动消毒时长设置" titleColor="#fff" titleFontSize="18px"></uni-section>
            <uni-row class="ant-flex" style="justify-content: left;">
                <view class="ant-form-item-label">时长：</view>
                <view class="input" style="width: 100px;">
                    <input type="number" class="ant-input" v-model="disinfectTime"/>
                </view>
                <view class="ant-form-item-label">
                    <text class="form-text">分钟</text>
                    <text style="font-size: 16px;margin-left:10px;">(单次开启持续时长1-59分钟)</text>
                </view>
            </uni-row>
            <uni-section title="真空泵运行参数设置" titleColor="#fff" titleFontSize="18px"></uni-section>
            <uni-row>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label">每隔：</view>
                        <view class="input" style="width: 100px;">
                            <input type="number" class="ant-input" v-model="vacuumPerHour"/>
                        </view>
                        <view class="ant-form-item-label">小时</view>
                    </view>
                </uni-col>
                <uni-col :span="12">
                    <view class="ant-flex">
                        <view class="ant-form-item-label">启动：</view>
                        <view class="input" style="width: 100px;">
                            <input type="number" min="1" max="59" class="ant-input" v-model="vacuumRunTime"/>
                        </view>
                        <view class="ant-form-item-label">分钟</view>
                    </view>
                </uni-col>
            </uni-row>
            <uni-row style="margin-top: 40px;"> 
                <uni-col :span="24"> 
                    <view class="ant-btn" @click="submit">保存</view>
                    <view class="ant-btn" style="margin-left: 20px;" @click="asyncSet">同步</view>
                </uni-col>
            </uni-row>
        </view>

        <notice ref="notice"/>
    </view>  
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import HeadTitle from '@/components/HeadTitle.vue'
import Notice from '@/components/Notice.vue';
import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
import storage from '@/utils/storage.js';
import { compareTimes } from '@/utils/common.js';
export default {
    components: {
        PageHeader,Notice,HeadTitle, selectSwitch
    },
    data() {
        return {
            endoNear: '72',
            endoOver: '96',
            temp: '16',
            humi: '30',
            pressure: '5',
            pressureCom: '+5',

            group: [],
            disinfectTime: '10',
            vacuumPerHour: '1',
            vacuumRunTime: '10',
        }
    },
    onLoad() { 
        let runStorage = this.$store.getters.run
        if (runStorage) {
            // 本地存储
            for (let k in runStorage) {
                this[k] = runStorage[k]
            }
        }

    },
    methods: {
        groupStatusChange(key) {
            this.group[key].status  = !this.group[key].status
        },
        submit() { 
            if (this.checkeForm()) {
                storage.set('run', { ...this.$data })
                this.$store.commit('SET_RUN', { ...this.$data })
                this.$refs.notice.open({
                    title: '保存成功'              
                })
            }
        },
        checkeForm() { 
            if (this.endoNear < 1 || this.endoNear > this.endoOver) {
                uni.showToast({
                    title: '请检查超时设置填写是否正确',
                    icon: 'none'
                })
                return false
            }
            for (let i of this.group) { 
                if (i.start.h > 23 || i.start.m > 59 || i.end.h > 23 || i.end.m > 59) {
                    uni.showToast({
                        title: '时间格式超限',
                        icon: 'none'
                    })
                    return false
                }
                i.start.h = i.start.h.toString().padStart(2, '0');
                i.start.m = i.start.m.toString().padStart(2, '0');
                i.end.h = i.end.h.toString().padStart(2, '0');
                i.end.m = i.end.m.toString().padStart(2, '0');
                let start = i.start.h + ':' + i.start.m
                let end = i.end.h + ':' + i.end.m
                if (i.status == false) {
                    continue;
                }
                if (compareTimes(start, end) != 1) { 
                    uni.showToast({
                        title: '请检查消毒设置填写是否正确',
                        icon: 'none'
                    })
                    return false
                }
            }
            for (let i in this.$data) {
                
                if (this.$data[i] == 'group') {
                    continue;
                }
                if (this.$data[i] == '' || this.$data[i] == null || this.$data[i] == 0) {
                    uni.showToast({
                        title: '请检查信息填写是否完整',
                        icon: 'none'
                    })
                    return false
                }
            }
            return true

        },
        asyncSet() {
            // const res = await this.$api.asyncSet()
            // if (res.code === 200) {
            //     this.$refs.notice.show({
            //         title: '同步成功',
            //         type: 'success'
            //     })
            // } else {
            //     this.$refs.notice.show({
            //         title: '同步失败',
            //         type: 'error'
            //     })
            // }
        }
    },

}
</script>

<style scoped>
.page{
	background: transparent;
    height: 100%;
}
.content{
    height: 100%;
    padding: 20px;
}
.uni-section{
    background-color: transparent;
    text-align: left;
}
.uni-row{
    margin-bottom: 10px;
}

.ant-form-item-label{
    color: #747A8D;
    line-height: 40px;
    padding: 0 10px;
    font-size: 18px;
}
.ant-form-item-label.before{
    width: 160px;
    text-align: right;
}
.value{
    width: 140px;
}
.ant-form-item-label.after{
    width: 80px;
    text-align: left;
}

.ant-input{
    height: 40px;
    font-size: 18px;
}
.form-text{
    color: #747A8D;
    line-height: 40px;
    text-align: left;
    font-size: 18px;
}

.ant-btn{
    line-height: 38px;
    background: #2F3242;
    border-color: #2F3242;
    height: 46px;
    width: 128px;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
}

.group-set{
    margin-bottom: 10px;
}
.group-set .ant-input{
    width: 65px;
}


.form-text :deep(.switch-container){
    width: 100%;
    height: 40px;
    border-radius: 0;
}
</style>