<template>
    <div class="air-adjust office-card g-fl">
        <div class="air-content">
            <div class="air-adjust-env">
                <div class="air-text">
                    <span class="envname">空调</span>
                    <div class="envnum">{{airTemp ? airTemp :'--'}}<span>℃</span></div>
                </div>
                <div class="air-show-all" v-if="allDevices.length>1&&hasAir && totalBoundPoint.tempSetBound">
        
                    <SwitchLR
                        @commponent-SwitchLR-change="allAirClick"
                    ></SwitchLR>

                </div>
            </div>
            <div class="air-adjust-btn">
                <image
                :src="h5StaticPath+ (airData.isOpen?'openair2.png':'air_close2.png')"
                    alt=""
                    lazyload
                />
            </div>
            <div
                class="air-switch"
                v-show="!allAirShow && totalBoundPoint.switchSetBound"
            >
                <switch
                    v-if="hasAir && !isACATVA"
                    :isACATFC="isACATFC"
                    :seasonType="seasonType"
                    :isHand="'hand'"
                    :showWorkTime="showWorkTime"
                    :checked="airData.isOpen"
                    :eqTitle="eqTitle"
                    @component-switch-change="changeZongAir('sw')"
                ></switch>
            </div>
        </div>
        <!-- 空调 调节 -->
        <div class="air-control-wrap" v-show="!allAirShow&&hasAir&&airData.isOpen">
            <div v-if="totalBoundPoint.tempSetBound" class="air-control-item" >
            <CardSlider
                :cardWidth="cardWidth"
                :maxValue="endTemp"
                :minValue="startTemp"
                :onlyLine="false"
                :typeValue="nowTemp"
                type="air"
                @silder-mouseEnd="ctouchend($event)"
            ></CardSlider>
            </div>
            <div
                class="air-control-item item-flex"
                v-if="!isACATVA && totalBoundPoint.gearSetBound"
            >
                <div class="air-control-item-box">
                    <div class="envnum-common air-envnum-comon">
                        <span
                            class="envnum-common-wind"
                            v-for="(item,index) in windGearArr"
                            :key="index"
                            :class="{'windBlack': item == airGear}"
                        >{{item}}</span>
                    </div>
                    <div class="air-common-text change-text">风量调节</div>
                </div>
                <div class="air-common-switch">
                    <div
                        class="switch"
                        :class="{'disabled':airGear<=1||!airData.isOpen}"
                        @click="changeZongAir('gear','windLow')"
                    >
                        <img src="{{h5StaticPath}}wind_small2.svg" />
                    </div>
                    <div
                        class="switch"
                        :class="{'disabled':airGear>=3||!airData.isOpen}"
                        @click="changeZongAir('gear','windUp')"
                    >
                        <img src="{{h5StaticPath}}wind_big2.svg" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell': isAutoGear==1,'disabled':!airData.isOpen}"
                        @click="changeZongAir('gear','auto')"
                    >
                      <img src="{{h5StaticPath}}wind_auto2.svg" />
                    </div>
                </div>
            </div>
            <div
                class="air-control-item item-flex"
                v-if="!isACATVA && totalBoundPoint.modeSetBound"
            >
                <div class="air-control-item-box">
                    <div class="envnum-common air-envnum-comon">
                        {{airMode==2?'制热':airMode==1?'制冷':'通风'}}
                    </div>
                    <div class="air-common-text change-text">模式设定</div>
                </div>
                <div class="air-common-switch">
                   <div
                        class="switch"
                        :class="{'yell':  airMode==1,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',1)"
                    >
                        <img :src="h5StaticPath+'aircoldblack2.svg'" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell': airMode==2,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',2)"
                    >
                        <img :src="h5StaticPath+'airsunblack2.svg'" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell':  airMode==3,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',3)"
                    >
                        <img :src="h5StaticPath+'aircloudblack2.svg'" />
                    </div>
                </div>
            </div>
        </div>
        <div
            class="allAir"
            v-show="allAirShow"
        >
        <div class="eachFeat"   @click="openFloorFeatPop(item)"
        v-for="(item,aindex) in allDevices"
                :key="aindex"
            >
                <div class="temp">
                    <div style="display: flex;">{{item.tempSet2 ? item.tempSet2 : '--'}}<span class="unit">℃</span></div>
                    <Switch
                        v-if="item.boundPoint.switchSetBound"
                        :checked="item.open"
                        :height="32"
                        :width="64"
                        @component-switch-change="eachAirOpen(aindex)"
                    ></Switch>
                </div>
                <div class="status">
                  <img v-if="item.boundPoint.modeSetBound" :src="item.airMode2 == 1? h5StaticPath+'aircoldblack2.svg': item.airMode2 == 2? h5StaticPath+'airsunblack2.svg': h5StaticPath+'aircloudblack2.svg'" />
                   <span v-if="item.boundPoint.modeSetBound">{{item.airMode2 == 2 ? '制热' : item.airMode2 == 1 ? '制冷' : '通风'}}</span> 
                </div>
                <div class="eqName">
                    {{item.name}}
                </div>
                <img
                    v-if="item.boundPoint.gearSetBound || item.boundPoint.modeSetBound ||item.boundPoint.tempSetBound"
                    :style="{'opacity':(item.open ? '1' : '0.3')}"
                    class="imgSt"
                    src="{{h5StaticPath}}icon_adjust.svg"
                />
            </div>
       
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import {
  changeManualTempHttp,
  querySpaceConditioners
} from '../../../api/officehome.js'
import config from '@config'
import { isWithinLocation } from '@/service/location'
import store from '@/store'
import { mapState } from '@wepy/x'
import { checkSpaceControl } from '@/packagesEnv/pages/common.js'

