<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">
                    <div
                        class="air-show-all-cont"
                        @click="allAirClick"
                    >
                        <image
                            class="air-arrow"
                            :src="h5StaticPath+(allAirShow?'up_Arrow.svg':'down_Arrow.svg')"
                        />
                        <span class="text">{{allAirShow?'收起全部':'查看全部'}}</span>

                    </div>
                </div>
            </div>
            <div class="air-adjust-btn">
                <image
                    :src="h5StaticPath+ (airData.isOpen?'openair.png':'air_close.png')"
                    alt=""
                    lazyload
                />
            </div>
            <div
                class="air-switch"
                v-show="!allAirShow"
            >
                <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 v-show="!allAirShow&&hasAir&&airData.isOpen">
            <div class="air-control-item ">
                <div class="temp-wrap">
                    <div class="minVal">{{startTemp}}℃</div>
                    <div
                        class="tempBar"
                        id="tempBar"
                    >
                        <div class="eachBlock"></div>
                        <div class="eachBlock"></div>
                        <div class="eachBlock"></div>
                        <div class="eachBlock"></div>
                        <div class="eachBlock"></div>
                        <div
                            class="circle"
                            v-show="airData.isOpen"
                            style="transform: translateX({{transX}}px);"
                            bindtouchstart="ctouchstart"
                            bindtouchmove="ctouchmove"
                            bindtouchend="ctouchend"
                        >
                            <span class="tvalue">{{nowTemp}}℃</span>
                        </div>
                    </div>
                    <div class="maxVal">{{endTemp}}℃</div>
                </div>
                <div class="air-common-text change-text">温度设定</div>
            </div>

            <!--Pj1101050038  ACATVA没有风量调节 和开关按钮 -->
            <div
                class="air-control-item item-flex"
                v-if="!isACATVA"
            >
                <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')"
                    >
                        <image src="{{h5StaticPath}}wind_small.png" />
                    </div>
                    <div
                        class="switch"
                        :class="{'disabled':airGear>=3||!airData.isOpen}"
                        @click="changeZongAir('gear','windUp')"
                    >
                        <image src="{{h5StaticPath}}wind_big.png" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell': isAutoGear==1,'disabled':!airData.isOpen}"
                        @click="changeZongAir('gear','auto')"
                    >
                        AUTO
                    </div>
                </div>
            </div>
            <div
                class="air-control-item item-flex"
                v-if="!isACATVA"
            >
                <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==2,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',2)"
                    >
                        <image :src="airMode==2?h5StaticPath+'airsunred.svg':h5StaticPath+'airsunblack.svg'" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell':  airMode==1,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',1)"
                    >
                        <image :src="airMode==1?h5StaticPath+'aircoldblue.svg':h5StaticPath+'aircoldblack.svg'" />
                    </div>
                    <div
                        class="switch"
                        :class="{'yell':  airMode==3,'disabled':!airData.isOpen}"
                        @click="changeZongAir('mode',3)"
                    >
                        <image :src="airMode==3?h5StaticPath+'aircloudgreen.svg':h5StaticPath+'aircloudblack.svg'" />
                    </div>
                </div>
            </div>
        </div>
        <div
            class="allAir"
            v-show="allAirShow"
        >
            <div
                class="eachAir"
                :class="{'closeAir':!item.open,'oneAir':allDevices.length==1}"
                v-for="(item,aindex) in allDevices"
                :key="aindex"
            >
                <div class="airName">{{item.name}}</div>
                <div
                    class="openButton"
                    :class="{'open':item.open}"
                    @click="eachAirOpen(aindex,item)"
                >
                    <div class="openBack"></div>
                    <div class="openCircle">
                        <van-loading
                            size="8"
                            :style="{display:item.loading?'block':'none'}"
                            wrapperClassName="openCircle"
                        />
                    </div>
                </div>
                <div class="airBox">
                    <div
                        class="adjustBox"
                        :class="{'disable':!item.open}"
                        v-for="(mitem,mindex) in item.allModel"
                        :key="mindex"
                    >
                        <div
                            class="arrow"
                            :class="{'disable':mitem.sel==mitem.selectArr.length-1}"
                            @click="arrowUpClick(aindex,mindex,mitem.sel)"
                        >
                            <van-icon name="arrow-up" />
                        </div>
                        <div class="valueBox">
                            <div
                                class="valueWrap"
                                :style="{transform:'translateY('+mitem.sel*-50+'px)'}"
                            >
                                <div
                                    class="value"
                                    v-for="(sitem,sindex) in mitem.selectArr"
                                    :key="sindex"
                                >{{sitem}}</div>
                            </div>
                        </div>
                        <div
                            class="arrow"
                            :class="{'disable':mitem.sel==0||(mitem.sel==1&&mitem.id == 'gear')}"
                            @click="arrowDownClick(aindex,mindex,mitem.sel)"
                        >
                            <van-icon name="arrow-down" />
                        </div>
                        <div class="adjustName">{{mitem.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

let infoTimer
let debounceTimer
const barWidth = 17

wepy.component({
  props: {
    isControl: Boolean, // 是否可控
    roomType: String, // 房间类型
        // hasBlowing: Boolean, // 有无变风量
    roomHasScene: Boolean, // 加班场景
        // temperature: 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: [],
        // [
        //     {
        //         name: '右侧空调',
        //         open: false,
        //         loading: false,
        //         allModel: [
        //             {
        //                 name: '温度',
        //                 id: 'temp',
        //                 selectArr: [24, 25, 26, 27, 28],
        //                 sel: 0,
        //                 value: 25
        //             },
        //             {
        //                 name: '档位',
        //                 id: 'gear',
        //                 selectArr: [1, 2, 3],
        //                 sel: 0,
        //                 value: 2
        //             },
        //             {
        //                 name: '模式',
        //                 id: 'mode',
        //                 selectArr: ['制冷', '制热', '通风'],
        //                 refer: [{ mid: 1, name: '制冷', sindex: 0 }, { mid: 2, name: '制热', sindex: 1 }, { mid: 3, name: '通风', sindex: 2 }],
        //                 sel: 0,
        //                 value: '制冷'
        //             }
        //         ]
        //     }
        // ],
    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: ''    // 固定框文案展示
    },

    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
      }
    }
        // allDevices: {
        //     handler: function (newv) {
        //         console.log("allDevicesallDevices", newv)
        //     },
        //     deep:true
        // }
  },
  computed: {
    ...mapState({ isNowTime: state => state.officehome.isNowTime }),
    airRunImg() {
      let imgStr = ''
      switch (this.airData.icon) {
        case 1:
          imgStr = 'temp-keep.png'
          break
        case 2:
          imgStr = 'temp_cold.svg'
          break
        case 3:
          imgStr = 'temp_sun.png'
          break
        default:
          imgStr = ''
          break
      }
      return imgStr
    },
    devicesOpenNum() {
      var openArr = this.allDevices.filter((item) => { return item.open })
      return openArr.length
    }
  },
  ready() {
    this.querySeasonType()
    var _this = this
  },
  detached() {
    this.airData.isOpen = false
    clearInterval(infoTimer)
  },
  methods: {
    doTimeout() {
      clearInterval(infoTimer) // 定时器先清理 再设定
      infoTimer = setInterval(() => {
        this.getAirInfo()
      }, 15000)
    },
    doTransX: function (newVal) {
      var tempNum = (this.endTemp - this.startTemp) * 2
      var eachUnit = this.tempBarWidth / tempNum// 0.5度的长度
      var moveNum = Math.floor(newVal / eachUnit)
      this.nowTemp = moveNum * 0.5 + this.startTemp
      if (typeof this.nowTemp === 'number' && this.nowTemp % 1 === 0) {
                // this.vibrateShort();
      }
    },
    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() {
      if (!checkSpaceControl(this.isControl)) return
      this.getAirInfo()
      this.allAirShow = !this.allAirShow
    },
    ctouchstart: function (e) {
      if (!this.airData.isOpen) return
      var pageX = e.touches[0].pageX
      var _this = this
      this.startX = pageX
      _this.movesign = true
      this.$emit('setCanScroll', false)
    },
    ctouchmove: function (e) {
      if (!this.airData.isOpen || !this.movesign) return
      var _this = this

      var touch = e.touches[0]
      var pageX = Number(touch.pageX) // 页面触点Y坐标

      var moveX = pageX - this.startX
      this.startX = pageX

      var transX = this.transX + moveX

      if (transX < 0) { // transX只能是正的
        transX = 0
      }
      if (transX > this.tempBarWidth) {
        transX = this.tempBarWidth
      }

      console.log('touchmove', this.startX, transX, this.tempBarWidth)
      this.transX = transX
      this.doTransX(transX)
    },
    ctouchend: function (e) {
      if (!this.airData.isOpen) return
            // 挪动到一定区域 则可以自己到固定位置
      var _this = this
      _this.movesign = false
      _this.changeZongAir('temp')
      this.$emit('setCanScroll', true)
    },
    eachAirOpen(aindex) {
      if (!checkSpaceControl(this.isControl)) return
      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)// todo
    },
    arrowDownClick(aindex, mindex, sel) {
            // console.log('sel', sel);
      if (!checkSpaceControl(this.isControl)) return
      var nowDevice = this.allDevices[aindex]
      var nowModel = this.allDevices[aindex].allModel[mindex]
      if (!nowDevice.open) return
      if (sel == 0) return

      if (nowModel.id == 'gear' && sel == 1) return
      if (sel < 0) {
        nowModel.sel = 0
      } else {
        nowModel.sel--
      }

      if (nowModel.id == 'mode') {
        var value = nowModel.refer[nowModel.sel].mid
        console.log('nowModel.refer', nowModel.refer, nowModel.refer[nowModel.sel].mid)
      } else if (nowModel.id == 'gear') {
        var selval = nowModel.selectArr[nowModel.sel]
        var value = selval == 'AUTO' ? 4 : selval
        console.log('nowModel.refer2', selval, value)
      } else {
        var value = nowModel.selectArr[nowModel.sel]
        console.log('nowModel.refer3', value)
      }
      this.debounce(nowDevice.id, nowModel.code, value)

            // console.log("arrowup", aindex, mindex, sel)
    },
    debounce(id, code, value) {
      clearTimeout(debounceTimer)
      var _this = this
      debounceTimer = setTimeout(function () {
        _this.changeOneAir(id, code, value)
      }, 500)
    },
    arrowUpClick(aindex, mindex, sel) {
      if (!checkSpaceControl(this.isControl)) return
      var nowDevice = this.allDevices[aindex]
      var nowModel = this.allDevices[aindex].allModel[mindex]

      if (!nowDevice.open) return
      var selectArr = nowModel.selectArr
      if (sel == selectArr.length - 1) return
            // console.log('sel', sel);
      if (sel > selectArr.length - 1) {
        nowModel.sel = selectArr.length - 1
      } else {
        nowModel.sel++
      }

      if (nowModel.id == 'mode') {
        var value = nowModel.refer[nowModel.sel].mid
        console.log('nowModel.refer', nowModel.refer, nowModel.refer[nowModel.sel].mid)
      } else if (nowModel.id == 'gear') {
        var selval = nowModel.selectArr[nowModel.sel]
        var value = selval == 'AUTO' ? 4 : selval
      } else {
        var value = nowModel.selectArr[nowModel.sel]
      }

      this.debounce(nowDevice.id, nowModel.code, value)
            // this.changeOneAir(nowDevice.id, nowModel.code, value);
    },
    querySeasonType() {
      const params = {
        projectId: this.projectId,
        date: moment().format('YYYYMMDD') // 当天日期
      }
      if (!this.seasonType) {
        getSeasonType(params).then(res => {
          this.seasonType = res.data || ''
        }).catch(() => {
        })
      }
    },
    showDetail(funcid) {
      this.$emit('showDetail', { funcid: funcid })
      wx.uma.trackEvent('officeHome_changeAir_temperature', { key: 'roomTemperature' })
    },
        // async getInfo() {
        //     await this.getAirInfo();

        // },
        // 空调信息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.nowTemp = data.tempSet

        _this.airMode = data.workMode// 1=cold；2=hot；3=wind
        _this.airGear = data.gear || 0// 总的档位
        _this.isAutoGear = data.isAutoGear// 总的档位
        _this.airData.isOpen = !!data.runStatus
        var maxTempSet = data.maxTempSet
        _this.endTemp = data.maxTempSet
        var minTempSet = data.minTempSet
        _this.startTemp = data.minTempSet
        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

          var allModel = JSON.parse(JSON.stringify(_this.baseMode))
                    // console.log('allModel', allModel);
          allModel.forEach((mitem) => {
            if (mitem.id == 'temp') {
              mitem.code = eitem.tempSetCode
                            // mitem.value = eitem.tempSet;
              var index = mitem.selectArr.findIndex((ele) => {
                return ele == eitem.tempSet
              })
                            // console.log('index1', index, eitem.tempSet);
              mitem.sel = index == -1 ? 0 : index
            }
            if (mitem.id == 'gear') {
              mitem.code = eitem.gearCode
                            // mitem.value = eitem.gear;
              var index = mitem.selectArr.findIndex((ele) => {
                if (eitem.isAutoGear == 1) {
                  return ele == 'AUTO'
                } else {
                  return ele == eitem.gear
                }
              })
              mitem.sel = index == -1 ? 0 : index
                            // console.log('index2', eitem.gear);isAutoGear
            }
            if (mitem.id == 'mode') {
              mitem.code = eitem.modeSetCode
                            // mitem.value = eitem.workMode;
              var filterObj = mitem.refer.find((ele) => {
                return ele.mid == eitem.workMode
              })
              mitem.sel = (filterObj || {}).sindex || 0
                            //  console.log('index3', filterObj, 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
        }
        // console.log('btnType,value', btnType, value);
        // console.log('airData.isOpen', this.airData.isOpen);
        // console.log('this.airGear', this.airGear);
        // console.log('this.airMode', this.airMode);
        // console.log('this.nowTemp', this.nowTemp);

        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)
          }

          dele.allModel.forEach((mele) => {
            if (mele.id == 'temp') {
              var value = _this.nowTemp
            } else if (mele.id == 'gear') {
              var value = _this.isAutoGear == 1 ? 4 : _this.airGear
            } else if (mele.id == 'mode') {
              var value = _this.airMode
            }
            if (mele.id == btnType) {
              let paramObj = {
                id: dele.id,
                code: mele.code,
                value: value
              }
              paramArr.push(paramObj)
            }
          })
        })
                // console.log('this.nowTemp222', this.nowTemp);
        this.vibrateShort()
        wx.showLoading()

                //  下达指令
        changeManualTempHttp(paramArr).then(res => {
          if (btnType == 'temp') {
            _this.airTemp = _this.nowTemp
          }
          _this.doTimeout()
        }).catch(() => {
          wx.hideLoading()
        })
      }).catch(() => {
      })
    },
    changeOneAir(id, code, value) {
      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()
                //  下达指令
        changeManualTempHttp(paramArr).then(res => {
          _this.doTimeout()
        }).catch(() => {
          wx.hideLoading()
        })
      }).catch(() => {
      })
    }

  }

})
</script>

