<template>
	<!-- 设置页面1 -->
  <view class="page">
      <view class="page-m">
          <!-- 预警设置 -->
          <view class="group_6">
              <view class="group_3 top-img-text">
                <img class="img-top" src="/static/预警设置.png" alt="">
                <span class="text-t">预警设置</span>
              </view>
              <!-- 箱内温度 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_77 icon_r_m"
                    src="/static/温度.png"
                  />
                  <view class="ml-6 font text_7">箱内温度(℃)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">最低</view>
                    <input style="width: 120rpx;" class="font_3" v-model="listdata.warning.beehive_temperature_min"/>
                  </view>
                  <view class="items-center group_8 view zongliang-box">
                    <view class="font_2 text_9">最高</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.beehive_temperature_max"/>
                  </view>
                </view>
              </view>
              <!-- 箱内湿度 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_88 icon_r_m"
                    src="/static/湿度.png"
                  />
                  <view class="ml-6 font text_7">箱内湿度(%)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">最少</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.beehive_humidity_min"/>
                  </view>
                  <view class="items-center group_8 view zongliang-box">
                    <view class="font_2 text_9">最多</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.beehive_humidity_max"/>
                  </view>
                </view>
              </view>
              <!-- 重量 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_6 icon_r_m"
                    src="/static/重量.png"
                  />
                  <view class="ml-6 font text_7">重量(Kg)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">最轻</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.weight_min"/>
                  </view>
                  <view class="items-center group_8 view zongliang-box">
                    <view class="font_2 text_9">最重</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.weight_max"/>
                  </view>
                </view>
              </view>
              <!-- 出勤次数 -->
                <view class="group_3">
                  <view class="items-center">
                    <image
                      class="image_6 icon_r_m"
                      src="/static/出勤.png"
                    />
                    <view class="ml-6 font text_7">出勤次数</view>
                  </view>
                  <view class="mt-10 group_7 zongliang-box">
                    <view class="items-center group_8 back_r_m zongliang-box">
                      <view class="font_2 text_8">最少</view>
                      <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.attendance_min"/>
                    </view>
                    <view class="items-center group_8 zongliang-box">
                      <view class="font_2 text_9">最多</view>
                      <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.warning.attendance_max"/>
                    </view>
                  </view>
                </view>
          </view>
          <!-- 保护设置 -->
          <view class="group_6">
              <view class="group_3 top-img-text">
                <img class="img-top" src="/static/保护设置.png" alt="">
                <span class="text-t">保护设置</span>
              </view>
              <!-- 电量保护 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_6 icon_r_m"
                    src="/static/电量.png"
                  />
                  <view class="ml-6 font text_7">电量保护(%)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8  zongliang-box">
                    <view class="font_2 text_8">电量少于</view>
                    <input type="number" style="width: 120rpx;" class="font_3" v-model="listdata.safe.battery_low_2_stop_fan"/>
                  </view>
                  <view class="textBox">
                    <view>加热板/风扇停止工作</view>
                  </view>
                </view>
              </view>
              <!-- 加热 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_99 icon_r_m"
                    src="/static/加热.png"
                  />
                  <view class="ml-6 font text_7">加热(℃)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">箱外温度低于</view>
                    <input style="width: 60rpx;" class="font_3" v-model="listdata.safe.out_box_low_temperature_2_start_heat"/>
                  </view>
                  <view class="textBox">
                    <view>加热板工作</view>
                  </view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">箱内高于箱外  </view>
                    <input type="number" style="width: 60rpx;" class="font_3" v-model="listdata.safe.in_box_high_temperature_2_stop_heat"/>
                  </view>
                  <view class="textBox">
                    <view>加热板停止工作</view>
                  </view>
                </view>
              </view>
              <!-- 风扇 -->
              <view class="group_3">
                <view class="items-center">
                  <image
                    class="image_6 icon_r_m"
                    src="/static/风扇.png"
                  />
                  <view class="ml-6 font text_7">风扇(℃)</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">箱内温度高于</view>
                    <input type="number" style="width: 60rpx;" class="font_3" v-model="listdata.safe.in_box_high_temperature_2_start_fan"/>
                  </view>
                  <view class="textBox">
                    <view>风扇工作</view>
                  </view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <view class="items-center group_8 back_r_m zongliang-box">
                    <view class="font_2 text_8">箱内温度降到</view>
                    <input type="number" style="width: 60rpx;" class="font_3" v-model="listdata.safe.in_box_low_temperature_2_stop_fan"/>
                  </view>
                  <view class="textBox">
                    <view>风扇停止工作</view>
                  </view>
                </view>
              </view>
          </view>
          <!-- 震动通知 -->
          <view class="group_6">
              <view class="group_3 top-img-text">
                <img class="img-top" src="/static/震动通知.png" alt="">
                <span class="text-t">震动通知</span>
              </view>
              <!-- 箱内温度 -->
              <view class="group_3">
                <view class="items-center">
                  <view class="ml-6 font text_7">单次震动</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                    @change="onceSms"
                    activeColor="green" 
                    :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                    label="短信" 
                    :checked="listdata.shake.once_sms"  
                    :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                    @change="onceMobile"
                    activeColor="green" 
                    :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                    label="电话" 
                    :checked="listdata.shake.once_mobile"  
                    :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                    @change="onceWechat"
                    activeColor="green" 
                    :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                    label="微信" 
                    :checked="listdata.shake.once_wechat"  
                    :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>
                </view>
              </view>
              <!-- 箱内湿度 -->
              <view class="group_3">
                <view class="items-center">
                  <view class="ml-6 font text_7">持续震动</view>
                </view>
                <view class="mt-10 group_7 zongliang-box">
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                      @change="multipleSms" 
                      activeColor="green" 
                      :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                      label="短信" 
                      :checked="listdata.shake.multiple_sms" 
                      :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                    @change="multipleMobile"
                    activeColor="green" 
                    :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                    label="电话" 
                    :checked="listdata.shake.multiple_mobile"  
                    :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>
                  <u-checkbox-group placement="row">
                    <u-checkbox 
                    @change="multipleWechat" 
                    activeColor="green" 
                    :customStyle="{margin: '30rpx 40rpx 0 0'}" 
                    label="微信" 
                    :checked="listdata.shake.multiple_wechat"  
                    :disabled="false"
                    ></u-checkbox>
                  </u-checkbox-group>  
                </view>
              </view>
          </view>

          <view class="padding-lr">
              <view class="padding-lr-zi">
                <view class="paddong-zi-button">
                <u-button @click="seveData" color="#23693f" type="primary" shape="circle" text="保 存"></u-button>
                </view>
                <view class="paddong-zi-button">
                <u-button @click="resetData" color="#23693f" type="primary" shape="circle" text="重 置"></u-button>
                </view>
              </view>
          </view>
      </view>
  </view>