let infoTimer
const barWidth = 17

wepy.component({
  props: {
    isControl: Boolean, // 是否可控
    roomType: String, // 房间类型
    // hasBlowing: Boolean, // 有无变风量
    roomHasScene: Boolean, // 加班场景
    temperature: Number,
    cardWidth: Number,
    objectId: String,
    hasAir: {
      type: Boolean,
      default: true
    }, // 有无空调
    equipConfig: Array, // 设备配置情况
    projectId: String,
    isACATVA: Boolean,
    isACATFC: Boolean
  },
  store,
  data: {
    baseMode: [
      {
        name: '温度',
        id: 'temp',
        selectArr: []
        // sel: 0,
        // value: 25
      },
      {
        name: '档位',
        id: 'gear',
        selectArr: [0, 1, 2, 3, 'AUTO']
      },
      {
        name: '模式',
        id: 'mode',
        selectArr: ['制冷', '制热', '通风'],
        refer: [
          { mid: 1, value: '制冷', sindex: 0 },
          { mid: 2, value: '制热', sindex: 1 },
          { mid: 3, value: '通风', sindex: 2 }
        ]
      }
    ],
    allDevices: [],

    showWorkTime: false, // 展示是否需要预约时间
    h5StaticPath: config.h5StaticPath + '/page-officehome/',

    eqTitle: '空调',

    windGearArr: [0, 1, 2, 3], // 风量3/5个档位

    nowTemp: 18,
    airMode: 2, // 空调模式 总的  1=cold；2=hot 3=wind
    airGear: 1, // 风量档位 总的
    isAutoGear: 0,
    airTemp: 18, // 总的 温度
    airData: {
      isOpen: true, // 空调开关 true 是开
      spaceStatus: '' // 固定框文案展示
    },
    totalBoundPoint: {},
    seasonType: '',
    movesign: false,
    startX: 0,
    transX: 0,
    tempBarWidth: 0,
    startTemp: 18,
    endTemp: 26,

    allAirShow: false
  },
  watch: {
    hasAir(val) {
      if (!val) {
        clearInterval(infoTimer)
        this.airData.isOpen = false
      }
    },
    objectId(val) {
      if (val) {
        this.doTimeout()
        this.getAirInfo()
      } else {
        this.airData.isOpen = false
      }
    }
  },
  computed: {
    ...mapState({ isNowTime: (state) => state.officehome.isNowTime })
  },
  ready() {
    var _this = this
  },
  detached() {
    this.airData.isOpen = false
    clearInterval(infoTimer)
  },
  methods: {
    doTimeout() {
      clearInterval(infoTimer) // 定时器先清理 再设定
      infoTimer = setInterval(() => {
        this.getAirInfo()
      }, 15000)
    },
    doTemp(newVal) {
      // 处理温度
      var _this = this
      let maxSelecotr = this.$wx.createSelectorQuery()
      maxSelecotr
        .select('#tempBar')
        .boundingClientRect()
        .exec((res) => {
          // console.log('res', res);
          _this.tempBarWidth =
            res[0] && res[0].width
              ? res[0].width - barWidth
              : _this.tempBarWidth

          var tempNum = (_this.endTemp - _this.startTemp) * 2
          // console.log("_this.tempBarWidth", _this.tempBarWidth, newVal);
          var eachUnit = _this.tempBarWidth / tempNum // 0.5度的长度
          var changeNum = (newVal - _this.startTemp) * 2

          var transX = eachUnit * changeNum
          if (transX < 0) {
            // transX只能是正的
            transX = 0
          }
          if (transX > _this.tempBarWidth) {
            transX = _this.tempBarWidth
          }
          _this.transX = transX
        })
    },
    allAirClick(val) {
      if (!checkSpaceControl(this.isControl)) return
      this.getAirInfo()
      this.allAirShow = !val
    },
    ctouchend: function(value) {
      if (!this.airData.isOpen) return
      // 挪动到一定区域 则可以自己到固定位置
      var _this = this
      _this.movesign = false
      _this.changeZongAir('temp', value)
      this.$emit('setCanScroll', true)
    },
    eachAirOpen(aindex) {
      if (!checkSpaceControl(this.isControl)) return
      isWithinLocation()
        .then(() => {
          this.allDevices[aindex].open = !this.allDevices[aindex].open
          var value = this.allDevices[aindex].open ? 1 : 0

          this.changeOneAir(
            this.allDevices[aindex].id,
            this.allDevices[aindex].switchCode,
            value
          )
        })
        .catch(() => {})
    },
    showDetail(funcid) {
      this.$emit('showDetail', { funcid: funcid })
      wx.uma.trackEvent('officeHome_changeAir_temperature', {
        key: 'roomTemperature'
      })
    },

    // 空调信息airTemp
    getAirInfo() {
      const paramObj = {
        projectId: this.projectId, // 'Pj1101080255'
        spaceId: this.objectId // 'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
      }
      var _this = this
      // wx.showLoading();
      querySpaceConditioners(paramObj)
        .then((res) => {
          var data = res.data || {}
          // console.log('_this.baseMode[0]', data);

          _this.airTemp = data.tempSet

          _this.airMode = data.workMode // 1=cold；2=hot；3=wind
          _this.airGear = data.gear || 0 // 总的档位
          _this.isAutoGear = data.isAutoGear // 总的档位
          _this.totalBoundPoint = data.boundPoint // 空调可控点位
          _this.airData.isOpen = !!data.runStatus
          var maxTempSet = data.maxTempSet
          _this.endTemp = data.maxTempSet
          var minTempSet = data.minTempSet
          _this.startTemp = data.minTempSet
          //   获取的空调温度超出设置 上下限
          _this.nowTemp = data.tempSet || data.minTempSet
          if (data.tempSet < data.minTempSet) {
            _this.nowTemp = data.minTempSet
          }
          if (data.tempSet > data.maxTempSet) {
            _this.nowTemp = data.maxTempSet
          }
          var tempArr = []
          for (var i = minTempSet; i <= maxTempSet; i = i + 0.5) {
            tempArr.push(i)
          }

          _this.baseMode[0].selectArr = tempArr
          _this.doTemp(data.tempSet)
          var deviceArr = [];
          (data.equipList || []).forEach((eitem) => {
            var deviceObj = {}
            deviceObj.id = eitem.id
            deviceObj.name = eitem.localName
            deviceObj.open = eitem.runStatus == 1
            deviceObj.switchCode = eitem.switchCode
            deviceObj.boundPoint = eitem.boundPoint
            var allModel = JSON.parse(JSON.stringify(_this.baseMode))
            allModel.forEach((mitem) => {
              if (mitem.id == 'temp') {
                mitem.code = eitem.tempSetCode
                deviceObj.nowTemp2 = eitem.tempSet || _this.startTemp
                if (eitem.tempSet > _this.endTemp) {
                  deviceObj.nowTemp2 = _this.endTemp
                }
                if (deviceObj.nowTemp2 < _this.startTemp) {
                  deviceObj.nowTemp2 = _this.startTemp
                }
                deviceObj.tempSet2 = eitem.tempSet
              }
              if (mitem.id == 'gear') {
                mitem.code = eitem.gearCode
                deviceObj.airGear2 = eitem.gear || 0
                deviceObj.isAutoGear2 = eitem.isAutoGear
              }
              if (mitem.id == 'mode') {
                mitem.code = eitem.modeSetCode
                deviceObj.airMode2 = eitem.workMode
              }
            })
            deviceObj.allModel = allModel
            deviceArr.push(deviceObj)
          })

          _this.allDevices = deviceArr
        })
        .catch(() => {
          // wx.hideLoading();
        })
    },

    vibrateLong() {
      if (wx.canIUse('vibrateLong')) {
        wx.vibrateLong()
      } else {
        wx.vibrateShort()
      }
    },
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort()
      } else {
        wx.vibrateLong()
      }
    },
    // 手动模式下设备是否可控
    checkControlMode(id) {
      let flag = false
      if (!this.controlMode) {
        return flag
      }

      //  总开关
      if (id === 'air') {
        let canOpen = true
        for (let i = 0; i < this.equipConfig.length; i++) {
          const ele = this.equipConfig[i]
          for (let j = 0; j < this.lampList.length; j++) {
            const jele = this.lampList[j]
            // 有可控设备
            if (ele.equipmentId === jele.id && ele.isExeSpaceTime) {
              canOpen = false
              return
            }
          }
        }
        flag = canOpen
      } else {
        this.equipConfig.map((item) => {
          //  设备不受控制 可直接开灯
          if (item.equipmentId === id && !item.isExeSpaceTime) {
            flag = true
          }
          // 设备受控 且有当前工作时间 可直接开灯
          if (
            item.equipmentId === id &&
            this.isNowTime &&
            item.isExeSpaceTime
          ) {
            flag = true
          }
        })
      }

      return flag
    },
    checkAirCanOpen(id, value) {
      // 判断空调是否能开启
      if (value) {
        // 12表示开空调
        // 手动模式下设备是否可控
        let canControl = this.checkControlMode(id)
        if (this.roomHasScene && !this.isNowTime && !canControl) {
          this.$emit('component-open-workTimePop', true)
          this.$emit('component-EquipType-workTimePop', id)
          return false
        }
      }
      return true
    },
    changeZongAir(btnType, value) {
      if (!checkSpaceControl(this.isControl)) return
      if (!this.airData.isOpen && btnType != 'sw') return
      isWithinLocation()
        .then(() => {
          if (this.roomType === '开放') {
            this.showWorkTime = this.checkAirCanOpen(
              'air',
              !this.airData.isOpen
            )
            if (!this.showWorkTime) {
              return
            }
          }
          var _this = this
          if (btnType == 'gear' && value == 'windLow') {
            // 降挡
            if (this.airGear > 1) {
              this.airGear--
              this.isAutoGear = 0
            } else {
              return
            }
          }
          if (btnType == 'gear' && value == 'windUp') {
            // 升档
            if (this.airGear < 3) {
              this.airGear++
              this.isAutoGear = 0
            } else {
              return
            }
          }
          if (btnType == 'gear' && value == 'auto') {
            this.isAutoGear = this.isAutoGear == 1 ? 0 : 1
          }
          if (btnType == 'mode') {
            this.airMode = value
          }
          if (btnType == 'sw') {
            this.airData.isOpen = !this.airData.isOpen
          }

          let paramArr = []
          this.allDevices.forEach((dele) => {
            if (btnType == 'sw') {
              let paramObj = {
                id: dele.id,
                code: dele.switchCode,
                value: _this.airData.isOpen ? 1 : 0
              }
              paramArr.push(paramObj)
            }
            var pvalue
            dele.allModel.forEach((mele) => {
              if (mele.id == 'temp') {
                pvalue = value
              } else if (mele.id == 'gear') {
                pvalue = _this.isAutoGear == 1 ? 4 : _this.airGear
              } else if (mele.id == 'mode') {
                pvalue = _this.airMode
              }

              if (mele.id == btnType) {
                let paramObj = {
                  id: dele.id,
                  code: mele.code,
                  value: pvalue
                }
                paramArr.push(paramObj)
              }
            })
          })

          this.vibrateShort()
          wx.showLoading()

          //  下达指令
          changeManualTempHttp(paramArr, {
            curTemp: _this.temperature,
            equipType: 'airConditioner'
          })
            .then((res) => {
              if (btnType == 'temp') {
                _this.airTemp = value
              }
              _this.doTimeout()
            })
            .catch(() => {
              wx.hideLoading()
            })
        })
        .catch(() => {})
    },
    changeOneAir(id, code, value, deviceObjCopy) {
      var _this = this
      // isWithinLocation()
      //   .then(() => {
      this.vibrateShort()
      if (this.roomType === '开放') {
        this.showWorkTime = this.checkAirCanOpen(id, value)
        if (!this.showWorkTime) {
          return
        }
      }
      const paramArr = [
        {
          id: id,
          code: code,
          value: value
        }
      ]
      wx.showLoading()

      if (deviceObjCopy) {
        var allDevicesCopy = [..._this.allDevices]
        var aindex = allDevicesCopy.findIndex((device) => {
          return device.id == deviceObjCopy.id
        })

        allDevicesCopy[aindex] = deviceObjCopy
        _this.allDevices = allDevicesCopy
      }

      //  下达指令
      changeManualTempHttp(paramArr, {
        curTemp: _this.temperature,
        equipType: 'airConditioner'
      })
        .then((res) => {
          _this.doTimeout()
        })
        .catch(() => {
          wx.hideLoading()
        })
      // })
      // .catch(() => {});
    },
    openFloorFeatPop(item) {
      var _this = this
      if (item.open) {
        this.$emit('component-open-airHand-pop', item, {
          maxValue: _this.endTemp,
          minValue: _this.startTemp
        })
      }
    }
  }
})
</script>