<style lang="less" scoped>
.allAir {
    display: flex;
    box-sizing: border-box;
    padding: 0rpx 10rpx 0rpx 10rpx;
    flex-wrap: wrap;
    .eachAir {
        position: relative;
        width: 50%;
        box-sizing: border-box;
        flex-shrink: 0;
        // border-right: 1px solid rgba(196, 196, 196, 0.4);
        border-top: 1px solid rgba(196, 196, 196, 0.4);
        padding: 40rpx 0rpx 20rpx 0rpx;
        &:nth-child(odd) {
            border-right: 1px solid rgba(196, 196, 196, 0.4);
        }
        &.closeAir {
            color: #c4c4c4;
        }
        &.oneAir {
            width: 100%;
            border-right: none;
        }
        .openButton {
            position: absolute;
            top: 28px;
            right: 15px;
            width: 25px;
            height: 8px;
            .openBack {
                width: 25px;
                height: 8px;
                border-radius: 12px;
                background: rgba(196, 196, 196, 0.2);
            }
            .openCircle {
                position: absolute;
                top: -3px;
                left: -4px;
                width: 12px;
                height: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                background: #ffffff;
                border: 1px solid #c4c4c4;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
            }
            &.open {
                .openBack {
                    background: rgba(61, 203, 204, 0.3);
                }
                .openCircle {
                    left: 18px;
                }
            }
        }

        .airName {
            padding: 0rpx 0rpx 20rpx 30rpx;
            width: calc(100% - 55px);
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            font-size: 30rpx;
            color: #4d5262;
        }
        .airBox {
            display: flex;
            .adjustBox {
                width: 33.333%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .valueBox {
                    height: 50px;
                    overflow: hidden;
                    color: #1f2429;
                    .valueWrap {
                        transition: transform 1s;
                        // transform: translateY(0px);
                        .value {
                            width: 100%;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            //font-weight: 600;
                            justify-content: center;
                            text-align: center;
                            font-size: 14px;
                        }
                    }
                }
                .arrow {
                    width: 100%;
                    height: 20px;
                    font-size: 18px;
                    color: #405292;
                    display: flex;
                    justify-content: center;
                    &.disable {
                        color: rgba(196, 196, 196, 0.8);
                    }
                }
                .adjustName {
                    color: #1f2429;
                    font-size: 12px;
                    padding-top: 17rpx;
                }
                &.disable {
                    .arrow {
                        color: rgba(196, 196, 196, 0.8);
                    }
                    .adjustName {
                        color: rgba(196, 196, 196, 1);
                    }
                    .valueBox {
                        color: rgba(196, 196, 196, 1);
                    }
                }
            }
        }
    }
}
.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 30rpx 20rpx 60rpx;
        box-sizing: border-box;
        position: relative;
    }
    .air-switch {
        position: absolute;
        bottom: 10rpx;
        right: 30rpx;
    }

    .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 {
        flex: 1;
        image {
            position: absolute;
            top: 0;
            right: 0;
            width: 314rpx;
            height: 220rpx;
        }
    }
}

.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-item {
    padding: 23rpx 28rpx 22rpx 43rpx;
    box-sizing: border-box;
    border-top: 1px solid rgba(196, 196, 196, 0.4);
    &.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: 36rpx;
        //background: #c4c4c433;
        background: rgba(196, 196, 196, 0.2);
        border-radius: 50%;
        image {
            width: 40rpx;
            height: 40rpx;
        }
        &.yell {
            background: rgba(61, 203, 204, 0.3);
        }
    }
}
.disabled {
    opacity: 0.4;
}
</style>

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