</template>

<script>
import request from '../../utils/request';
  export default {
    components: {},
    props: {},
    data() {
      return {
        multiple_sms: false,
        isChecked:true,
        listdata:{
          warning:{},
          safe:{},
          shake:{}
        }, // 数据
        checkbox:[], // checkbox组件上绑定name选择的过的会通过change事件传到该数组
        vallidata:1000,
      };
    },

    onShow(){
      this.listData()
    },
    methods: {
      onceSms(event) {
		  console.log('调用了');
      // 更新数据
	  if(event==true){
	  			 this.listdata.shake.once_sms = event;
	  			  this.listdata.shake.multiple_sms = false;
	  }else{
	  			 this.listdata.shake.once_sms = event;
	  }
      
    },
      onceMobile(event) {
		   console.log('调用了');
      // 更新数据
	  if(event==true){
	  			 this.listdata.shake.once_mobile = event;
	  			  this.listdata.shake.multiple_mobile = false;
	  }else{
	  			 this.listdata.shake.once_mobile = event;
	  }
      
    },
      onceWechat(event) {
		   console.log('调用了');
		  if(event==true){
			  this.subScribeMsg()
			  this.listdata.shake.once_wechat = event;
			  this.listdata.shake.multiple_wechat = false;
		  }else{
			  this.listdata.shake.once_wechat = event;
		  }
      // 更新数据
      
    },
      multipleSms(event) {
		   console.log('调用了');
      // 更新数据
	  if(event==true){
	  			   this.listdata.shake.multiple_sms = event;
	  			  this.listdata.shake.once_sms = false;
	  }else{
	  			   this.listdata.shake.multiple_sms = event;
	  }
     
    },
	 subScribeMsg() { // 订阅信息
	        uni.getSetting({
	          withSubscriptions: true,
	          success(res) {
	            console.log('1', res.subscriptionsSetting);
	            if (!res.subscriptionsSetting.mainSwitch) {
	              uni.openSetting({ //打开设置页
	                success(res) {
	                  console.log(res.authSetting);
	                }
	              })
	            } else {
	              uni.requestSubscribeMessage({
	                tmplIds: ['t8WQyWEQmxNjesz7XAoLdK61pEtvHB7iQo3hu0Ecn6M',
	                ],
	                success(res) {
	                  console.log(res);
	                  if (res['BGgZe98QHr0I1S1GrtGps5_rLX6n9cW1AsXhL4YkHHc'] == "accept") { // 用户点击确定后
	                    console.log('1111');
	                  }
	                }
	              })
	            }
	          }
	        })
	      },
      multipleMobile(event) {
		   console.log('调用了');
      // 更新数据
	  if(event==true){
	  			  this.listdata.shake.multiple_mobile = event;
	  			  this.listdata.shake.once_mobile = false;
	  }else{
	  			  this.listdata.shake.multiple_mobile = event;
	  }
      
    },
      multipleWechat(event) {
		   console.log('调用了');
		if(event==true){
			  this.subScribeMsg()
			this.listdata.shake.multiple_wechat = event;
			this.listdata.shake.once_wechat=false
			
		}else{
			this.listdata.shake.multiple_wechat = event;
		}
      // 更新数据
      
    },
      //  保存
      seveData(){
        request.post('/api/user/settingUpdate', {content:JSON.stringify(this.listdata)}).then(res => {
         uni.showToast({
            icon:"none",
            title:res.data.msg
          })
          this.$forceUpdate(); 
       })
      },
      // 重置表单
      resetData(){
        // 重新发请求
        this.listData()
      },
      listData(){
      request.get('/api/user/settingGet', {}).then(res => {
                // console.log(res)
                // this.listdata = Object.assign({}, res.data.data)
                this.listdata = {...res.data.data}
				// this.listdata.shake.multiple_mobile=false
				// this.listdata.shake.multiple_sms=false
				// this.listdata.shake.once_mobile=false
				// this.listdata.shake.once_sms=false
              })
      },
    },
  };