<style lang="less" scoped>
.allAir {
  display: flex;
  box-sizing: border-box;
  padding: 32rpx 10rpx 0rpx 10rpx;
  border-top: 1px solid rgba(196, 196, 196, 0.4);
  flex-wrap: wrap;
  .eachFeat {
    margin-bottom: 24rpx;
    position: relative;
    height: 232rpx;
    width: 296rpx;
    margin-left: 24rpx;
    background: #f7f9fa;
    border-radius: 32rpx;
    padding-left: 32rpx;
    box-sizing: border-box;
    padding-top: 26rpx;
    padding-bottom: 24rpx;
    padding-right: 24rpx;
    .temp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Montserrat;
      font-size: 44rpx;
      font-weight: 400;
      line-height: 44rpx;
      color: #1b144e;
    }
    .unit {
      font-family: Mulish;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 30rpx;
      color: #c4c4c4;
    }
    .status {
      height: 96rpx;
      box-sizing: border-box;
      padding-top: 8rpx;
      padding-bottom: 52rpx;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
      color: #c4c9cf;
      image {
        margin-right: 8rpx;
        width: 28rpx;
        height: 28rpx;
        opacity: 0.6;
      }
    }
    .eqName {
      font-family: PingFang SC;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 44rpx;
      color: #4d5262;
      width: calc(100% - 23px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .imgSt {
      position: absolute;
      right: 28rpx;
      bottom: 30rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
}
.air-common-text {
  padding-top: 2rpx;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 30rpx;
  color: rgba(196, 196, 196, 1);

  &.change-text {
    font-size: 24rpx;
    line-height: 40rpx;
  }
}
.office-card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 50rpx;
  background: #ffffff;
  margin-bottom: 30rpx;
}

.air-adjust {
  position: relative;
  // height: 280rpx;
  .air-text {
    padding-bottom: 60rpx;
  }
  .air-content {
    padding: 48rpx 46rpx 32rpx 40rpx;
    box-sizing: border-box;
    position: relative;
  }
  .air-switch {
    position: absolute;
    bottom: 10rpx;
    right: 46rpx;
  }

  .air-adjust-env {
    .envname {
      font-family: PingFang SC;
      color: rgba(77, 82, 98, 1);
      font-size: 32rpx;
      font-weight: 600;
      line-height: 44rpx;
    }
    .envnum {
      font-family: Montserrat;
      font-size: 64rpx;
      font-weight: 400;
      line-height: 64rpx;
      padding-top: 10rpx;
      color: #1b144e;
      label {
        font-family: Mulish;
        font-weight: 800;
        font-size: 24rpx;
        margin-left: 6rpx;
        line-height: 30rpx;
        vertical-align: top;
        color: #c4c4c4;
      }
    }
  }
  .air-adjust-btn {
    position: absolute;
    top: 34rpx;
    right: 40rpx;
    image {
      width: 132px;
      height: 76px;
    }
  }
}

.air-show-all {
  height: 50rpx;
  .text {
    margin-right: 4px;
  }
  .air-arrow {
    width: 50rpx;
    height: 36rpx;
  }
  .showarrow {
    color: #4d5262;
  }
  .arrow {
    padding-top: 4px;
  }
}
.air-show-all-cont {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 50rpx;
  color: rgba(196, 196, 196, 1);
  display: flex;
  align-items: center;
}
.air-control-wrap {
  border-top: 1px solid rgba(196, 196, 196, 0.4);
  padding-top: 30rpx;
}
.air-control-item {
  padding: 30rpx 40rpx 32rpx 40rpx;
  box-sizing: border-box;

  &.item-flex {
    display: flex;
    justify-content: space-between;
  }
  .temp-wrap {
    display: flex;
    padding-top: 26px;
    padding-bottom: 5px;
    height: 20px;
    align-items: center;
    .minVal {
      color: #c4c4c4;
      font-size: 22rpx;
      flex-grow: 0;
      margin-right: 8px;
    }
    .maxVal {
      color: #c4c4c4;
      font-size: 22rpx;
      flex-grow: 0;
      margin-left: 8px;
    }
    .tempBar {
      //background: red;
      height: 10px;
      flex-grow: 1;
      position: relative;
      display: flex;
      border-radius: 10px;
      .circle {
        position: absolute;
        width: 19px;
        height: 19px;
        left: 0px;
        top: -5px;
        background: #ffffff;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
          0px 4px 10px rgba(0, 0, 0, 0.07);
        border-radius: 21px;
        z-index: 1;
        .tvalue {
          position: relative;
          top: -26px;
          text-align: center;
          color: #1f2429;
          font-size: 22rpx;
        }
        &.disable {
          opacity: 0.6;
        }
      }
      .eachBlock {
        width: 20%;
        background: red;
        &:nth-child(1) {
          background: #5e8bcf;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
        &:nth-child(2) {
          background: #9fb7cd;
        }
        &:nth-child(3) {
          background: #f3f3f3;
        }
        &:nth-child(4) {
          background: #ff9882;
        }
        &:nth-child(5) {
          background: #e5574f;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }
  }
  .air-control-item-box {
    display: flex;
    // align-items: center;
    flex-direction: column;
  }
  .envnum-common {
    font-family: Montserrat;
    font-weight: 500;
    line-height: 48rpx;
    font-size: 28rpx;
    color: rgba(77, 82, 98, 1);
    &.air-envnum-comon {
      display: flex;
      align-items: center;
    }
    .envnum-common-wind {
      font-family: Montserrat;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 30rpx;
      margin-right: 14rpx;
      color: rgba(196, 196, 196, 1);
      &.windBlack {
        font-size: 40rpx;
        font-weight: 500;
        line-height: 48rpx;
        color: rgba(77, 82, 98, 1);
      }
    }
    &.colorRed {
      color: red;
    }
    &.colorBlue {
      color: rgba(94, 139, 207, 1);
    }
    &.colorBlack {
      color: rgba(77, 82, 98, 1);
    }
    label {
      font-size: 11px;
      line-height: 13px;
      color: rgba(196, 196, 196, 1);
      vertical-align: top;
    }
  }
  .air-common-switch {
    display: flex;
  }
  .switch:last-child {
    margin-right: 0rpx;
  }
  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    width: 80rpx;
    font-size: 12px;
    margin-right: 16rpx;
    background: #f1f4f6;
    border-radius: 50%;
    image {
      width: 40rpx;
      height: 40rpx;
    }
    &.yell {
      background: rgba(61, 203, 204, 0.3);
    }
  }
}
.disabled {
  opacity: 0.5;
}
</style>

<config>
{
    usingComponents: {
        "switch": "../components/switch" ,
        "van-icon": "module:@vant/weapp/dist/icon",
        "van-loading": "module:@vant/weapp/dist/loading",
        "CardSlider": "../comComponents/CardSlider" ,
        "SwitchLR":   "../comComponents/SwitchLR",  
        "Switch":     "../comComponents/Switch", 
            }
}
</config>