</script>

<style scoped lang="scss">
.green-checkbox {  
  background-color: #008000; /* 绿色背景 */  
  // border: none; /* 无边框 */  
  height: 16px; /* 高度 */  
  width: 16px; /* 宽度 */  
}  
  
.green-checkbox:checked {  
  background-color: #00ff00; /* 勾选状态的背景颜色为绿色 */  
}

.taxtbox1{
  width: 50%;
}
.taxtbox2{
  width: 50%;
}
.textBox{
  margin-top: 20rpx;
  margin-left: 10rpx;
  width: 50%;
  display: flex;
  align-items: center;
  font-size: 24rpx;
}
.page-m{
  margin-bottom: 230rpx;
}
// 按钮
.padding-lr-zi{
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
}
.padding-lr-zi-button{
  margin: 0 50rpx;
}
.paddong-zi-button{
  width: 100%;
  height: 100%;
  margin: 0 30rpx;
}
.padding-lr{
  background-color: #fff;
  position: fixed;  
  justify-content: space-between;
  bottom: 0;
  width: 92%;
  padding: 35rpx 35rpx 50rpx; 
  z-index: 2;
}

.img-top{
  width: 60rpx;
  height: 60rpx;
}
.text-t{
  margin-left: 20rpx;
}
.top-img-text{
  display: flex;
  align-items: center;
}
.zongliang-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
	.point_class{
		margin-top: -5rpx;
	}
	.icon_r_m{
		margin-right: 10rpx;
	}
	.items-center {
	display: flex;
	align-items: center;	
	margin-top: 10rpx;
	}
	.back_r_m{
		margin-right: 10rpx;
	}
	.back_h{
		margin-top: 25rpx;
	}
	
  .ml-17 {
    margin-left: 34rpx;
  }
  .ml-27 {
    margin-left: 54rpx;
  }
  .ml-9 {
    margin-left: 18rpx;
  }
  .mt-29 {
    margin-top: 58rpx;
  }
  .ml-7 {
    margin-left: 14rpx;
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .page {
    padding-top: 30rpx;
    height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		bottom: 0px;
    background-color: #ffff;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .image_5 {
    width: 32rpx;
    height: 32rpx;
  }
  .group_3 {
    padding: 0 78rpx;
    margin-top: 40rpx;
  }
  .image_6 {
    width: 30rpx;
    height: 32rpx;
  }
  .image_77{
    width: 22rpx;
		height: 32rpx;
  }
  .image_88{
    width: 23rpx;
		height: 32rpx;
  }
  .image_99{
    width: 24rpx;
		height: 32rpx;
  }
  .font {
    font-size: 24rpx;
    font-family: 微软雅黑;
    line-height: 23.38rpx;
    color: #000000;
  }
  .group_5 {
    padding: 16rpx 24rpx;
    border-radius: 30rpx;
    height: 60rpx;
    border-left: solid 2rpx #f7f7f7;
    border-right: solid 2rpx #f7f7f7;
    border-top: solid 2rpx #f7f7f7;
    border-bottom: solid 2rpx #f7f7f7;
  }
  .font_2 {
    font-size: 24rpx;
    font-family: 微软雅黑;
    line-height: 23.38rpx;
    color: #888888;
  }
  .font_3 {
    border: none;
    font-size: 32rpx;
    font-family: 微软雅黑;
    line-height: 23.38rpx;
    color: #23693f;
  }
  .group_6 {
    margin-top: 20rpx;
    overflow-y: auto;
  }
  .text_7 {
    line-height: 22.2rpx;
  }
  .group_7 {
    padding: 0 32rpx;
  }
  .group_8 {
    flex: 1 1 252rpx;
    padding: 4rpx 20rpx;
    border-radius: 50rpx;
    height: 62rpx;
    border: solid 2rpx #f7f7f7;
  }
  .text_8 {
    line-height: 22.08rpx;
  }
  .view {
    margin-right: 6rpx;
  }
  .text_9 {
    line-height: 22.18rpx;
  }
  .group_9 {
    padding: 0 58rpx;
  }
  .image_7 {
    width: 60rpx;
    height: 60rpx;
  }
  .font_4 {
    font-size: 32rpx;
	margin-left: 15rpx;
    font-family: 微软雅黑;
    line-height: 30.08rpx;
    color: #000000;
  }
  .text_10 {
    line-height: 29.5rpx;
  }
  .group_10 {
    margin-top: 38rpx;
    padding: 0 74rpx;
  }
  .text_11 {
    line-height: 25.64rpx;
  }
  .group_11 {
    margin-top: 20rpx;
  }
  .text_12 {
    line-height: 22.06rpx;
  }
  .text_13 {
    line-height: 22.3rpx;
  }
  .view_2 {
    margin-top: 36rpx;
  }
  .image_8 {
    width: 24rpx;
    height: 32rpx;
  }
  .font_5 {
    font-size: 24rpx;
    font-family: 微软雅黑;
    line-height: 26.06rpx;
    color: #000000;
  }
  .group_12 {
    margin-top: 20rpx;
  }
  .group_13 {
    padding: 16rpx 24rpx;
    border-radius: 30rpx;
    border-left: solid 2rpx #f7f7f7;
    border-right: solid 2rpx #f7f7f7;
    border-top: solid 2rpx #f7f7f7;
    border-bottom: solid 2rpx #f7f7f7;
  }
  .text_14 {
    line-height: 22.3rpx;
  }
  .text_16 {
    line-height: 22.22rpx;
  }
  .text_15 {
    line-height: 22.2rpx;
  }
  .text_17 {
    line-height: 22.3rpx;
  }
  .group_14 {
    margin-top: 36rpx;
    padding: 0 76rpx;
  }
  .image_9 {
    width: 28rpx;
    height: 28rpx;
  }
  .group_15 {
    margin-top: 20rpx;
    padding: 0 112rpx;
  }
  .text_18 {
    line-height: 22.24rpx;
  }
  .text_20 {
    line-height: 22.24rpx;
  }
  .group_16 {
    width: 194.04rpx;
  }
  .text_19 {
    line-height: 22.22rpx;
  }
  .text_21 {
    line-height: 22.28rpx;
  }
  .view_3 {
    margin-top: 40rpx;
  }
  .text_22 {
    line-height: 29.64rpx;
  }
  .group_17 {
    margin-top: 32rpx;
  }
  .group_18 {
    padding: 0 136rpx 32rpx;
  }
  .text_23 {
    line-height: 22.2rpx;
  }
  .group_19 {
    margin-top: 16rpx;
  }
  .equal-division {
    width: 420.4rpx;
  }
  .text_24 {
    line-height: 22.16rpx;
  }
  .text_25 {
    line-height: 22.16rpx;
  }
  .text_26 {
    line-height: 22.16rpx;
  }
  .text_27 {
    margin-top: 40rpx;
    line-height: 22.2rpx;
  }
  .section_2 {
    padding: 24rpx 96rpx 18rpx;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    border-left: solid 2rpx #f7f7f7;
    border-right: solid 2rpx #f7f7f7;
    border-top: solid 2rpx #f7f7f7;
    border-bottom: solid 2rpx #f7f7f7;
  }
  .text-wrapper {
    padding: 28rpx 0;
    background-color: #23693f;
    border-radius: 40rpx;
    width: 242rpx;
    height: 84rpx;
  }
  .font_6 {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 30.08rpx;
    font-weight: 700;
    color: #ffffff;
  }
  .text_28 {
    line-height: 29.18rpx;
  }
</style>